フォーム コントロール要素の CSS 縦書きモード

Di Zhang
Di Zhang

Chrome 119 から 123 へのロールアウトは、CSS の記述モード レベル 4 で導入された新しい国際的な CSS 機能です。フォーム コントロール要素の垂直書き込みモードは、これらの要素を垂直書き込みモードで表示できることを意味します。この機能は Chrome 123 までにすべてのユーザーに対して 有効になります この投稿ではこの機能について説明しています

テキストベースのフォーム コントロール要素の縦書きモード

この機能が完全に有効になると、ボタン、選択リスト、進行状況要素などのフォーム コントロール要素で、垂直書き込みモードを使用できるようになります。これを使用するには、CSS プロパティの write-mode を、左から右のブロックの流れ方向の場合は vertical-lr に、右から左へのブロックの流れ方向の場合は vertical-rl に設定します。

これは、これまで縦書きの表記法が使われてきた東アジアの多くの言語で役立ちます。たとえば従来の日本語は 右から左に縦に書くことが多くあります

縦書きモードの例

以下に、多言語化された縦向きのフォーム コントロールの例を示します。

ボタン

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

縦長のテキストのボタン。

<select>要素

<select> 要素ですべてのテキストを縦方向に表示するように指定できます。

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>

縦長テキストを含む選択リスト。

現在の実装では、ポップアップ ウィンドウのオプションは横方向に表示されます。

テキストベースの入力

テキスト入力ベースのフォーム コントロールの多くで、テキストの入力時に縦書きモードを使用できるようになりました。

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

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

縦長のテキストを表示するテキスト領域。

スライダー

また、フォーム要素の値を視覚的に表示することも効果的です。これが、<meter>、<progress>、<input type=range> などのスライダーの役割です。

さまざまなスライダー コントロール。

これまでは、非標準の CSS デザイン値 slider-vertical を使用して縦向きにレンダリングできるのは <range> のみでした。これで、CSS の writing-mode プロパティを使用して、3 つすべてを縦方向に表示できます。

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

縦長に表示されたスライダー コントロール。

デフォルトでは、CSS の方向は ltr に設定されています。つまり、値は上から下にレンダリングされます。方向を rtl に設定すると、値の方向が下から上になるように指定できます。

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

下から上へ縦方向に表示されているスライド コントロール。

Chrome 122 では、値の方向を変更するためのテストが実施されます。フィードバックがございましたら、お知らせください。

交流とフィードバックの共有

これらの機能に関するフィードバックを共有するには、crbug.com で問題を報告してください。