サンプルの縦書き表示

2013/8/1 [14:45:21] (木)

 この雑記帖を「縦書き」で検索するとしこたまヒットする。小説などの文章は縦書きであるべきだと思っている。根拠はない。

EPUB3だ電子書籍だとここで騒ぎ出したのも縦書きができるようになったから。

この雑記帖で日野裕太郎作品のサンプルを立ち読みしてもらうのも縦書きでなきゃ意味がない。 「創作文芸見本誌会場HappyReading」 の立ち読みテキストも（無理やりではなくて、素直な）縦書きで表示したい。

てことで調べてるんだけど、FireFoxがいまだに対応していない。
困ったことに、FireFoxはサイトをコーディングしていくときに便利なアドオンがあって手放せない。

しかたがないので、この雑記帖では、現状はUserAgentで判定してSafari、Chrome、IEの時だけサンプルを表示するようにした。

https://t2aki.doncha.net/?id=1362724515
スクリーンショットは向かって左からIE、Chrome、Safari（WIN7）

この時、気に入らなかったのが、

・縦書きは右から左へ文章が流れる。
・ブロックに収まりきらない分は、左側にあふれる。
・スクロール指定をしたら、ブロックの下にスクロールバーが出て、右から左へスクロールとなる。

全然イケてない。
・ブラウザのスクロールは縦方向でそこに横方向ってどうなの。
・クリックなどのユーザーアクションを求めるのはかなりハードルが高い。
という理由もあるけど。そもそも…

本の段組みのように配置されて、右から左に読んだら、左下から一段下の右上に目線を移動するのが本当だろう。
ブラウザも目線も上から下。クリックなしに文章を追ってもらえる。

ということで、雑記帖でのサンプル縦書き表示は、文字数をカウントして一行ずつ、pタグで囲って「段組み」に流し込むこととなった。

禁則処理のレアケースでバグがあるけど勘弁してもらおう（自分に）

縦書き部分のCSS
-webkit-writing-mode:vertical-rl; writing-mode:vertical-rl; font-family: '@ＭＳ 明朝', serif, sans-serif; direction:ltr; unicode-bidi:bidi-override; line-height:1.7em; /* ie */ -ms-writing-mode: tb-rl;

ついさっきまでIEもダメだと思ってたのは内緒。
このIE用の指定を見つけたので、何度も似たようなことを書いてるのに、またこんな記事にしたというのがことの真相。

やっぱ縦書きにはこだわりたいんだよなあ

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

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