writing-modeについて調べる

ひとりCSS Advent Calendar 2022 20日目です。

writing-mode プロパティについて調べます。

writing-modeプロパティについて

縦書きか横書きか設定できる。
また、言語の書字方向にも左右される。

書字方向について

日本語や英語なら左書き ltr
アラビア語やヘブライ語なら右書き rtl

とりうる値

• horizontal-tb - 横書き
  • ltr なら左から右
  • rtl なら右から左
• vertical-rl - 縦書き
  • ltr なら2行目が左側に来る
  • rtl なら2行名が右側に来る
• vertical-lr - 縦書き
  • ltr なら2行目が左側に来る
  • rtl なら2行名が右側に来る
• sideways-rl - 縦書き
  • ltr なら下から上に流れる
  • rtl なら右に倒す
• sideways-lr - 縦書き
  • ltr なら上から下に流れる
  • rtl なら左に倒す

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
  • に掲載されたサンプルが普通にわかりやすかったのでサンプル作るのやめます。。
  • （rtl の文章むずかしいわ）
  • 多言語対応ほんと難しいけど必要ならちゃんと時間をかけてやるべきだなと思いました（感想）