HTML5とCSS3で縦書きしてみる

日本人なら欲しい機能だが、中途半端なことになってる。

成果物

Html.vertical_rl.201802110900

開発環境

• Raspberry Pi 3 Model B
  • cat /etc/debian_version: 8.0
  • uname -a: Linux raspberrypi 4.4.26-v7+ #915 SMP Thu Oct 20 17:08:44 BST 2016 armv7l GNU/Linux
• ブラウザ
  • Chromium
    • 51.0.2704.91 Built on Ubuntu 14.04, running on Raspbian 8.0

問題

気づいた点だけでも多数ある。縦書きの実用はかなり厳しい。

• 横になる（縦にならない）
  • 長音ー,〜
  • 数字0123456789
  • 英字a-zA-Z
• 位置がずれる
  • 句読点 、。
  • 囲み文字 「」（）等
• 表記ゆれ（縦書きと横書きで使う文字が変わる）
  • 単位
    • km, ㎞, ㌖
    • km/h, 時速
• 縦書きにするには個別マークアップが必要
  • 数字0123456789
  • 英字a-zA-Z
• マウスで横スクロールバーを動かしにくい
  • マウスホイールのチルトが欲しい
    • 標準装備ではない
    • ページ単位での遷移はできない

ほかにも縦書き固有の問題がある。

縦書きと横書きは別物

単純に、横書きのテキストをそのまま使えばいいと思っていた。ブラウザがフォントを回転してくれればいいだけじゃね？　と。

しかし、縦書き固有の表現方法があるため、そもそもテキスト自体が別の文字を使ったものになる。表記ゆれともいう。同じ意味でも異なる文字を使う。

たとえば数字。横文字なら算用数字だが、縦書きなら漢数字にする。ほかにも山ほどある。これらのテキストを自動置換しないと最適な表示にはならない。

所感

縦書きをなめていた。

横書きと縦書きをシームレスに変えて閲覧できるようにしてみたかったのだが難しそう。