Desde la versión 119 a la 123 de Chrome, se lanza una nueva función internacional de CSS del modos de escritura de CSS nivel 4. El modo de escritura vertical para los elementos de control de formularios significa que estos elementos se pueden mostrar en modos de escritura verticales. En Chrome 123, la función estará habilitada para todos los usuarios, según se explica en esta publicación.
Modo de escritura vertical para elementos de control de formulario basados en texto
Una vez que esta función esté completamente habilitada, se podrán usar modos de escritura verticales para los elementos de control de formularios, como botones, listas de selección y elementos de progreso. Para usarla, establece el modo de escritura de la propiedad CSS en vertical-lr para la dirección del flujo de bloque de izquierda a derecha y en vertical-rl para la dirección de flujo de bloque de derecha a izquierda.
Esto es útil para muchos idiomas del este asiático que tradicionalmente solían utilizar alfabetos verticales para escribir. Por ejemplo, el japonés tradicional suele escribirse verticalmente de derecha a izquierda.
Estos son algunos ejemplos internacionalizados de controles de formularios verticales.
Botones
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
Elementos <select>
Puedes especificar que un elemento <select> muestre todo el texto verticalmente.
select {
writing-mode: vertical-lr;
}
<select multiple>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
<select>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
Ten en cuenta que, con la implementación actual, las opciones de la ventana emergente se muestran horizontalmente.
Entradas basadas en texto
Para muchos controles de formulario basados en entradas de texto, ahora es posible usar un modo de escritura vertical cuando se ingresa texto.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Controles deslizantes
También puede ser valioso mostrar visualmente el valor de un elemento de formulario. Eso es lo que hacen los controles deslizantes como <meter>, <progress> y <input type=range>.
Anteriormente, solo <range> se podía renderizar verticalmente con el valor de apariencia de CSS no estándar slider-vertical. Ahora, los tres se pueden mostrar verticalmente con la propiedad writing-mode de CSS.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
De forma predeterminada, la dirección de CSS se establece en ltr. Esto significa que los valores se renderizarán de arriba abajo. Puedes especificar que la dirección del valor debe ser de abajo hacia arriba estableciendo la dirección como rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Hay un experimento para cambiar la dirección del valor en Chrome 122. Comunícate con nosotros si tienes comentarios.
Interactúa y comparte comentarios
Para compartir comentarios sobre estas funciones, informa un problema en crbug.com.