この連載は、『PythonでMarkdownからEPUBをつくろう』を一部抜粋して編集したものです。
本編には、全てのソースコードや、生成する原稿のサンプルが付属しています。ぜひ、こちらもご購入ください。
姉妹版の『PythonとPygameで作る レトロ風RPG 全コード』もあります。
≫ 目次に戻る電子書籍の本文はXHTML形式のファイルで作ります。これはMarkdown形式から変換して作ります。このファイルを作るときに、いくつか注意するべきことがあります。
EPUBファイルの本文のデータはXHTML形式です。HTML形式ではありません。そのため<br>や<hr>や<img src="">といったタグ(閉じタグ</~>がないHTMLタグ)は、そのままでは使えません。
<br />や<hr />や<img src="" />のように書く必要があります。
幸いなことに、PythonのMarkdownパッケージは、デフォルト設定でこの形式のタグに変換してくれます。
しかし、Markdown形式の原稿に直接書いたHTMLタグは変換してくれません。自分で直接タグを書く場合は注意する必要があります。
次にKPFファイルについての注意です。
KPFは、AmazoのKindle PreviewerでEPUBから変換して作るファイルです。Kindle端末やKindleアプリで表示する形式と思えばよいです。このKPFファイルは、Kindle特有の制約があります。
まず、HTMLタグに直接style属性を書けません。style="text-align: right;"のような属性を書くとエラーになります。
見た目を調整する場合にはclass="right"のようにクラスを書き、CSSファイル内で.right {text-align: right;}のようにスタイルを書く必要があります。
PythonのMarkdownパッケージでは、テーブルの変換でstyle属性を使います。そのため注意が必要です。
Kindle端末では、一部のタグやスタイルは使えません。また、Kindle端末やKindleアプリに依存して、同じファイルでも表示結果が異なります。
そのため複雑なことをしようとせず、シンプルなレイアウトを心掛けた方がよいです。複雑なことをしようとすると高確率で破綻します。
Kindleは魔窟です。いくつかKindleの特徴を挙げます。
こうした特徴があるため、XHTMLもCSSも必要最小限の使用に留める方がよいです。
Amazon公式の参考情報を挙げます。
Kindle パブリッシング・ガイドライン
https://kdp.amazon.co.jp/ja_JP/help/topic/GU72M65VRFPH43L6HTML および CSS のガイドライン
https://kdp.amazon.co.jp/ja_JP/help/topic/GP2Z9DD4F2N4QKCYKindle Format 8 でサポートされる HTML タグおよび CSS タグ
https://kdp.amazon.co.jp/ja_JP/help/topic/GG5R7N649LECKP7U

HTMLタグでは、次のものが使えません。動的なものは不可と思っておくとよいです。
<base>、<canvas>、<command>、<datalist>、<iframe>、<input>、<keygen>、<marquee>、<noscript>、<param>、<script>、<video>
次のものは制限があります。
<embed>(SVGのみ)、<object>(SVGのみ)
次のものは廃止予定です。これらは昔のHTMLタグで、今は使われていないものです。
<big>、<center>、<font>、
また、<p>タグをネストすると適切に変換されません。
本文については、「<」「>」「&」を必ずHTMLエンティティ(「<」「>」「&」)で書きます。
CSSについては「使えないもの」ではなく、「使えるもの」を確かめた方がよいです。Webブラウザーでは利用できる最新のCSSの機能は使えません。また制限も厳しいです。
注意しておいた方がよい点を抜粋します。
E + F、後続兄弟結合子E ~ Fは利用できません。E::afterのように::を使うもの)や、擬似クラス(E:first-childのように:を使うもの)は利用できません。max-heightとmax-widthは使えません。outlineは使えません。borderは使えます。また、CSSの指定どおりのレイアウトになるとは限りません。Kindle独自の最適化により、CSSを無視することも多いです。
行の幅は指定しない方がよいです。Kindle側でユーザーが設定します。
また、本文のフォントサイズも設定しない方がよいです。こちらも、Kindle側でユーザーが設定します。
これは本当に悩ましいのですが、Kindleのフォントの設定はデフォルトで「明朝」です。
この設定だと、等幅フォントで表示されるタグで囲っても等幅フォントにはなりません。また、CSSでfont-family: monospace;と指定しても、等幅フォントにはなりません。いずれも、明朝体のプロポーショナルフォント(文字により横幅が違うフォント)で表示されます。
コード部分の英数字も、サンセリフ体(ひげのない文字)ではなく、セリフ体(ひげのある文字)が使われます。
そのためプログラミング系の技術書を作るときに困ります。コードをきれいに表示できないからです。
この問題を避けるには、2つの方法を両方適用する必要があります。
.ttfのTrueTypeフォントが使えます。読者にフォントの設定を変えてもらうのは、なかなか難しいです。
また、フォントを同梱すると、日本語フォントの場合は電子書籍のファイル サイズが肥大化します。
この問題は、使用している文字のグリフ(図形)のみを収録したサブセットを作ることで避けられます。
Kindleでは、スペースの幅は一定ではありません。各行の単語の詰まり具合に合わせてKindleが自動でサイズを変えます。この自動調整はCSSでは制御できません。
そのためプログラムのコード部分を、スペースやタブでインデントしているとレイアウトが崩れます。

この問題については割り切って諦めるか、コード部分を画像化する方法もあります。
私は最近は半角の中黒をスペースの代わりに使い、CSSでopacity: 0.05のように薄い半透明にしています。
スペース以外の文字を使うことで、スペースの自動幅調整がおこなわれず、適切なサイズで表示されます。サブセット フォントと組み合わせれば、意図に近い形で表示をおこなえます。

「Send to Kindle」を利用して、実機にEPUBを送って見え方を確認できます。
Kindleライブラリへのドキュメントの送信について -
Amazonカスタマーサービス
https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=G5WYD9SAF7PGXRNA
Web経由で手軽に送ることができます。
意図通りにテキストが表示できていない場合は、下記のページも参考にしてください。
テキストのガイドライン - リフロー型
https://kdp.amazon.co.jp/ja_JP/help/topic/GH4DRT75GWWAGBTU
この連載は、『PythonでMarkdownからEPUBをつくろう』を一部抜粋して編集したものです。
本編には、全てのソースコードや、生成する原稿のサンプルが付属しています。ぜひ、こちらもご購入ください。
姉妹版の『PythonとPygameで作る レトロ風RPG 全コード』もあります。