Una letra por línea sin marcado extra y menú horizontal con sus ítems verticales con writing-mode 29.9.15
Complementando el post de una palabra por línea puro Css llega éste: cómo colocar una letra en cada línea y en base a ello realizar un menú horizontal en que sus ítems son verticales: una letra debajo de otra.
Una letra por línea sin marcado extra y menú horizontal con sus ítems verticales con writing-mode
En una de tantas demos del blog, Juegos tipográficos: Una palabra por línea en puro Css, compartía como forzar el dibujado
de una palabra por línea sin necesidad de marcado Html extra. O lo que es lo mismo, que las palabras se comportasen como elementos flotados con clear: both incluído.
Todo se reduce a declarar un valor lo suficientemente alto a la propiedad word-spacing.
Sin embargo esta técnica aplicada a la separación entre letras, letter-spacing, no surte el mismo efecto. Todo lo contrario, a partir de cierto valor surgen comportamientos desastrosos.
Hasta ahora había formas de colocar cada letra en una línea con puro Css sin llenar todo de span. Pero era necesario afinar todos y cada uno de los valores para cada situación: tamaño de letra, anchura de la caja, alineación, altura de líneas... yo lo llamo el "método de la vieja escuela" o recurrir a transformaciones (giros) y contragiros si no quieres que los caracteres aparezcan "acostados".
Hace escasas fechas actualizaba el artículo dedicado al documento del W3c Modos de escritura Css y textos en vertical con writing-mode con motivo de su amplio soporte (aunque aún sean necesarios prefijos privativos o que los IE utilicen valores obsoletos en las propiedades que desarrolla).
Y fue al volver a leer este último artículo de los modos de escritura Css que caí en lo sencillo que hace el poder colocar una letra en cada línea sin necesidad de recurrir a números mágicos.
Título RWD en vertical
El primer ejemplo es un título (h1) escrito en vertical pero las letras sin girar 90º.
Si además de writing-mode: vertical-rl; y text-orientation: upright; usamos una pizca de valores relativos al viewport
nos aseguramos ocupar todo el alto de la ventana y distribuir las letras uniformemente en la vertical.
See the Pen YyNzpG by Kseso (@Kseso) on CodePen.
Menú horizontal con sus ítems en verticales
Otro caso de uso típico y en el que los modos de escritura Css vienen en auxilio para hacer todo mucho más sencillo es el típico menú en horizontal con demasiadas opciones o ítems que por su número fuerzan una segunda línea de ellas.
En este caso no te lo cuento, dejo que veas y juegues con la demo y las consultas o sugerencias en los comentarios ;-)
See the Pen epgmwR by Kseso (@Kseso) on CodePen.
Artículos relacionados
- Modos de escritura Css y textos en vertical con writing-mode
- Juegos tipográficos: Una palabra por línea en puro Css
- Javascript con Furoya: agregar etiquetas a cada letra de un texto para aplicarles estilos CSS
- De menús, su realización y demos
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2015/09/una-letra-por-linea-puro-css.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSOwtVW7_YMhey8Cfm-JJN-hVwstA4f2oVfEqsA6ZBCoN8da2s5MEF4ADZpyknkatXUy7MnLZIE9Q_8Z_JKvLQ6Zl2fiZVirnw8MlVkkA6ZNxihVMShaWnmRDqt9bHzIUwo73RoAuyvo/s500/writing-mode.jpg&description=Complementando el post de <a href="https://ksesocss.blogspot.com/2014/11/palabra-por-linea-puro-css.html">una palabra por línea puro Css</a> llega éste: cómo colocar una letra en cada línea y en base a ello realizar un menú horizontal en que sus ítems son verticales: una letra debajo de otra.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso