A implementação do Chrome 119 ao 123 é um novo recurso CSS internacional dos Modos de escrita CSS Nível 4. O modo de escrita vertical para elementos de controle de formulário significa que esses elementos podem ser mostrados nesses modos. No Chrome 123, o recurso será ativado para todos os usuários. Esta postagem explica o recurso.
Modo de escrita vertical para elementos de controle de formulário baseados em texto
Depois que esse recurso for totalmente ativado, será possível usar modos de escrita verticais
para elementos de controle de formulários, como botões, listas de seleção e elementos
de progresso. Para usá-lo, defina o modo de escrita da propriedade CSS como vertical-lr para a direção do fluxo do bloco da esquerda para a direita e vertical-rl para a direção do fluxo do bloco da direita para a esquerda.
Isso é útil para muitos idiomas asiáticos que tradicionalmente usavam scripts verticais para escrita. Por exemplo, o japonês tradicional é frequentemente escrito na vertical, da direita para a esquerda.
Confira alguns exemplos internacionalizados de controles de formulários verticais.
Botões
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
Elementos <select>
Você pode especificar que um elemento <select> vai mostrar todo o texto na 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>
Observe que a implementação atual ainda tem as opções da janela pop-up mostradas horizontalmente.
Entradas baseadas em texto
Para muitos controles de formulário baseados em entrada de texto, agora é possível usar o modo de escrita vertical ao inserir texto.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
Controles deslizantes
Também pode ser útil exibir visualmente o valor de um elemento de formulário. É isso que
controles deslizantes como <meter>, <progress> e <input type=range> fazem.
Antes, apenas <range> podia ser renderizada verticalmente usando o valor de aparência CSS não padrão slider-vertical. Agora, os três podem ser mostrados verticalmente
usando a propriedade CSS writing-mode.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
Por padrão, a direção do CSS é definida como ltr. Isso significa que os valores serão
renderizados de cima para baixo. É possível especificar a direção do valor de baixo
para cima definindo a direção como rtl.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Há um experimento para mudar a direção dos valores no Chrome 122. Envie seu feedback.
Interaja e compartilhe feedback
Para compartilhar feedback sobre esses recursos, registre um problema em crbug.com.