El lanzamiento de la versión 119 a la 123 de Chrome es una nueva función internacional de CSS de CSS Modos de escritura nivel 4 Verticales de escritura para los elementos de control de formularios significa que estos elementos se pueden se muestra en modos de escritura vertical. Para Chrome 123, la función se habilitará para todos los usuarios, esta publicación 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 la escritura vertical.
modos para elementos de control de formularios, como botones, listas de selección y progreso
o de terceros. Para usarlo, establece el modo de escritura de la propiedad de CSS en vertical-lr
dirección del flujo del bloque de izquierda a derecha y vertical-rl para el bloque de derecha a izquierda
en la dirección del flujo de trabajo.
Esto es útil para muchos idiomas de Asia Oriental que tradicionalmente usaron secuencias de comandos verticales para escribir. Por ejemplo, el japonés tradicional se suele escribir verticalmente de derecha a izquierda.
Estos son algunos ejemplos internacionalizados de controles de forma vertical.
Botones
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
Elementos <select>
Puedes especificar que un elemento <select> muestre todo el texto de forma vertical.
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 se muestra horizontalmente.
Entradas basadas en texto
Para muchos controles de formulario basados en entradas de texto, ahora es posible usar el modo de escritura 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
los controles deslizantes como <meter>, <progress> y <input type=range> hacen lo mismo.
Anteriormente, solo <range> se podía renderizar verticalmente con el CSS no estándar
valor de apariencia 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 serán
se renderizan de arriba abajo. Puedes especificar que la dirección del valor esté inferior
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 tus comentarios
Para compartir comentarios sobre estas funciones, informa un problema en crbug.com.