Chrome 119 から 123 に展開するのは、CSS の新しい国際的な CSS 機能です。 ライティング モード レベル 4。垂直型 書き込みモードでは、フォーム コントロール要素の 縦書きモードで表示されますこの機能は 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>
スライダー
また、フォーム要素の値を視覚的に表示することも有効です。それが
<meter>、<progress>、<input type=range> などのスライダーは有効です。
以前は、標準以外の CSS を使用すると、<range> しか垂直方向にレンダリングできませんでした。
外観値 slider-vertical。これら 3 つの要素を縦に並べて表示し
CSS writing-mode プロパティを使って実装します。
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.