CSS組版ブログ

6月1日に「EPUB仕様の日本語組版拡張を目指して(Version 0.8)」を試案として公開しました。

この試案の主な点は、縦書きの指定に CSS3 の writing-mode プロパティを使うことと、W3C内で議論されている margin-before/after/start/end など論理的プロパティを採用するということでした。

しかしその後、W3C での議論や、縦書き対応EPUBビューアなどを実装している側の意見を聞いて、この方針は無理があったと感じています。
（参考：「EPUB や CSS と日本語レイアウト、HTML5 と電子書籍」にも書きました）

そこで新たな試案を作成したいと思っているのですが、以下は、そのための私的メモです。

組み方向と綴じ方向の指定（OPFパッケージ文書に）

組み方向と綴じ方向の指定はCSSで指定するのではなく、OPFパッケージ文書に属性として指定するのがよいと思います。そのメリットは、未完成のCSS3仕様に依存しないこと、ビューア実装にとってはOPFにアクセスするだけで組み方向と綴じ方向が分かれば、それによりUIを変えるなどができるということです。

組み方向の指定: text-direction 属性

値:	auto | ltr | rtl | ttb-rtl | ttb-ltr
デフォルト:	auto

auto

ビューア側で横書きにも縦書きにもできる

ltr

左から右への横書き（英語、横書きの日本語など）

rtl

右から左への横書き（アラビア語、ヘブライ語など）

ttb-rtl

縦書き(top-to-bottom)で行は右から左（縦書きの日本語など）

ttb-ltr

縦書き(top-to-bottom)で行は左から右（モンゴル文字のモンゴル語など）

ページ綴じ方向: binding-direction 属性

値:	auto | ltr | rtl
デフォルト:	auto

auto

組み方向により自動的に綴じ方向が決まる

ltr

左から右へ

rtl

右から左へ

OPFのどの要素に指定？

OPFのどの要素にこれらの属性を指定するべきかは、検討が必要です。この試案で参考にしているSONY&TOPPANの案では、spine 要素に binding-direction 属性を指定するものでした。

本全体の組み方向・綴じ方向だけではなく、本の一部分だけ組み方向・綴じ方向を変える指定もできるべきです。次のいずれかの案が考えられます：

案その1: 本全体への指定は spine 要素に、本の一部への指定は spine の子要素である itemref 要素に

案その2: 本全体への指定は manifest 要素に、本の一部への指定は manifest の子要素である item 要素に

縦書きの中での部分的な横書き

縦書きの行の中で数字を縦中横にしたり、表や図のキャプションなどを横書きにする指定が必要です。次のいずれかの案が考えられます：

案その1: XHTML の dir 属性を使う。dir="ltr" または dir="rtl" が指定された要素は横書きにする。

例: 縦中横<span dir="ltr">22</span>年
<table dir="ltr">...

案その2: 縦書きの中で横書きを指定するための class 名を定義する。例えば：

例: 縦中横<span class="idpf-horizontal">22</span>年
<table class="idpf-horizontal">...

圏点

CSS3 Text ドラフトには text-emphasis プロパティがあります。しかし、この CSS3 仕様が標準となるのもまだ時間を要します。

考えられるひとつの案として、青空文庫のXHTML形式で採用されているような class 名を使うというものがあります。

参考：「青空文庫　組版案内：強調」 <em class="sesame_dot">傍点</em> <em class="white_sesame_dot">白ゴマ傍点</em> <em class="black_circle">丸傍点</em> <em class="white_circle">白丸傍点</em> <em class="black_up-pointing_triangle">黒三角傍点</em> <em class="white_up-pointing_triangle">白三角傍点</em> <em class="bullseye">二重丸傍点</em> <em class="fisheye">蛇の目傍点</em> この青空文庫形式を参考に、IDPF EPUB 用に class="idpf-emphasis-sesame-dot" などとするとよいかもしれません。