este writing-mode Las propiedades CSS establecen si las líneas de texto se disponen horizontal o verticalmente y la dirección en la que avanzan los bloques y las líneas.
.element {
writing-mode: vertical-rl;
}Esto es más útil en idiomas como el chino, el japonés o el coreano, donde el texto suele estar colocado verticalmente. En inglés, es más probable que quieras utilizar esta propiedad por motivos estéticos, como alinear un título dentro de un bloque de texto, como este:
sintaxis
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;- Original: Nivel de tuberculosis
- Se aplica a: Todos los elementos excepto el grupo de filas de la tabla, el grupo de columnas de la tabla, la fila de la tabla, la columna de la tabla, el contenedor base de Ruby y el contenedor de anotaciones de Ruby.
- Genética: Sí
- Valor calculado: Según regulaciones
- Tipo de animación: No animable
valores
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;Cada valor consta de dos partes. El primero describe si el texto está dispuesto en líneas horizontales o verticales, mientras que el segundo describe la dirección en la que progresan estas líneas y el contenido a nivel de bloque. tb Quiere decir de arriba a abajo, rl significa de derecha a izquierda, y lr Significado de izquierda a derecha.
horizontal-tb: Este es el valor predeterminado. El texto se presenta en líneas horizontales, con líneas y bloques dispuestos de arriba a abajo.vertical-rl: El texto se presenta en filas verticales, con filas y bloques dispuestos de derecha a izquierda. Cada nueva línea se coloca a la izquierda de la línea anterior.vertical-lr: El texto se presenta en filas verticales, con filas y bloques organizados de izquierda a derecha. Cada nueva línea se coloca a la derecha de la línea anterior.sideways-rl: El texto se presenta en líneas verticales de derecha a izquierda, pero utilizando la convención tipográfica de escribir horizontalmente. Como resultado, el glifo se gira hacia un lado, mirando hacia la derecha.sideways-lr: El texto se presenta en líneas verticales de izquierda a derecha, pero utilizando la convención tipográfica de escribir horizontalmente. Como resultado, el glifo se gira hacia un lado, mirando hacia la izquierda.
Modo de escritura y diseño CSS
este writing-mode Las propiedades no solo cambian la dirección del texto. Más fundamentalmente, establece el bloque y la dirección en línea que utiliza CSS para diseñar el contenido.
este Eje en línea sigue la dirección en la que fluye el contenido dentro de una fila, mientras que eje de bloque Siga la dirección de apilamiento de bloques y líneas. Estos ejes pueden ser horizontales o verticales, según el modo de escritura.
Por defecto horizontal-tb En el modo de escritura, el eje en línea corre horizontalmente y el eje del bloque corre verticalmente. En modo de escritura vertical, p. vertical-rlel eje en línea corre verticalmente y el eje del bloque corre horizontalmente.
Los diseños CSS modernos se basan en estos ejes lógicos. Caja flexible, redalineación y propiedades lógicas describen las relaciones de la siguiente manera block, inline, starty enden lugar de estar permanentemente atado a direcciones físicas como arriba, derecha, abajo e izquierda.
Es por eso que las propiedades lógicas como inline-size y block-size Muy útil. En lugar de referirse a dimensiones físicas fijas como esta width y heightdescriben el tamaño de un elemento a lo largo de su eje en línea o de bloque:
.element {
inline-size: 20rem;
block-size: 10rem;
}En modo de escritura horizontal, inline-size corresponde a las dimensiones horizontales y block-size a la dimensión vertical. En el modo de escritura vertical, estas relaciones se alternan.
El mismo principio se aplica a las propiedades relacionadas con el tráfico, p. margin-inline-start y padding-block-endque se refiere a una dirección lógica en lugar de un lado físico fijo de la pantalla, p. left y bottom.
En Flexbox, un contenedor flex-direction empezar a row Organice los elementos a lo largo del eje en línea, mientras column Colóquelos a lo largo del eje del bloque. Por tanto, las filas pueden ser horizontales o verticales, según el modo de escritura.
La cuadrícula también sigue el modo de escritura al colocar y cambiar el tamaño de elementos. Sus filas y columnas no dependen permanentemente de orientaciones físicas horizontales y verticales.
Propiedades de alineación, p. align-items y justify-items etc., todos siguen los mismos principios.
Incluso si nunca ha creado un diseño vertical, comprender este modelo será útil. Una vez que comienza a pensar en ejes en línea y en bloque, muchas características de diseño CSS modernas se vuelven más fáciles de entender y su diseño se vuelve menos dependiente de una dirección de escritura específica o de la orientación física de la pantalla.
demostración
Utilice el menú desplegable para probar diferentes idiomas, writing-mode valores, y direction. Observe cómo cambian los indicadores de texto, contenedor y eje en línea y de bloque.
El selector de idioma establece valores típicos para cada secuencia de comandos, pero puede anularlos para experimentar. tenga en cuenta writing-mode No es sólo la dirección del texto lo que cambia. También cambia la forma en que fluye todo el contenedor y su contenido.
Soporte del navegador
este writing-mode Las propiedades se definen en Modo de escritura CSS Nivel 4 Estandarizado y ampliamente utilizado en los navegadores modernos.
