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

Di Zhang
Di Zhang

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

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

この機能が完全に有効になると、ボタン、選択リスト、進行状況要素などのフォーム コントロール要素に縦書きモードを使用できるようになります。使用するには、CSS プロパティの writing-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>

垂直テキストを含む 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 で問題を報告してください。