Se lanzará una nueva función internacional de CSS de nivel 4 de los modos de escritura de CSS desde Chrome 119 a 123. El modo de escritura vertical para los elementos de control de formulario significa que estos elementos se pueden mostrar en modos de escritura vertical. En Chrome 123, la función se habilitará para todos los usuarios. En esta publicación, se explica la función.
Modo de escritura vertical para elementos de control de formulario basados en texto
Una vez que esta función esté completamente habilitada, será posible usar modos de escritura vertical para elementos de control de formularios, como botones, listas de selección y elementos de progreso. Para usarlo, establece el modo de escritura de la propiedad CSS en vertical-lr para la dirección de flujo de bloques de izquierda a derecha y vertical-rl para la dirección de flujo de bloques de derecha a izquierda.
Esto es útil para muchos idiomas del este de Asia que tradicionalmente usan alfabetos verticales para escribir. Por ejemplo, el japonés tradicional a menudo se escribe verticalmente de derecha a izquierda.
Estos son algunos ejemplos internacionalizados de controles de formulario 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 la implementación actual aún tiene las opciones de la ventana emergente que se muestran horizontalmente.
Entradas basadas en texto
En el caso de 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 útil 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 se podía renderizar <range> verticalmente con el valor de apariencia CSS no estándar slider-vertical. Ahora, los tres se pueden mostrar verticalmente con la propiedad writing-mode del 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 la dirección del valor para que sea de abajo hacia arriba configurando 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.