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

Di Zhang
Di Zhang

O lançamento do Chrome 119 ao 123 é um novo recurso internacional do CSS Modos de escrita nível 4. Setor modo de escrita para elementos de controle de formulário significa que esses elementos podem ser exibidas nos modos de escrita vertical. Até o Chrome 123, o recurso será ativado para todos os usuários, essa postagem explica o recurso.

Modo de escrita vertical para elementos de controle de formulário baseados em texto

Quando esse recurso estiver totalmente ativado, será possível usar a escrita vertical modos para elementos de controle de formulários, como botões, listas de seleção e progresso os elementos. Para usá-lo, defina o modo de gravação da propriedade CSS como vertical-lr para direção do fluxo do bloco da esquerda para a direita e vertical-rl para o bloco da direita para a esquerda direção do fluxo.

Isso é útil para muitos idiomas do leste asiático que tradicionalmente usavam scripts verticais para gravação. Por exemplo, o japonês tradicional costuma ser escrito verticalmente da direita para a esquerda.

Exemplo de modos de escrita vertical

Confira alguns exemplos internacionalizados de controles de formulários verticais.

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> mostre todo o 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>

Uma lista de seleção 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ário com base em entrada de texto, agora é possível usar um o modo de escrita ao inserir texto.

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}

<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

Uma área de texto com texto vertical.

Controles deslizantes

Também pode ser valioso mostrar visualmente o valor de um elemento do formulário. É isso controles deslizantes como <meter>, <progress> e <input type=range>.

Vários controles deslizantes.

Antes, apenas <range> podia ser renderizado verticalmente usando o CSS não padrão. o valor de aparência slider-vertical. Agora, os três podem ser exibidos verticalmente usando a propriedade CSS writing-mode.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

Os controles deslizantes exibidos verticalmente.

Por padrão, a direção do CSS é definida como ltr. Isso significa que os valores serão renderizado de cima para baixo. É possível especificar a direção do valor para ser inferior para cima definindo a direção como rtl.

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

Os controles do slide exibidos verticalmente de baixo para cima.

Há um experimento para mudar a direção do valor no Chrome 122. Entre em contato se quiser enviar feedback.

Interaja e compartilhe feedback

Para compartilhar feedback sobre esses recursos, informe um problema em crbug.com.