diff --git a/app/components/preview/PaperSimulator.vue b/app/components/preview/PaperSimulator.vue
index d114548..4f8457c 100644
--- a/app/components/preview/PaperSimulator.vue
+++ b/app/components/preview/PaperSimulator.vue
@@ -18,7 +18,7 @@ const paperWidth = computed(() => {
return `calc(${chars}ch + 80px)` // 40px padding cada lado para acomodar doble ancho
})
-// Obtener clases CSS para una línea
+// Obtener clases CSS para el contenido de una línea (sin alineación, eso va en el padre)
function getLineClasses(line: PreviewLine): string[] {
const classes: string[] = []
@@ -31,11 +31,6 @@ function getLineClasses(line: PreviewLine): string[] {
// Fuente (Font B es más angosta)
if (line.font === 'font_b') classes.push('font-b')
- // Alineación
- if (line.align === 'center') classes.push('text-center')
- else if (line.align === 'right') classes.push('text-right')
- else classes.push('text-left')
-
return classes
}
@@ -60,20 +55,22 @@ function handleVariableClick(segment: TextSegment) {
-
-
- {{ segment.content }}
+
+
+
+ {{ segment.content }}
-
- {{ segment.content }}
-
+
+ {{ segment.content }}
+
+
@@ -113,32 +110,49 @@ function handleVariableClick(segment: TextSegment) {
);
}
-/* Cada línea del ticket */
+/* Cada línea del ticket - usa flexbox para alineación */
.line {
- display: block;
- white-space: pre; /* Preservar espacios */
+ display: flex;
min-height: 1.4em;
color: #1a1a1a;
}
+/* Alineación usando flexbox (permite que transforms funcionen correctamente) */
+.align-left {
+ justify-content: flex-start;
+}
+
+.align-center {
+ justify-content: center;
+}
+
+.align-right {
+ justify-content: flex-end;
+}
+
+/* Contenido de la línea */
+.line-content {
+ white-space: pre;
+ display: inline-block;
+}
+
/* Font B - caracteres más angostos (40 chars vs 33) */
-.line.font-b {
+.line-content.font-b {
transform: scaleX(0.825);
- transform-origin: left;
}
/* Font B con doble ancho */
-.line.font-b.text-double-width {
+.line-content.font-b.text-double-width {
transform: scaleX(1.65); /* 0.825 * 2 */
}
/* Font B con doble alto */
-.line.font-b.text-double-height {
+.line-content.font-b.text-double-height {
transform: scaleX(0.825) scaleY(2);
}
/* Font B con doble ancho Y alto */
-.line.font-b.text-double-width.text-double-height {
+.line-content.font-b.text-double-width.text-double-height {
transform: scale(1.65, 2);
}
@@ -147,38 +161,32 @@ function handleVariableClick(segment: TextSegment) {
height: 1.4em;
}
-/* Doble ancho - escalar horizontalmente */
-.text-double-width {
+/* Doble ancho - escalar horizontalmente (Font A) */
+.line-content.text-double-width {
transform: scaleX(2);
- transform-origin: left;
- display: inline-block;
}
-/* Doble alto - escalar verticalmente */
-.text-double-height {
- display: block;
+/* Doble alto - escalar verticalmente (Font A) */
+.line-content.text-double-height {
transform: scaleY(2);
- transform-origin: top;
line-height: 1.4;
padding-bottom: 1.4em;
}
-/* Doble ancho Y alto combinados */
-.text-double-width.text-double-height {
+/* Doble ancho Y alto combinados (Font A) */
+.line-content.text-double-width.text-double-height {
transform: scale(2, 2);
- transform-origin: top left;
- display: inline-block;
padding-bottom: 1.4em;
margin-bottom: 0.5em;
}
/* Línea que excede el límite */
-.line-exceeds {
+.line-content.line-exceeds {
background: rgba(239, 68, 68, 0.15);
position: relative;
}
-.line-exceeds::after {
+.line-content.line-exceeds::after {
content: '⚠';
position: absolute;
right: -20px;