追記：2019 年 12 月 21 日
最新の Calibre 4.x に対応した縦書き表示の修正について記事を書きました：
私は基本的に、電子書籍の管理には、
を使っているのですが、この Calibre 、どうも縦書き ePub の表示がバグっていて、 縦書き ePub を表示すると何故か文字が横倒しの状態で表示されてしまい、 この関係で縦書き ePub の表示がかなり奇妙かつ不便になっています。
ただ、とは言えその辺りどうにか出来ないかと思い、 実際にやってみたらそこそこにはマシに出来たんで、 今回はその辺りの話をサクっと書きたいと思います。
Calibre で縦書き ePub の表示が文字横倒しになる理由
この問題、大分昔から Calibre で日本語縦書き ePub を表示している組には認識されてたっぽいんですが、なんで Calibre でこう言う問題がおきるかと言うと、
Calibre が ePub の表示に QtWebKit を使っていて、かつ QtWebKit の 縦書きサポートがバグってるから
と言うのが一番の原因っぽいです。
まぁ QtWebkit は Qt の公式的には Deprecated で今だと QtWebEngine 使えってなっていると思うのですが、 Calibre は歴史ある OSS な分その辺り未だ対応し切れてないらしく、 その辺りの非対応がモロに縦書き ePub の表示上のバクに直撃しているっぽいです。
ただしだからと言って Calibre の作者の方がその辺りを認識していないなんてことはなく、 普通に GitHub のブランチに QtWebEngine を使うブランチが存在し、2018 年 10 月現在絶賛開発中っぽいです。 なので、この縦書き ePub の問題は QtWebEngine を使うブランチが、メインの master ブランチにマージされたら多分直るかと思います。はい。
Calibre Viewer で縦書き ePub を横書き表示にしてマシにする
と言う事で、 Calibre の縦書き ePub の表示がバグるのは、QtWebKit を使っているから と言う事が分かったので、 古い QtWebKit に対してカスタム CSS を当てればなんとかマシに表示できるだろう……と思い、実際に書いてみた Workaround な CSS が下記になります：
* {
-webkit-writing-mode: horizontal-tb !important;
}
html {
width: 100%;
background-color: #f8f8f6;
}
body {
-webkit-column-width: 100%;
background-color: #f8f8f6;
font-family: sans-serif;
line-height: 1.818em !important;
}
body > * {
max-width: 40em !important;
margin: auto !important ;
}
ただこれ、
とりあえずは、マシに読める。 但し横書きで
と言うヤツなんで、あんまりマシになってなくね？ と言う感じは有ります。 あと、背景色とか完全に自分の好みですしおすし。
まぁでもこれが有ると無いではデスクトップで ePub を Calibre Viewer で読む際に結構違いがあるので、 とりあえず私はこの CSS を使ってます。はい。
Calibre Viewer をカスタマイズする時は、古い WebKit を意識すると良い
うん。
で、実際に CSS を書いてみて思った事ですが、Calibre Viewer の QtWebKit は古い WebKit なので、 その辺りを意識して CSS を書けば割と問題なく表示をカスタマイズする事が出来るかなと思います。
ただ、やっぱり QtWebKit が使ってる WebKit の実装は古いんで CSS3 を使おうと思うと Vendor prefix は必要だし、 プロパティのリセットにも制約が有るし……という感じでちょっとした苦難が待っている感は有ります。 なので、あんまりこうゴリゴリとカスタマイズして……というのは向かないかと思いますね。個人的には。
とは言え workaround が書けないほど古いかと言われた ら そうでも無い んじゃない？ と言えるかと思うんで、Calibre の Viewer で CSS を使うときは、
古い WebKit に対して CSS を書く
というのを意識していれば、割となんとかなるとは思います。はい。
以上
……と、ここまで書いてて思ったけど、まだ誰得な記事を書いてしまった。
まあいいけど。
