A atualização do Chrome 119 para o 123 é um novo recurso internacional do CSS dos modos de escrita do CSS nível 4. O modo de escrita vertical para elementos de controle de formulário significa que esses elementos podem ser exibidos em modos de escrita vertical. 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ários baseados em texto
Depois que esse recurso for totalmente ativado, será possível usar modos de gravação
verticais para elementos de controle de formulário, como botões, listas de seleção e elementos
de progresso. Para usá-lo, defina a propriedade CSS writing-mode como vertical-lr
para
direção de fluxo de bloco da esquerda para a direita e vertical-rl
para direção de fluxo de bloco
da direita para a esquerda.
Isso é útil para muitas línguas do leste da Ásia que tradicionalmente usam escrita vertical. Por exemplo, o japonês tradicional geralmente é escrito verticalmente da direita para a esquerda.
Confira alguns exemplos internacionalizados de controles de formulário vertical.
Botões
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select>
elementos
É possível 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>
A implementação atual ainda tem as opções da janela pop-up exibidas horizontalmente.
Entradas baseadas em texto
Para muitos controles de formulários com base em entrada de texto, agora é possível usar um 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 mostrar o valor de um elemento de formulário visualmente. É o que
controles deslizantes como <meter>
, <progress>
e <input type=range>
fazem.
Antes, apenas <range>
podia ser renderizado verticalmente usando o valor de aparência
CSS não padrão slider-vertical
. Agora, todos os três podem ser mostrados verticalmente
usando a propriedade writing-mode
do CSS.
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 para ser 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 do valor no Chrome 122. Entre em contato se tiver feedback.
Engajamento e compartilhamento de feedback
Para enviar feedback sobre esses recursos, registre um problema em crbug.com.