フォーム要素の縦書きモードがすべての主要ブラウザでサポートされます！ 見慣れないせいか違和感が
Post on:2024年4月10日
sponsors
先日リリースされたSafari 17.4をはじめ、まもなくリリースされるChrome 124でフォームコントロールの縦書きモードが正式にサポートされます。これで、すべての主要モダンブラウザでサポートされることになります。
縦書きモードの対象として日本語ユーザーも含まれているのだと思いますが、見慣れぬせいか違和感が、、、縦書きのコンテンツだったらいいのかな。
フォームを縦書きにするには、writing-mode: vertical-rl;を設定します。サポートブラウザは、Safari 17.4+, Firefox 120+をはじめ、Chrome, Edgeも119からサポートされており、間もなくリリース予定のChrome 124で正式にサポートされる予定です。
writing-mode: Vertically-oriented form controlsのサポートブラウザ
詳しくは、下記をご覧ください。
- Implementing Vertical Form Controls -Safari
- CSS vertical writing mode for form control elements -Chrome
フォームコントロールで縦書きモードを使用するのは、簡単です。各要素にwriting-mode: vertical-rl;を設定するだけです。フロー方向を左から右にするにはvertical-lrを使用します。
|
1 2 3 |
button, textarea, progress, meter, input, select { writing-mode: vertical-rl; } |
実際の動作は、デモページでご覧ください。
フォームを配置するのが、横書きよりはるかに難しそうです。
See the Pen
Vertical Form Controls by coliss (@coliss)
on CodePen.
sponsors
