Probador de Modos de Escritura
Prueba cómo se representa el texto con distintos modos de escritura, direcciones y orientaciones de texto de CSS. Elige entre horizontal-tb, vertical-rl y vertical-lr, alterna entre dirección LTR y RTL, y define la orientación del texto para diseños verticales. Introduce tu propio texto o usa una muestra, ajusta el tamaño de fuente y observa una previsualización en vivo con la salida CSS copiable. Totalmente privado, 100% gratis y sin registro.
Test how text renders in different CSS writing modes, directions, and text orientations. Preview horizontal, vertical-RTL, and vertical-LTR layouts with custom text and font sizes.
Preview
.writing-mode-demo {
writing-mode: horizontal-tb;
direction: ltr;
font-size: 18px;
}¿Por qué usar nuestro probador de modos de escritura?
- Prueba todos los modos de escritura uno al lado del otro: compara al instante los modos de escritura CSS horizontal-tb, vertical-rl y vertical-lr. La vista comparativa muestra los tres modos a la vez, para que veas exactamente cómo se representa tu texto en cada diseño sin tener que alternar entre ellos.
- Compatibilidad con dirección LTR y RTL: prueba texto tanto en dirección de izquierda a derecha (LTR) como de derecha a izquierda (RTL). Alterna entre direcciones con un solo clic para ver cómo fluye tu contenido para públicos de distintos idiomas, incluidos los alfabetos árabe, hebreo y persa.
- Procesamiento 100% privado en el navegador: todas las previsualizaciones de modos de escritura se representan por completo en tu navegador mediante CSS nativo. Tu texto nunca se envía a ningún servidor, nunca se almacena y nunca se transmite a ningún lugar. Tu contenido permanece completamente privado.
- Gratis para siempre, sin registro: prueba combinaciones ilimitadas de modos de escritura sin coste alguno. Sin niveles premium, sin límites de uso y sin cargos ocultos. Usa el probador de modos de escritura para proyectos personales o comerciales sin crear una cuenta.
Casos de uso comunes del probador de modos de escritura
- Diseño de sitios web multilingües: diseña maquetas que admitan sistemas de escritura tanto horizontal como vertical. Prueba cómo fluye tu contenido en japonés, chino o coreano en modo vertical-rl junto a tu contenido en inglés en modo horizontal-tb para lograr diseños web verdaderamente internacionales.
- Desarrollo de diseños RTL: desarrolla y prueba interfaces de derecha a izquierda (RTL) para sitios web en árabe y hebreo. Alterna rápidamente entre direcciones LTR y RTL para verificar que tu diseño refleje correctamente la navegación, la alineación del texto y el orden de lectura.
- Pruebas de componentes de interfaz para texto vertical: prueba cómo se ven componentes de interfaz como botones, etiquetas, menús de navegación y títulos de barras laterales cuando se representan con modos de escritura vertical. Asegura el espaciado, la alineación y la legibilidad adecuados antes de desplegar a producción.
- Publicación digital y libros electrónicos: previsualiza cómo se representan las publicaciones digitales y los libros electrónicos en modos de escritura vertical. Prueba contenido con varios alfabetos, con texto en japonés, chino e inglés, para asegurar una orientación del texto y un flujo de lectura correctos en los distintos diseños.
- Investigación y educación tipográfica: aprende y enseña las diferencias entre los modos de escritura, las orientaciones de texto y los valores de dirección de CSS. Observa ejemplos visuales en tiempo real de cómo cada propiedad cambia el diseño del texto, lo que lo hace ideal para la enseñanza del CSS y los talleres de tipografía.
- Generación de código CSS para producción: genera fragmentos CSS limpios y listos para producción para tus implementaciones de modos de escritura. Cuando encuentres la combinación perfecta, copia las propiedades CSS directamente en tus hojas de estilo con un solo clic.
¿Qué son los modos de escritura CSS?
Los modos de escritura CSS definen la dirección en la que fluye el texto en una página web. La propiedad CSS writing-mode controla si el texto se dispone horizontalmente (de izquierda a derecha) o verticalmente (de arriba abajo). Combinados con las propiedades direction y text-orientation, los modos de escritura permiten compatibilidad total con los diversos sistemas de escritura del mundo, desde el inglés y el árabe hasta el japonés y el mongol, todo dentro de un mismo diseño de página web.
Cómo funciona nuestro probador de modos de escritura
- Selecciona un modo de escritura: elige entre los tres valores CSS de writing-mode: horizontal-tb (diseño horizontal predeterminado), vertical-rl (vertical de derecha a izquierda, tradicional de Asia Oriental) o vertical-lr (vertical de izquierda a derecha, escritura moderna o mongola).
- Configura la dirección y la orientación: define la dirección del texto como LTR o RTL y, para los modos verticales, elige la orientación del texto: mixed (predeterminada), upright (todos los caracteres permanecen verticales) o sideways (todos los caracteres girados).
- Previsualiza y copia: introduce tu propio texto o usa una muestra, ajusta el tamaño de fuente y observa la previsualización en vivo. El bloque de salida CSS muestra el conjunto completo de propiedades listo para copiar en tus hojas de estilo.
Propiedades CSS clave explicadas
- writing-mode: la propiedad principal que define la dirección del flujo de bloques. horizontal-tb es la predeterminada para la mayoría de los idiomas. vertical-rl dispone el texto de arriba abajo con líneas de derecha a izquierda. vertical-lr lo dispone de arriba abajo con líneas de izquierda a derecha.
- direction: controla la dirección base en línea (ltr o rtl). En los modos verticales, direction afecta al orden de las líneas en lugar de al de los caracteres. Esencial para la compatibilidad con árabe y hebreo.
- text-orientation: solo se aplica en modos de escritura vertical. mixed (predeterminada) gira los caracteres latinos y cirílicos 90° mientras mantiene los caracteres CJK en vertical. upright mantiene todos los caracteres en su orientación normal. sideways gira todos los caracteres 90°.
Privacidad, seguridad y disponibilidad
Todas las previsualizaciones de modos de escritura se representan por completo en tu navegador mediante CSS nativo. Tu texto nunca sale de tu dispositivo: no se envía a ningún servidor, no se almacena ni se transmite. El probador de modos de escritura es totalmente gratuito, sin registro, sin límites de uso y sin funciones premium. Prueba combinaciones ilimitadas de modos de escritura para proyectos personales o comerciales.
Preguntas frecuentes
Un probador de modos de escritura CSS es una herramienta basada en el navegador que te permite previsualizar cómo se representa el texto con distintos modos de escritura, direcciones y orientaciones de texto de CSS. Nuestro probador de modos de escritura admite los tres valores de writing-mode (horizontal-tb, vertical-rl, vertical-lr), la dirección LTR y RTL, y los valores de text-orientation (mixed, upright, sideways) con previsualización en vivo y salida CSS copiable.
Selecciona un modo de escritura entre las tres opciones (horizontal-tb, vertical-rl, vertical-lr), elige una dirección (LTR o RTL) y, para los modos verticales, selecciona una orientación de texto (mixed, upright, sideways). Introduce tu propio texto o haz clic en un botón de texto de ejemplo, ajusta el tamaño de fuente y verás la previsualización en vivo actualizarse al instante. Activa la Vista comparativa para ver los tres modos uno al lado del otro.
El japonés tradicional, el chino (tradicional) y el coreano son los principales idiomas que usan modos de escritura vertical (vertical-rl). En un diseño vertical, el texto fluye de arriba abajo y las líneas avanzan de derecha a izquierda. La tipografía moderna de Asia Oriental a menudo combina escritura horizontal y vertical, y los modos de escritura CSS gestionan ambas sin problemas con un solo cambio de propiedad.
Sí. Todas las previsualizaciones de modos de escritura se representan por completo en tu navegador mediante CSS nativo. Tu texto nunca se sube a ningún servidor, nunca se almacena y nunca se transmite. El probador de modos de escritura procesa todo localmente en tu dispositivo para una privacidad y seguridad de datos completas.
text-orientation: mixed (el valor predeterminado) gira los caracteres latinos y cirílicos 90° en sentido horario mientras mantiene los caracteres CJK en vertical en su orientación de lectura normal. text-orientation: upright obliga a todos los caracteres a mostrarse en su orientación vertical normal sin rotación, lo que puede dificultar la lectura del texto latino pero conserva el aspecto natural de los caracteres CJK.
Sí. La salida CSS usa propiedades estándar y bien compatibles: writing-mode, direction y text-orientation. Todos los navegadores modernos admiten estas propiedades. Solo tienes que copiar el fragmento CSS o el estilo en línea y pegarlo directamente en tus hojas de estilo para usarlo de inmediato en proyectos web de producción.
Sí. El Probador de Modos de Escritura es 100% gratis, sin registro, sin funciones premium y sin límites de uso. Prueba combinaciones ilimitadas de modos de escritura sin restricciones ni costes ocultos. No hay anuncios que bloqueen la interfaz.
La Vista comparativa muestra los tres modos de escritura (horizontal-tb, vertical-rl y vertical-lr) en un diseño de tres columnas. Cada columna muestra la etiqueta de la propiedad CSS y una descripción del modo. Así es fácil comparar cómo se representa el mismo texto en cada diseño, lo que te ayuda a elegir el mejor modo de escritura para tu contenido.