EPUB仕様の日本語組版拡張を目指して(Version 0.8)
2010年6月1日
日本電子出版協会(JEPA) EPUB研究会 村上 真雄（アンテナハウス）@MurakamiShinyu、村田 真（国際大学）@MurataMakoto
この文書は、EPUB 仕様を日本語組版に対応するように拡張することを目指して、その試案として書かれたものであり、なんら正式なものではありません。
目次
3.2.1 論理的 margin プロパティ: margin-before, margin-after, margin-start, margin-end
3.2.2 論理的 padding プロパティ: padding-before, padding-after, padding-start, padding-end
3.2.3 論理的 border プロパティ: border-before, border-after, border-start, border-end, etc.
3.2.4 論理的 width/height プロパティ: logical-width, logical-height, min-logical-width, etc.
3.3.1 float プロパティの値（start および end）
3.3.2 clear プロパティの値（start および end）
3.3.3 text-align プロパティの値（start および end）
日本から提出したMinimal Requirements on EPUB for Japanese Text Layoutは、すでにIDPFおよび関係各国によく知られている。2010年いっぱいに作成するEPUB2.1においてアジア組版に対応することは、すでにIDPFの方針になっている。憲章に含まれているだけではなく、IDPF関係者がそう発言していることが報道されている。
今後はIDPF EPUB WGのsubgroupとしてCJK subgroupを設立し、そこで集中的に審議することを目指す。台湾、中国、韓国、IDPFにはすでにCJK subgroupの設立を村田真から提案している。2010年8月には、日本での会合を予定している。
CSS3の拡張が必要になるので、W3CのCSS WGに働きかける。すでにCSS3 Text Layoutのエディタとして村上真雄が加わっており、この文書で採用している論理的プロパティが現在のeditor's draftにはすでに含まれている。
この文書の内容すべてを、IDPF EPUB仕様の拡張として盛り込む必要はなく、一部は国内文書として作成すれば十分である。以下に案を示す。
日本語文書の文字組みの方向は縦書きと横書きがある。コンテンツにより縦書きに適したものと横書きに適したものとがあり、コンテンツの作成者はスタイルシートによりその指定をすることができる。リーディングシステムはデフォルト設定で指定された通りの組方向でコンテンツを表示する。また、ユーザー（読み手）の好みの設定により組方向を変えて表示できることが望ましい。
日本語の縦書き文書では、ページの進行方向は右から左になるため、見開き表示では横書きの場合と左右が反対になる。また段組みの表示をする場合には段を上から下へと配置する。
縦書き文書であっても、ページヘッダとページフッタはそれぞれページの上と下に横書きで表示しなければならない。また、キャプションやテーブルなども通常は横書きで組まれる。縦書きの行の中で数字列などを部分的に横書きにする縦中横の指定も必要である。このため、スタイルシートでの組方向の指定は、基本となる組方向（principal writing mode）の指定のほかに、文書内での部分的な組方向の指定もできなければならない。
縦書きと横書きについて詳しくは、「日本語組版処理の要件」の「2.3 組方向（縦組と横組）」を参照。
文字組みの方向は、writing-mode プロパティにより指定する。
| 名前: | writing-mode |
| 値: | lr-tb | tb-rl |
| デフォルト値: | lr-tb |
| 継承: | yes |
値 lr-tb は横書き（文字は左から右、行は上から下へ）、値 tb-rl は縦書き（文字は上から下、行は右から左へ）を指定する。
※この定義は、CSS3 Text Layout 仕様の writing-mode プロパティのサブセットである。CSS3 Text Layout 仕様の writing-mode プロパティは、direction プロパティと block-flow プロパティをまとめて指定するためのショートハンドであり、より多くの値が定義されている。リーディングシステムはそれらすべてに対応してもよいが必須ではない。通常の日本語コンテンツでの組方向の指定には、このサブセットで充分なはず。
基本となる組方向（principal writing mode）は、コンテンツドキュメントのルート要素（XHTML の場合 html 要素）の writing-mode プロパティにより指定する。
例：
/* 基本となる組方向として横書きを指定 */
html {
writing-mode: lr-tb;
}
/* 基本となる組方向として縦書きを指定 */
html {
writing-mode: tb-rl;
}
文書内の特定の要素に writing-mode プロパティ指定することで、その要素の組方向を指定することができる。
例：
/* テーブルをすべて横書きにする */
table {
writing-mode: lr-tb;
}
/* class="figure" が指定された div 要素をすべて横書きにする */
div.figure {
writing-mode: lr-tb;
}
縦書きの行の中のインライン要素に writing-mode: lr-tb を指定することで、縦中横の指定ができる。
例：
/* class="tcy" が指定された span 要素を縦中横にする */
span.tcy {
writing-mode: lr-tb;
display: inline-block;
line-height: 1em;
text-align: center;
text-indent: 0;
}
...
平成<span class="tcy">20</span>年４月<span class="tcy">16</span>日
縦中横のように、インライン要素の組方向がその周囲の組方向と変わるような場合には、そのインライン要素は inline-block として扱われる必要がある。上の例では、display: inline-block を明示的に指定しているが、この指定は省略可能である。
縦書きの行の中での縦中横の配置は、左右中央が揃わなければならない。3桁以上の数字を縦中横にする場合など、行の左右に均等にはみ出すことになる。
縦中横ついて詳しくは、「日本語組版処理の要件」の「3.2.5 縦中横の処理」を参照。
リーディングシステムが、ユーザーの設定により基本となる組方向を変えて表示するには、コンテンツドキュメントのルート要素（XHTML の場合 html 要素）の writing-mode プロパティを、そのユーザー設定により上書きする。これにより、ユーザーは縦書き用の文書を横書きで読むこと、横書き用あるいは組方向の指定がされていない文書を縦書きにして読むことができる。また、縦書きに非対応のリーディングシステムでは、当然ながら横書きでのみ表示される（スタイルシートの縦書きの指定は無視される）。
コンテンツの制作者は、このような読み手の側での縦書き／横書きの変更に考慮したスタイル指定をするべきである。次はそのための注意点：
スタイルシートで margin-left のような物理的な方向の指定（top、bottom、left、right のいずれかが名前に含まれる）のあるプロパティの使用には注意が必要である。なぜなら、横書きの場合 margin-left は、ブロックのインデントの指定となるが、縦書きの場合にはブロックと次のブロックの間のアキということになり、縦書き／横書きを変えたときにレイアウトが崩れる結果となるためである。このため物理的な方向の指定ではなく論理的な方向の指定を使うべきである。
※このセクションで説明する論理的方向指定のためのプロパティ仕様は、CSS3 Text Layout 仕様の Logical directional properties and values で定義されるものである。
CSS 仕様において上・下・左・右（top、bottom、left、right）は基本的に物理的な方向の指定であり、文字組みの方向（writing-mode）に合わせて方向が変わるということはない。幅（width）、高さ（height）も基本的に物理的な水平方向と垂直方向の寸法を表す。これに対して論理的な方向の指定では次の語を使う：
| 論理的な方向での指定 | 意味 | 横書き（lr-tb）の場合 | 縦書き（tb-rl）の場合 |
| before | ブロックの前側 | 上（top） | 右（right） |
| after | ブロックの後側 | 下（bottom） | 左（left） |
| start | 行の始め側 | 左（left） | 上（top） |
| end | 行の終わり側 | 右（right） | 下（bottom） |
| logical-width | インライン方向の寸法 | 幅（width） | 高さ（height） |
| logical-height | ブロック方向の寸法 | 高さ（height） | 幅（width） |
例えば、論理的な方向で指定する margin-before プロパティは、横書き（lr-tb）の場合 margin-top、縦書き（tb-rl）の場合 margin-right に対応する。
論理的プロパティは、そのプロパティが指定された要素の writing-mode を使って対応する物理プロパティにマッピングされて、物理的プロパティを指定したのと同じように処理される。
論理的プロパティの値の定義や使用方法は、対応する物理的プロパティと同じである。
同一要素に論理的プロパティと物理的プロパティとが混在して指定されている場合、すべて物理的プロパティに置き換えた上で、通常の CSS のカスケーディング規則でスタイルが決定される。
| 名前: | margin-before, margin-after, margin-start, margin-end |
| 値: | <length> | <percentage> | auto |
| デフォルト値: | 0 |
| 継承: | no |
例：
/* 引用ブロック：前と後のアキを1.5emずつ、行頭側インデントを2emと設定 */
blockquote {
margin-before: 1.5em;
margin-after: 1.5em;
margin-start: 2em;
margin-end: 0;
}
| 名前: | padding-before, padding-after, padding-start, padding-end |
| 値: | <length> | <percentage> |
| デフォルト値: | 0 |
| 継承: | no |
| 名前: | border-before-width, border-after-width, border-start-width, border-end-width |
| 値: | <border-width> |
| デフォルト値: | medium |
| 継承: | no |
| 名前: | border-before-style, border-after-style, border-start-style, border-end-style |
| 値: | <border-style> |
| デフォルト値: | none |
| 継承: | no |
| 名前: | border-before-color, border-after-color, border-start-color, border-end-color |
| 値: | <color> |
| デフォルト値: | currentcolor |
| 継承: | no |
| 名前: | border-before, border-after, border-start, border-end |
| 値: | <border-width> || <border-style> || <color> |
| デフォルト値: | (see individual properties) |
| 継承: | no |
| 名前: | logical-width, logical-height |
| 値: | <length> | <percentage> | auto |
| デフォルト値: | auto |
| 継承: | no |
| 名前: | min-logical-width, min-logical-height |
| 値: | <length> | <percentage> |
| デフォルト値: | 0 |
| 継承: | no |
| 名前: | max-logical-width, max-logical-height |
| 値: | <length> | <percentage> | none |
| デフォルト値: | none |
| 継承: | no |
CSS プロパティで物理的な方向を指定する値（top、bottom、left、right）を取るものは、論理的な方向を指定する値（before、after、start、end）も有効としなければならない。このようなプロパティでは、論理的な方向の指定は、そのプロパティの指定のある要素の writing-mode を使って対応する物理的な方向へとマッピングされる。以下のプロパティが該当する。
| 名前: | float |
| 値: | start | end | left | right | none | inherit |
| デフォルト値: | none |
| 継承: | no |
| 名前: | clear |
| 値: | start | end | left | right | both | none | inherit |
| デフォルト値: | none |
| 継承: | no |
| 名前: | text-align |
| 値: | start | end | left | right | center | justify | inherit |
| デフォルト値: | justify |
| 継承: | yes |
※デフォルト値を justify としているのは CSS 仕様でのこのプロパティの初期値と異なるが、日本語組版では行の調整処理をするのが標準であるため。
| 名前: | caption-side |
| 値: | before | after | top | bottom | inherit |
| デフォルト値: | before |
| 継承: | yes |
ルビのマークアップは、HTML5仕様の ruby 要素を使う。
この方針はHTML5への移行という大きな課題に巻き込まれて遅延する可能性がある。 情勢を見て、XHTML 1.1のsimple rubyに限定する可能性ある。
モノルビの例：
<ruby>人<rt>ひと</rt></ruby>に <ruby>誨<rt>おし</rt></ruby>えて <ruby>倦<rt>う</rt></ruby>まず
熟語ルビの例：
<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の <ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を <ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する
グループルビの例：
<ruby>田舎<rt>いなか</rt></ruby>、 <ruby>境界面<rt>インターフェース</rt></ruby>
ルビの配置方法について詳しくは、「日本語組版処理の要件」の「3.3 ルビと圏点処理」を参照。
ルビを親文字の両側に付けるには、ruby 要素をネストさせる。
親文字の両側にルビを付ける例：
<ruby> <ruby>東<rt>とう</rt>南<rt>なん</rt></ruby> <rt>たつみ</rt> </ruby>の方角
この場合、内側の ruby 要素のルビテキスト（この例では「とうなん」）が通常のルビ位置（縦書きなら右、横書きなら上）に、外側の ruby 要素のルビテキスト（この例では「たつみ」）がその反対側（縦書きなら左、横書きなら下）に付くことになる。
圏点（傍点）の指定には、CSS3 Text 仕様の text-emphasis プロパティを使う。
| 名前: | text-emphasis |
| 値: | none | [ [ accent | dot | circle | disc] [ before | after ]? ] |
| デフォルト値: | none |
| 継承: | yes |
圏点の種類は次のとおり：
例：
/* em タグで傍点が付けられるようにする */
em {
font-style: normal;
text-emphasis: accent;
}
圏点の処理について詳しくは、「日本語組版処理の要件」の「3.3.9 圏点の処理」を参照。
OPF中のメタデータでは、同一要素(titleなど)を複数回指定することによって、漢字交じり表記と片仮名表記を指定する。漢字混じり表記のときはxml:lang="ja-jp"を指定し、片仮名表記のときはxml:lang="ja-kana-jp"を指定する。
例：
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title xml:lang="ja-jp">伊達姿五侍</dc:title>
<dc:title xml:lang="ja-kana-jp">ダテスガタゴサムライ</dc:title>
...
</metadata>
ここでは、IDPF の EPUB 仕様には含めないが、よりよい組版結果が得られるための実装上の推奨事項を示す。
縦書きでは、行の左右中心に文字サイズの異なる文字やインライン画像の中心が揃うように配置することを基本とする。インライン要素に vertical-align プロパティが指定されているならそれに従う。
※vertical-align というプロパティ名やその値の top、bottom、text-top、text-bottom は縦書きにおいては適切な名前ではないが、横書きの場合と同様に機能しなくてはならない。参考：CSS3 Line Layout ドラフト仕様の Baseline alignment。
全角文字の数字や欧字については、和文文字と同じ扱いで正常な向き（回転しない）で配置。全角文字ではない数字や欧字などは時計回りに90度回転し配置するのを基本とする。オプションとして、2桁までの数字を自動的に縦中横にすること、1文字の欧字も正常な向きで配置すること、それ以外のものをすべて1字1字を正常な向きで配置することなどがありえる。箇条書きの番号（CSS の標準の list-style により生成されるもので、1.、2.、3.、a.、b.、c. などピリオドが付く）を縦書きで表示したときに違和感がないように、番号のあとのピリオドを縦書き用に変換して表示するなどしてもよい。
禁則処理については、「日本語組版処理の要件」の「3.1.7 行頭禁則」、「3.1.8 行末禁則」を参照。また、多言語の行分割規則については、Unicode Standard Annex #14 Unicode Line Breaking Algorithm も参考になるかもしれない。
日本語組版では、行の調整処理により行頭と行末を揃えることが基本であり、欧文と違い、行末側を不揃いのままとすることはあまりない。このため、text-align: justify の設定がデフォルトであることが望ましい。
行の調整処理について詳しくは、「日本語組版処理の要件」の「3.8 行の調整処理」を参照。CSS3 Text ドラフト仕様の text-justify プロパティ、CSS3 Text 旧ドラフト仕様の text-justify-trim プロパティも参考になるかもしれない。
「日本語組版処理の要件」では、和文の約物の字幅は半角として、これに条件によって、半角幅（二分）のアキが付くことで、結果として全角幅になるという考え方がされている。
参照：「日本語組版処理の要件」の「3.1.2 句読点や，括弧類などの基本的な配置方法」。
しかし一般的な和文フォントのグリフの約物は全角幅で用意されているため、処理方法としては、全角幅の約物のグリフに含まれている半角幅分のアキを、条件によって詰めるということでもよい。この条件としては、特定の組み合わせで約物が連続する場合、行頭に始め括弧類が配置される場合、行末に終わり括弧類・句点類・読点類・中点類が配置される場合がある。
約物の配置について詳しくは、「日本語組版処理の要件」の「3.1.4 始め括弧類，終わり括弧類，読点類，句点類及び中点類が連続する場合の配置方法」、「3.1.5 行頭の始め括弧類の配置方法」、「3.1.9 行末に配置する終わり括弧類，句点類，読点類及び中点類の配置方法」を参照。CSS3 Text ドラフト仕様の punctuation-trim プロパティも参考になるかもしれない。
和文文字と欧字・数字とが隣接するときは、間にアキ（通常は四分アキ）を入れる。
和欧文間のアキについて詳しくは、「日本語組版処理の要件」の「3.2.6 プロポーショナルな欧字を用いた和欧文混植処理」を参照。CSS3 Text 旧ドラフト仕様の text-autospace プロパティも参考になるかもしれない。