Web小説を任意のフォントで縦書き

Web小説の縦書き表示を模索。

CSS

単純な縦書きならCSSで可能だが、小説はフォントが最重要。ほとんどのフォントライセンスでWebフォントやEPUB埋め込みは許可されていない。源ノ明朝、しっぽり明朝は良いフォントだが、筑紫明朝系を使いたい。

PDF

PDF埋め込みは許可されている事が多い。WordPressプラグインのPDFビューアを複数試したが、資料やカタログが想定されていて書籍向きではない。モダンな3Dフリップ表示の物は見開き・RtL(縦書き向け)設定があったが、音やアニメの余分な演出が付き、ホイールスクロールが出来ず。

EPUB

EPUB埋め込み可能フォントであればリフロー型、不可であれば固定型(画像化)で作成。国産ビューアのBibiが高機能でセンスも良い。見開きと単頁のレスポンシブ表示、ホイール・スワイプに対応。ただモバイル版Sleipnirで開けなかったのと、数ページでもローディング時間が発生し、モーダル表示は非対応。「電子書籍」であればこれでいいと思う。Web小説は一瞬で開きたい。

画像化

固定型EPUBの拡張子をzipにすると中身の画像を取り出せるので、Web漫画ビューアを使う。laymicがレスポンシブ、ホイール・スワイプ対応、モーダル表示。機能的には申し分ないが、htmlに全ページ分の画像ファイル名を書き連ねる必要がある。

縦書き表示テスト(ペーパーバック風)

EPUBは「背景なし・余白なし」で作成し、CSSでデザインを調整する。
背景画像を乗算する事で容量を抑え、メディアクエリで余白を指定してレスポンシブにテキストサイズを調整。不要なツールボタンを隠してシンプルに。