やじうまの杜

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

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

2024年1月18日 12:45

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

フォーム要素の縦書きが「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;」を指定しましょう。