EPUBのレイアウト

EPUB 3.0ではEPUB Content Documentsに規定されているとおり、基本的にはCSSを使ってレイアウトを行います。本章ではCSSによる縦組みレイアウト手法を考えてみます。

ただしEPUB 3.0では、読書システムでのサポートの統一性の観点から、W3Cの最新の仕様をそのまま使えることにはなっていません。また、読書システムで利用したいプロパティを完全にサポートしているとも限りません。そのため、本章で解説したレイアウト手法をEPUB内で利用する場合にはそのことに注意してください。

この章に書くことではないですが、EPUBの制作関連の情報として、日本電子書籍出版社協会の電書協 EPUB 3 制作ガイドやKADOKAWA-EPUB 制作仕様、VivliostyleのEPUBサンプル、アンテナハウスのEPUB関連情報、EPUBに関するブログを書かれている電書魂などが参考になるでしょう。

CSSによる縦書きレイアウト

ブラウザにおける縦組みのレイアウトの考え方については、W3C技術ノートの「Requirements for Japanese Text Layout」（日本語訳：日本語組版処理の要件）がまず参考になります。

また、CSSの仕様書以外では、縦書きWeb普及委員会のWebサイトにある「技術解説」やビヨンド・パースペクティブ・ソリューションズのCSS研究部のサイト、あとはMozilla Developer NetworkのCSSリファレンス（日本語訳のページ）が日本語解説として参考になるでしょう。

フォントの指定

ブラウザ上で縦書きを使う場合、WindowsとMac OSの両方にある書体である游明朝、または游ゴシックを指定しておくのが簡単には按配が良くお勧めです。なお、読書システムでは標準の日本語フォントが搭載されていることも多いので、後述のMonospace以外はEPUBで書体を指定しないほうが無難です。

ただし、Firefoxでは縦書きで游書体を指定した際は、日本語と半角の英数字でベースラインのずれが気になるかと思います。そのため英字の書体も合わせて指定してみても良いかもしれません。

ということで、このページでは、次のように指定しています。

@font-face {
  font-family: 'Yu Mincho Custom';
  src: local('Yu Mincho'), local('YuMincho');
}
@font-face {
  font-family: 'Yu Mincho Custom';
  src: local('Times New Roman');
  unicode-range: U+0-2FF;
}
@font-face {
  font-family: 'Yu Gothic Custom';
  src: local('Yu Gothic'), local('YuGothic');
}
@font-face {
  font-family: 'Yu Gothic Custom';
  src: local('Trebuchet MS');
  unicode-range: U+0-2FF;
}
p {
  font-family: 'Yu Mincho Custom', serif;
}
h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption {
  font-family: 'Yu Gothic Custom', sans-serif;
}

なお、OpenTypeフォント自体が持っている情報をCSSで有効化するためには、font-variantプロパティやfont-feature-settingsプロパティなどを使います。仕様書以外に、Adobe Typekitのヘルプセンターに日本語で説明があり、参考になるでしょう。

また、コードのフォントはデフォルトではSafariできれいに表示されません。よって、Safari用に具体的に指定する必要があります。

@font-face {
  font-family: 'Vertical Mono';
  src: local('Consolas'), local('Menlo'); /* for safari, and adjust windows. */
}
code, samp, var {
  font-family: 'Vertical Mono', monospace; /* for sfarii, and adjust windows. */
}

また、iPhone（iOS 9）のMobile Safari上では自動的にフォントサイズに修正が入るため、これを打ち消す必要があります。それらの対応としてこのページでは、次のように指定しています。

body {
  -webkit-text-size-adjust: 100%; /* for font size in ios safari. */
}

読書システムでは、Monospaceの書体を包含していないことも多いです。そこで、 Source Han Code JPや、日本語のフォント幅に正確性を求めないのであればOffice Code Proを含めるのが良いでしょう。

段落本文内の英数字

縦書きを想定したHTMLの本文を書くにあたり、本文内の英数字は半角で書いて構いません。また、記号は基本的に全角で書きます。つまり、横書きと同じです。ただし、作品において英数字の文字列が明らかに短いものしか記載しない場合は、英数字を全角で書いてすべて正立させてしまう方針もあるでしょう。

なお、半角スペースが入らない半角文字の文字列は、ブラウザによってはword-break: all;をかけないと自動的に次行に送られないことに注意してください。通常はそこまで長い文字列は記載されないと考え、例えば次のように設定しておき、都合に合わせてHTML側に<span>タグを入れてもよいでしょう。

