Modos de escritura Css y textos en vertical con writing-mode

Uso y ejemplos de la propiedad writing-mode para obtener textos en vertical. Sus particularidades, soporte y propiedades y valores asociados.

Modos de escritura Css y textos en vertical con writing-mode

Por Kseso ✎ 2

Una pequeña introducción al documento "CSS Writing Modes" (status Candidate Recommendation) sobre la orientación de los textos en aquellos aspectos aplicables a nuestra forma de escribir. Dde izquierda a derecha y de arriba a abajo es lo habitual en nuestro modo latino. Pero ahí fuera existen otros.

Modos de escritura Css y textos en vertical con writing-mode

El modo o forma de la escritura en Css se controla con tres propiedades que actúan sobre los flujos (orientación) o forma de componerse del texto:

  1. Inline base direction el flujo en las líneas de texto. Dos direcciones posibles: horizontal y vertical. Y en cada una de ellas dos sentidos: de izquierda a derecha o viceversa y de de arriba a abajo o contrario. Es controlado por la propiedad direction con la ayuda de unicode-bidi.
  2. Block flow direction o cómo crece el bloque de textos. Esto es, cómo se organizan las líneas sucesivas respecto a las anteriores. La propiedad Css encargada es writing-mode
  3. Line orientation controlado por la propiedad text-orientation. Controla la orientación de cada carácter o glifo del texto en su línea.

Si te fijas en la imagen siguiente las orientaciones o flujo en las líneas del texto y las del bloque son perpendiculares entre sí.

modos de escritura o writting mode
Modos de escritura o writting mode. Origen: W3c

Menú horizontal con sus ítems verticales

La propiedad direction

La propiedad direction no ha sufrido prácticamente modificaciones respecto a la especificación 2.1. Aquí la tienes en español para una mejor comprensión.
Además de "inherit" admite los valores:

  • ltr (Left to Right) de izquierda a derecha.
  • rtl (Right to Left) de derecha a izquierda.

Este texto tiene declarado "direction: rtl".
Por lo tanto, lo que tenía que estar a la izquierda (la alineación del texto) se hace a la derecha.
Y lo que te esperarías a la derecha (el scroll) aparece a la izquierda.
Presta especial atención a dónde aparecen los signos de puntuación: en especial el punto y aparte del final de línea.

La propiedad direction, cuando se especifica para las columnas de una tabla, no es heredado por las celdas de la columna ya que las columnas no existen en la estructura del documento.

unicode-bidi

Esta propiedad complementa a direction y para que tenga algún efecto en los elementos a nivel de línea unicode-bidi debe tener el valor de override o embed.

Escritura vertical: la propiedad writing-mode

Si quieres tener texto en vertical la propiedad que estás necesitando es writing-mode. Es la que controla el "Block flow direction".
Se aplica a todos los elementos, excepto los grupos de "table-row", grupos de "table-column", table rows, and table columns.
Las propiedades actuales que admite son:

  • horizontal-tb: Significa horizontal de arriba a abajo. Top-to-bottom. El valor por defecto y normal en nuestra forma de escribir (latina).
  • vertical-rl: Vertical de derecha a izquierda (Right-to-left)
  • vertical-rl: Vertical de izquierda a derecha (Right-to-left)

Estos son los valores actuales recogidos en el documento del W3c. De momento sólo soportado por Webkit (Chrome) con su prefijo privativo. En la actualidad (09/2015) ampliamente soportado. IE8 y mayores dan soporte pero con la nomenclatura obsoleta (incluido el Edge)

writing-mode
Soporte writing-mode según caniuse

Y gráficamente los resultados de aplicar uno u otro valor de los tres que admite la propiedad writing-mode es el que ves en la imagen de abajo:

Resultado de los valores de la propiedad Css writing-mode

text-orientation: Control de la orientación de los carácteres

writing-mode + text-orientation: upright
writing-mode + text-orientation: upright

Si te fijas en la imagen de arriba, la escritura vertical (writing-mode) realiza un giro de los carácteres o glifos de 90 grados. Similar a lo que ocurre con el transform: rotate(90deg);. Para lograr que las letras no se giren usa la declaración text-orientation: upright. El resultado de combinar writing-mode y ésta última es el que ves en la imagen de la derecha.

Los valores posibles para text-orientation son:
mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation.

Estos valores aplican en función de la orientación declarada y de la nativa a cada escritura. En Chrome y latino sólo he podido ver resultado con el valor upright como en la captura de la derecha.

Para ampliar conocimientos sobre los valores de text-orientation aquí.

Como curiosidad y resultado lógico, la propiedad line-height lo que hace es separar más o menos el texto de cada columna. En el ejemplo de la derecha la separación entre "Soy Íñigo" y "Montoya" está controlado con el valor de line-height.

See the Pen writing-mode by Kseso (@Kseso) on CodePen.

Alineaciones y flotados en el writing-mode

Si trabajas con la escritura en vertical has de tener presente que los flotados y la alineación de los textos tienen su comportamiento particular dentro de las cajas con writing-mode en vertical.

Float: left y text-align: left se traduce en que son colocados tan pegados al borde superior (top) como sea posible.

Float: right y text-align: right lo harán junto al borde inferior (bottom).

writing-mode y rotate: diferencias

posíblemente a estas alturas del artículo y visto las particularidades de la escritura en vertical y su escaso soporte por los navegadores lo hayas comparado mentalmente con la rotación 2D. Dado su mayor soporte y una sabia combinación de giro y contragiro sea más sencillo utilizar transform.

Posíblemente el resultado visual sea el mismo. Pero has de tener en cuenta una diferencia importante:
El uso de "rotate(90deg)" implica que se gira la caja o elemento. Esto es, el modelo de caja (box-model) gira los 90 grados, así que el margen - borde - padding superior pasan a ser lo que vemos a la derecha (right), el derecho el inferior (bottom), el inferior es el izquierdo (left) y el izquierdo pasa a estar arriba (top). Y la anchura de la caja es la vertical y la altura la horizontal.

Sin embargo el la escritura vertical (writing-mode) no hay alteración en el modelo de caja. Top sigue estando arriba, y la anchura sigue siendo la horizontal. Y el resto de propiedades igual.

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: 2

  1. Buena info, ahora el problema es encontrar donde puede ser bueno implementarlo :P.

    Cambiando de tema: recien me doy cuenta que se puede cambiar el tamaño de la font del blog en la esquina superior de la página ¬¬

    ResponderEliminar
  2. Muy bueno eh me ha venido de mil. Solo que en mozilla no me funciona. Alguna sugerencia??

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap