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) {
- +
@@ -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;