Modo de escrita vertical do CSS para elementos de controle de formulário

Di Zhang
Di Zhang

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.

Exemplo de modos de escrita vertical

Confira alguns exemplos internacionalizados de controles de formulário vertical.

Botões

<html lang="zh">

<button>请点击</button>
button {
  writing-mode: vertical-rl;
}

Um botão com texto vertical.

<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>

Uma lista de opções com texto vertical.

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>

Um campo de texto com texto vertical.

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.

Vários controles de controle deslizante.

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;
}

Os controles do controle deslizante exibidos verticalmente.

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;
}

Os controles de slides exibidos verticalmente de baixo para cima.

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.