メモ：縦書き css3 writing-mode

2012/6/3 [18:03:09] (日)

創作文芸見本誌会場HappyReadingをはじめとして、わたしの作って公開しているサイトのあちこちに、文章を縦書き表示するページがある。いや、やっぱり小説は縦書きじゃなきゃ困る、昭和なもんで。
ブラウザでいえば、IEが以前から独自拡張で縦書き表示ができていた。
2010年ぐらいから、amazon の kindleがくる、すわ黒船来襲か！？というの踊らされ、あちこち見て回ってると、今なお、epub 、電子書籍のための規格決めで紆余曲折中らしい。少子高齢化じゃないけど、「日本語圏」って、世界的にはマイノリティになるんだろうな。

てのはともかく。
今日時点、ざっと検索したところ、webkit系のブラウザは writing-mode を実装していて、日本語の右から左へ流れる縦書きとか、アラブの右から左に流れる横書きなどに対応している（safariとかchromeですね）
わたしのサイトの縦書きは無理やり。幅1emのブロック要素にテキストを流しこんで、それをfloatで右から並べてる。ハイフンやかぎかっこなどは回転させて、句読点は位置を調整している、んだけど、しょせん横書きのフォントを縦に並べてるだけなので、フォントの環境によっては（プロポーショナルフォントなどで表示されてしまうと）全体がふにゃふにゃ波打つし、調整しきれない句読点なんかがハミ出していて、よろしくない。
で、safariで以下のスタイルシートを試したところ
font-family:"HiraMinProN-W3", "@ＭＳ 明朝", serif, sans-serif; direction:ltr; unicode-bidi:bidi-override; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl;
きれいな縦書き表示。縦書きフォントを使ってるので、妙な歪みもないし、iphoneで見ると、ヒラギノ明朝はきれいだし。

ブラウザの対応状況が微妙なので、PC版のサイトでこの表示は難しいけど、スマホ版なら問題なさそう。こっそりスマホ版で試してみる、かな。
 
右側が今やってる無理やり縦書き、左側がsafariによる縦書き。ガタつきなど、その差は見てわかると思う。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら