Calibre 4.x で縦書き ePub を横書きにしてマシにする方法

以前、私は、

と言う記事を書いた様に、Calibre 3.x で縦書き ePub 横書きにし、 Calibre 3.x で縦書き ePub が上手く表示されないのをなんとかする方法を記載していました。

ただこの記事を書いている 2019 年 12 月現在、Calibre は 4.x 系がリリースされ、 Calibre が ePub 表示に使っている Renderer も QtWebkit から QtWebEngine に変更されたため、 Calibre の縦書きの修正方法も変っており、今回はその辺りの変更への対応方法も含めて、 Calibre 4.x の縦書き ePub の表示をマシにする方法を紹介したいと思います。

今までのおさらい

まず calibre の表示をマシにする方法を紹介する前に Calibre 内部のおさらいをすると、今までの Calibre 3.x では ePub の表示に古い QtWebkit を使っていて、これが原因で縦書き ePub の表示がバグる、というコトの原因になっていました。

そして Calibre 4.x 系では、これが Google Chrome や Chromium などと同じ、 Blink ベースの Web Renderer である QtWebEngine に置き換えられたため、今の Calibre 4.x ではこの縦書き表示のバグは解消されています。

ただ、現実としては縦書き表示のバグは解消されたものの、今の Calibre 4.x では縦書き ePub への CSS などの対応が不十分であるため、今の Calibre 4.x でも縦書き ePub の表示はかなり崩れたままです。

とは言え今の Calibre 4.x では Google Chrome などで使う CSS をそのまま適用できるため、 Calibre 4.x の縦書きをマシにするためには普通の Web 製作で使う CSS がそのまま使えます。

Calibre 4.x の縦書きをマシにする方法

と言うことで実際に縦書き ePub を Calibre で読み易くするための CSS はこちらです：

html {
  writing-mode: horizontal-tb !important;
  min-width: 40em !important;
  max-width: 40em !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 4em 0 8em 0 !important;
  width: 40em !important;
  font-size: 20px !important;
  line-height: 1.727em !important;
}
a:link,
a:visited {
  color: #333333;
  text-decoration: underline;
}
a:hover,
a:active {
  color: #000000;
  text-decoration: underline;
}

なおこの CSS では下記の様なことをやっています：

挙動が不安定な縦書きを止めて横書きに
本文の見た目を人間が読み易い様に調整
ページの切れ目が分かり易い様に空白を追加
リンクの色をモノクロベースに

またこの CSS は Calibre の ePub リーダーで下記の設定を前提としています：

ページレイアウトで上下左右マージンを 0 にする
ページのレイアウトモードをFlow Mode にする

なおこれ以外の修正については、Web 製作の知識がそのまま使えるので、

辺りを参考に CSS を書けば、割となんとかなると思います。

上記 CSS の注意点

ここで一つ残念ならお知らせですが、この CSS だけですべての ePub が見易くなるかと言うと実際には微妙な感じです。

と言うのも ePub は HTML5 や CSS3 と言った Web 関連技術を使ってその電子書籍を構成しているのですが、 HTML5 や CSS3 が人によって書き方や要素の構造がまちまちなため、

この ePub ファイル、どうしてこんな構造しているんだ……？

と言う事が割と良く有り、上記 CSS だけですべての ePub ファイルをサポートするのは結構無理があります。

また上記 CSS は縦書き ePub を問答無用で横書きにしているので、当然にことながら ePub を縦書きで読みたいと言う需要は満せません。

そのため上記 CSS を使う場合にはその辺りを留意する必要があります。

以上

と言う事で Calibre 4.x で縦書き ePub を横書きにしてマシにする方法は以上です。

ちなみにここで紹介した事は最大公約数っぽい事柄しか紹介してないんで、より自分の好みに合うようにカスタマイズするためには自力で CSS を書く必要があります。

とは言え今の Calibre は QtWebEngine を利用しているため、 Google Chrome などで Web 制作を行う時と同じ様に CSS を編集できるので、その点では以前の QtWebKit を使っている時よりも格段に作業はし易くなっています。

また縦書きを強制的に横書きにする方法も CSS 一発で出来る様になったので、

縦書きだとそもそも何をどうしても読み辛い

という事に対しても、かなり手軽に対応できる様になったよなーと感じています。はい。