EPUBで使えるCSSについて

[MurakamiShinyu]

Vivliostyle CLIでEPUB出力が可能となると、EPUBで使えるCSSについての考慮が必要になる。VivliostyleがサポートするCSS組版用のスタイルシートをEPUBに入れることは可能だが、そのEPUBを一般のEPUBリーダーで閲覧するとVivliostyleのCSS組版のページレイアウトは再現されない。また、ブラウザで利用できる標準的なCSSの機能がEPUBリーダーで利用できるとは限らない。

EPUBリーダーをサポートするCSS機能によって分けると次のようになる：

1. Vivliostyle
2. Apple Books、Thorium Readerなど、最新ブラウザベースのEPUBリーダー
3. Kindleなど、CSSの機能が限定されているEPUBリーダー

VivliostyleをEPUBリーダーとして使うならば、VivliostyleがサポートするCSS組版の機能を活かすことができる。しかし、Vivliostyleを使わないと正常に閲覧することができないEPUBというのでは、EPUBにする意味があまりないだろう。

Apple BooksやThorium Readerなど、最新ブラウザベースのEPUBリーダーでは、最新の標準のCSS機能が利用できる。そのようなEPUBリーダーでのみ最適に表示できるということを明記してEPUBを頒布するということはありうるだろう。しかし、EPUBを頒布して多くの読者を得ることを目的とするならば、EPUBリーダーを限定するというのはあまりよくないだろう。

作成したEPUB電子書籍をAmazon Kindleストアで出版する場合、その電子書籍はKindle端末あるいはKindleアプリで閲覧されることになる。残念なことに、KindleでサポートされているCSSの機能はとても限定されており、CSS変数、CSS Flexbox、CSS Gridなど現在ブラウザで標準的に利用できるCSS機能の多くが利用できないことに注意が必要である。

Vivliostyle CLIでのプレビューに、CSSの機能の制限があるEPUBリーダーをエミュレートする機能があればよいかもしれない。

[spring-raining]

EPUB出力機能の実装時には意図的にスコープから外していましたが、たしかにEPUBリーダーを考慮したCSSを用意するという要望は考えられます。ただ、各リーダーのCSSの互換性に関する情報を収集してメンテナンスする作業は相当実装コストがかかることが予想され、今の開発規模では難しいように思います。

この問題に対処するため、いくつかアイディアは考えています。もしほかに良い方法がありましたら、こちらのissueにコメントをお願いします。

• VivliostyleではEPUB向けCSSのサポート自体はせず、利用者自身が用意したCSSファイルを適用しやすくなるようconfigを追加する
  • 例えば現在のthemesに関する設定に加えて、以下のようなEPUB出力用のconfigを追加する

    module.exports = {
    output: 'draft.epub',
    epub: {
    css: 'styles-for-epub.css',
    },
    };

• Vivliostyle.jsによる各ページのレンダリング結果を画像化 (svg, png) し、EPUB Fixed Layout での出力に対応する
  • 互換性の問題は解消する。ただ、Fixed layoutにしてしまうのであれば単にPDFに出力するのと実質的には変わりなく、アクセシビリティ的にも良くないため個人的には消極的です

[butameron]

ご参考としてですが、京姫鉄道合同会社の出版物では以下のようにしています。

• 印刷用（Vivliostyle専用）も、電子書籍もEPUB形式で作成する（印刷用はzip圧縮はしない）
• ビルド時の引数で印刷用とEPUB用の読み込むscss/sassを切り替える
• それぞれのscss/sassから共通のscss/sassをインクルードする
• 上記からビルド時に一つのcssにする（minifyはしない。一部のリーダーでは、エラーがあった行は丸ごと無視されてしまうものがあるので、minifyするとCSSが全く読み込まれないことがある）

京姫鉄道合同会社の出版物の生成は、Vivliostyle CLIが登場する前からの自前のスクリプトを使用しています。 参考になるかもしれませんので、以下にサンプルのリポジトリを公開しました。 （Vivliostyle CLIとは方向性が結構違っていますので、弊社ではVivliostyle CLIに移行できずどうしようかなと思っているぐらいなのですが、参考になれば……）

https://github.com/kyoki-railway/novel-akane-2-sample

• gulpfile.js に処理の記述があります
• src/ フォルダにMarkdownファイルやスタイルシートなどのソースファイルが色々あります

自分で使えればいいやのスクリプトなので、汚いコードで申し訳ありません。 数カ月前からリファクタリングした上で公開するすると言っていたのですが、時間を確保できませんでした。

ご参考になれば幸いです。

[spring-raining]

EPUB Fixed layoutの出力の話題についてはこちらに分割しました #432

[butameron]

VivliostyleをEPUBリーダーとして使うならば、VivliostyleがサポートするCSS組版の機能を活かすことができる。しかし、 Vivliostyleを使わないと正常に閲覧することができないEPUBというのでは、EPUBにする意味があまりないだろう。

オフトピックですが、これについては、個人的には、「中間データ形式としてのEPUB」であれば、多少意味があるのではないかと思っています。この利点としては、ワークフローとして以下のようにzip未圧縮のEPUB形式を中間点にできるため、恐らく処理をいくつか共通化できるところにあります。

• 印刷用：Markdown→Vivliostyleでしか正常に閲覧できないEPUB（zip未圧縮）→入稿用PDF
• 電子用：Markdown→汎用的なEPUB（zip未圧縮）→ 電子書籍用EPUB

先ほどのスクリプトはその発想で作成しています。