カラクリスタ・テック

『輝かしい青春』なんて失かった人の技術系ブログです。

Calibre Viewerで縦書き ePub を横書きにして表示をマシにした

私は基本的に、電子書籍の管理には、

を用いているのですが、このCalibre、 縦書き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 を書く

というのを意識していれば、割となんとかなるとは思います。はい。

以上

……と、ここまで書いてて思ったけど、まだ誰得な記事を書いてしまった。

まあいいけど。