やじうまの杜

フォーム要素も縦書きに!「Google Chrome 119」より順次導入中

「Chrome 123」までにはすべてのユーザーで有効に

 「やじうまの杜」では、ニュース・レビューにこだわらない幅広い話題をお伝えします。

フォーム要素の縦書きが「Chrome 119」より順次導入

 開発者向けの「Google Chrome」公式ブログ「Chrome for Developers」によると、「CSS Writing Modes Level 4」の新しい国際化(Internationalization:I18N)機能が「Chrome 119」より順次導入されているとのこと。ボタンやテキストエリア、選択リスト、プログレスバーなどのフォームコントロール要素でも縦書きモードが利用できるようになります。

 この機能を利用するには、CSSプロパティの「writing-mode」を用います。ブロックフローを左から右にしたい場合は「vertical-lr」、右から左にしたい場合は「vertical-rl」に指定しましょう。たとえば、日本語を縦書きするテキストエリア(右から左に縦書き)を作りたい場合は、「textarea」要素のCSSを「writing-mode: vertical-rl;」と記述します。

CSSプロパティの「writing-mode」を指定

 この機能は「Chrome 123」までにはすべてのユーザーで有効になるとのこと。使いやすい縦書きのWebサイトが増えることに期待です!

 ちなみに、CSSの既定ではコントロールは上から下へ、左から右へと配置されます(ltr)が、日本語の縦書きテキストに合わせて右から配置したい場合は「direction: rtl;」を指定しましょう。