Una letra por línea sin marcado extra y menú horizontal con sus ítems verticales con writing-mode

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

Por Kseso ✎ 0
writing-mode: una letra por línea sin marcado extra y opciones de menú verticales

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.

Ver demo a full

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.

Ver demo a full

Artículos relacionados

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap