縦書きスタイルシートの横書きフォールバックは困難な気がしてきました

EPUBの縦書きの実装について、（一部で）盛り上がっています。

個人的には正直、縦書きをどうしても今すぐ使いたい、というのはないのですが（直近のターゲットはIT系技術書籍なので、むしろ縦書きで表示されると大変なことが起こる）、やはり気になるところですし、仕様策定については今必要じゃなくても将来に禍根を残したくないところではあります。そこでまずは自分でできることを試してみようかということで、竹取JSをいじってみました。

竹取JSは通常のブラウザでも縦書きができるようにするJavaScriptのライブラリで、ドキュメントを読んだところ、思ったよりも簡単に導入できるようでした。まずは「るびま」の記念すべき第１号の巻頭言を縦書きにしてみました。↓こんな感じになります。

なるほどねえ、といったところでしょうか。

で、これを見て思ったのですが。

縦書き向けスタイルシートについて、縦書きに対応していないブラウザで表示させた時には、横書きで表示されるようにフォールバックさせて、それなりに表示できるようにしたい、という要求仕様があります。まあそれはもっともな要求です。

とはいえ、実際にデザインを組む人にとっては、「それなりに表示できる」というレベルがかなり揺れるはずです。我慢すれば読めなくもない、というレベルでもいい場合もあれば、まあ読めればいいか、というレベルでも許容される場合もあれば、ぜんぜん遜色ないくらいにきれいに表示されないとNG、というレベルしか許されない場合もありそうです。そして、それぞれのレベルについて、どれくらいの難易度か、どれくらいのコストをかけられるのか、という話になります。

そして、１つのスタイルシートで、縦書きの表示と、横書きにフォールバックした時の表示、その両方を満たすのが困難な場合、縦書き用と横書き用の２つのスタイルシートを用意し、横書きにしか対応していないブラウザでは後者のスタイルシートを表示する、という戦略を考慮したくなってきます。むしろ、技術的には安全・安心なやり方とも言えなくはないでしょう。あとは、それを実装するコストと、2つに分けたことによるメリット・デメリットのバランスが問題になってきます。

そんなことを念頭においてこの表示を見ながら考えてみたのですが、やっぱりスタイルシートが１つだけだと苦しい場合は普通にあると思うのです。上の例の場合、トップのロゴの表示がずれていますが、こういうトップのロゴって縦横の大きさや、中の文字の位置とサイズも含めて、がっちり決めて作り込むことが多いと思います。その際、横書き用前提で作り込んだものを縦書きで表示させたらおかしくなるのと同様に、縦書き用で用意したのを横書きにしてもやっぱりおかしくなるでしょう。

もっと分かりやすい例は見出しの画像でしょう。h1、h2、h3などの見出しに画像を使いたい、というのは、EPUBでもよくあると思います。見出しは目立つところなので、画像も合わせて多少作りこみたいし、単に文字だけの見出しにしても、フォント環境が貧弱であれば、できるだけきれいな文字を使うためにも文字だけの画像にしたい、という要望はめずらしくないと思います。けれども、一旦画像で組んでしまうと、それはそのままでは縦から横へはフォールバックできません。傾けてしまうと字が読めませんし、そのままの向きでは縦横比がぜんぜん違う（ことが多い）ので画面のレイアウトがおかしくなる。どうやってもその部分の画像は縦書き用と横書き用で別々に用意する必要がある。

そうやって考えると、ある程度見栄えを気にする場合、何かしら縦と横で作り替えないといけない部分が出てくるのではないでしょうか。もちろんその場合でも、できるだけ共有化する、みたいな制作上の工夫はしたくなるでしょう。それでも、例えば共通部分はcommon.cssにまとめて、縦書き専用部分はvertical-main.css、横書き専用部分はhorizontal-main.cssみたいな感じにして、それぞれからcommon.cssを呼び出す、みたいな技とかは普通に使われそうです。そうすれば、完全に縦と横で別々のスタイルシートを呼び出す場合でもそんなにコストが増えなくできるかもしれません。なかなかそうはいかないでしょうけど。

そんなわけで、「縦書きEPUB文書では、スタイルシートはあらかじめ2つ用意しておく」というのも、わりと現実的な選択肢というか、定着しそうな作法ではないかという気がしています。