Texto vertical en CSS

Funciones

• `writing-mode` para el texto vertical, con las columnas de derecha a izquierda o de izquierda a derecha
• `text-orientation` decide si los dígitos y las letras latinas se tumban o se ponen rectos
• Tamaño de fuente, separación entre columnas y alto del contenedor ajustables, con la vista previa siguiéndolos
• La altura decide dónde se parten las columnas: el dato que más se olvida
• La separación entre columnas es una elección de seis proporciones fijas, para no dudar entre 1,8 y 2
• El resultado es una sola regla CSS con el selector `.vertical-text`
• La vista previa se actualiza en vivo; copia cuando te convenza
• Todo se ejecuta en tu navegador y tu texto no se sube

Cómo se usa

1. Escribe unos caracteres en la casilla de arriba
2. Elige la dirección de las columnas y cómo se colocan los dígitos
3. Ajusta el tamaño de fuente y la altura para ver dónde se parten las columnas y cuántas caben
4. Copia el CSS cuando te guste el resultado

Preguntas frecuentes

¿Por qué mi texto baja y nunca se parte en columnas?

Porque no le has dado altura. En el texto vertical la columna se corta cuando se agota la altura del contenedor; con `height: auto`, o con un padre que no tiene altura propia, la columna nunca se agota y el texto crece hacia abajo sin fin. El control de alto del contenedor existe justo para esto, y al fijarlo el texto se pliega en varias columnas. En un proyecto real pasa lo mismo: un contenedor vertical necesita una altura definida, o la regla que pegues seguirá produciendo una línea interminable.

Mis dígitos salen tumbados. ¿Pueden ponerse rectos?

Sí: cambia «Dígitos y letras latinas» a rectos (`text-orientation: upright`). Cada forma tiene su sitio: tumbados (`mixed`) se lee con más fluidez, porque los dígitos y las palabras inglesas se componen en horizontal de por sí y `2026-09-27` se reconoce al instante de lado; rectos queda más ordenado, cada carácter encajado en su casilla, lo que va bien para numeraciones y rótulos al estilo de una placa. En el chino vertical lo habitual es tumbados.

¿Por qué el resultado es CSS y no HTML?

Porque la escritura vertical es un problema de estilo, no de estructura. Se puede simular partiendo cada carácter con un `<br>`, pero eso destroza el texto: al copiarlo sale un carácter por línea, y la búsqueda y los lectores de pantalla se rompen con él. `writing-mode` deja que el navegador gestione la dirección al dibujar, así que el texto se mantiene entero: copiable, buscable y legible por la tecnología de asistencia.