/* .url = URL文字列,
:root:lang(en) = 英語文字列 を想定。 */
code, samp, .url, :root:lang(en) {
  word-break: break-all;
}

なお、このページではfigcaption要素内で絵文字を連打しているために、Firefoxでは次行に送られないので、あわせてこの指定を行っています。

リンクのデザイン

リンクのデザインは、縦書きの場合、文字列の右側に実線が引かれていることをブラウザに対して勧めています。

なお、Firefox 44ではa要素に対して、text-orientation: sideways;を指定すると実線が引かれなくなってしまいます。

ルビ

ルビを簡単に確認します。ルビのレイアウトはCSS Ruby Layout Module Level 1にて規定されています。ルビのレイアウトにそこまで気を使わない場合には、グループルビとインラインルビを把握していれば十分でしょう。

また、Chrome 49ではfont-feature-settingsプロパティを使うこと（値：ruby）でルビ用字形が有効になるようです（Windowsで確認）。ただし、この指定はブラウザのデフォルトCSSで指定することを勧めていて、CSS作成者が指定すべきではないことに注意してください。

例えば、このページでは次のCSS（以降SCSSの場合もある）を適用してきます。

rt, rtc {
  font-variant-east-asian: ruby;
  -webkit-font-feature-settings: 'ruby';
  font-feature-settings: 'ruby';
}
rtc {
  ruby-position: under;
}
@supports not (display: ruby-text-container) { /* for chrome. */
  rtc {
    &::before {
      display: inline;
      content: '\FF08';
    }
    &::after {
      display: inline;
      content: '\FF09';
    }
  }
}
@mixin inline-ruby {
  display: inline;
  font-size: inherit;
  white-space: inherit;
  text-emphasis: inherit;
  font-variant-east-asian: inherit;
  -webkit-font-feature-settings: inherit;
  font-feature-settings: inherit;
}
.inline-ruby {
  @include inline-ruby;
  rt, rp, rtc {
    @include inline-ruby;
  }
}

その結果、次のよう描画されます。最後の「札幌（さっぽろ）」と表示されている箇所がインラインルビです。

なお、EPUB内にrtc要素があると、現在のepubcheck 4.0.1での確認がパスできないことに注意してください。

EPUBに対応させることを検討する

ここまでの画像配置の手法は、ブラウザでの配置方法です。しかし、EPUBではこのままは上手くいきません。EPUB 3.0ではHTML5の勧告を元にしていますので、現在srcset属性を使うとValidatorが通らないためです。ただし、EPUB 3.1では使えるようになることが予定されています。

そこでこの項では、srcset属性を使わずにHTMLとCSSで図版を配置することを、検討してみます（EPUB対応の結論は次項のSVGラッピングを参照してください）。

• height属性を指定する：しかし横幅が小さいデバイスで見た時に矩形比が保てません。
• image-resolutionプロパティを使う：詳しく見ていませんが、このプロパティを使うことで対応できるようになると思われます。しかし実装されていません。
• zoomプロパティ使う：セレクタでのzoomプロパティの使用は非標準です。特にFirefoxでは利用できません。
• transformプロパティを使う：親ボックスが縮小されず、余白が出てしまいます。

各手法において補足があるとおり、完全な解決策はないのですが、height属性を使うことになるでしょう（特に後述の軽さを求めることも考慮しなければなりませんので）。

srcset属性の以外にも問題があります。

まず、読書システムとしてよく利用されるReadiumやiBooksでは、縦書きの中で横書きを指定していたfigure[class$=sdl]要素において、画像のmax-heightの％指定が有効にならないというバグがあります。これにより、画像が大きいと描画領域から落ちてしまいます。そこで、!importantをつけて強制的にその指定を有効化させる必要があります。

また、Kindleでは現在max-heightなどの最大値／最小値の指定がサポートされていません。そのため、Kindle用のメディアクエリーである@amzn-kf8を使って、これらの処理を迂回させる必要があります。

さらに、前項で解説してきたCSSレイアウトで実装すると、（たぶん）最大値関係のvwの計算と画像の自動縮小処理で、現状のiBooks 4.7（on iOS 9 / iPad Air 1）で図版が数枚あると動作がかなり重くなってしまいます（iPhoneの場合はどうやら処理がある程度パスされること、Kindleではそもそも最大値の計算が効かないので、iPadのみで重くなります。現時点でAndroidのタブレットでは確認していません）。

……ということで、前項の図版のCSSレイアウトは基本的に「とりあえずできた」レベルであって、そのままEPUBに持ち込むことはできない話だったのが分かります。