縦書きEPUBのCSS｜ルビ・縦中横・傍点の書き方

先に知っておきたいこと

EPUB 3は、縦書きとルビに仕様の上で対応している

W3CのEPUB 3の解説は、EPUB 3が、縦書き、ルビ、右から左に読む文章などの組み方に対応していると説明しています。縦書きの本をEPUBで作れるのは、この仕様があるためです。

仕様にあることと、リーダーの表示は別

仕様にあるプロパティを書いても、リーダーが同じように表示するとは限りません。この記事の確認時点で、リーダー別の縦書き・ルビ・傍点の対応を比べた公式の情報は確認できていません。コード例は、仕様で定義されたプロパティだけを使っています。動作は、実際のリーダーとKindle Previewerで確認してください。

縦書きは、CSSだけでは完結しない

縦書きの本には、CSSのほかに、次の設定が関わります。

言語を日本語（ja）にする（パッケージ文書のdc:language）
ページをめくる方向を右から左にする（パッケージ文書のspineのpage-progression-direction="rtl"）。EPUB 3.3の仕様では、この属性の値はltr・rtl・defaultです
KDPで出すなら、投稿時に、ページを読む方向（縦書き：右から左）を選ぶ

KDPの日本語ヘルプによると、読む方向は、日本語など一部の言語で、横書き（左から右）か縦書き（右から左）かを選べます。そして、選択は、内容のページを読む方向に合わせる必要があります。パッケージ文書の書き方は、content.opfの書き方｜タグと属性の意味を整理を参照してください。

1. 縦書きにする：writing-mode

writing-modeは、文字が並ぶ向きと、行が進む向きを決めます。W3CのCSS Writing Modesでは、次の値があります。

値	意味
`horizontal-tb`	横書き。行は上から下へ進む
`vertical-rl`	縦書き。行は右から左へ進む
`vertical-lr`	縦書き。行は左から右へ進む

日本語の縦書きの本は、右から左へ行が進むvertical-rlを使います。

html {
  writing-mode: vertical-rl;
}

MDNは、文書全体に設定する場合は、ルート要素（HTMLではhtml要素）に設定するよう案内しています。

文字の向き：text-orientation

縦書きでの、文字の向きはtext-orientationで決めます。W3Cの仕様では、既定値はmixedです。

値	意味
`mixed`	横書き専用の文字（英数字など）は、横倒しにする。縦書きの文字は、本来の向きで並べる
`upright`	横書き専用の文字も、立てた向きのまま並べる
`sideways`	すべての文字を、横倒しにする

日本語の本文は、既定のmixedで、かな・漢字は立って並びます。英数字を立てたい場合に、uprightを使います。本文全体にuprightを指定すると、英単語や数字も1文字ずつ縦に並ぶので、必要な部分だけに使うのが無難です。

2. ルビを付ける：ruby・rt

ルビは、HTMLのruby要素で書きます。ふりがなをrt、ふりがな非対応のときの代替表示をrpで書きます。

<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>

W3CのCSS Ruby Annotation Layoutによると、rpはルビに対応しない環境のための代替で、対応した環境では表示されません。ルビの位置はruby-positionで決めます。

値	意味
`over`	横書きでは上、縦書きでは右
`under`	横書きでは下、縦書きでは左
`alternate`	複数のルビの階層を、上下（縦書きでは左右）に交互に置く。仕様上の初期値

縦書きで、ルビを文字の右に置くなら、次のように書けます。

ruby {
  ruby-position: over;
}

この例では、ルビの文字の大きさは指定せず、リーダーの既定の見た目に任せています。

3. 縦中横にする：text-combine-upright

縦書きの中で、数字などを横向きにまとめて1文字分の枠に収める組み方を、縦中横（たてちゅうよこ）といいます。CSSでは、text-combine-uprightを使います。

値	意味
`none`	まとめない（初期値）
`all`	その要素の中身を、1文字分の枠に横向きに収める
`digits 2`	連続するASCIIの数字が2桁のとき、まとめる（桁数は2〜4で指定できる）

.tcy {
  text-combine-upright: all;
}

<p>三月<span class="tcy">12</span>日、春の雨が降っていた。</p>

digits 2のように桁数を指定する書き方は、本文全体の2桁の数字をまとめたいときに使えます。allは、まとめたい文字を、spanなどで囲んで使います。3桁以上の数字や英字をまとめたいときも、allを使う書き方があります。まとめた結果の見え方は、確認してください。

4. 傍点を付ける：text-emphasis

傍点（圏点）は、CSS Text Decorationのtext-emphasisで指定できます。

プロパティ	役割
`text-emphasis-style`	印の形。`dot`（小さな丸）・`circle`（大きな丸）・`sesame`（ごま）など。塗りつぶし（`filled`、既定）か、白抜き（`open`）
`text-emphasis-position`	印の位置。縦書きでは`left`か`right`。仕様は、日本語では`over right`が好ましいと説明している
`text-emphasis-color`	印の色。既定は文字色と同じ

.bouten {
  text-emphasis-style: sesame;
  text-emphasis-position: over right;
}

<p>それは<span class="bouten">本当</span>のことだった。</p>

傍点の対応は、リーダーによって違う可能性があります。この記事の確認時点で、リーダー別の対応は確認できていません。傍点が出なくても、文章が読めるかを確認してください。

縦書きの小さな完成例

ここまでを合わせた、最小のCSSの例です。

html {
  writing-mode: vertical-rl;
}

p {
  margin: 0;
  text-indent: 1em;
}

h1 {
  font-size: 1.6em;
  text-align: center;
}

ruby {
  ruby-position: over;
}

.tcy {
  text-combine-upright: all;
}

.bouten {
  text-emphasis-style: sesame;
  text-emphasis-position: over right;
}

本文の文字サイズと行間は、指定していません。

書き出したあとの確認点

縦書きの向き： 行が右から左へ進み、ページが右から左へめくれるか
ルビ： 文字の右に出るか、位置や文字の欠けがないか
縦中横： 数字が1文字分の枠に収まっているか
傍点： 出ているか。出ない場合、読めるか
目次： 縦書きでも、目次のリンクが正しく動くか

確認には、Kindle Previewerと、普段お使いのリーダーを使ってください。確認の項目は、高品質なEPUBを作るチェックリスト｜変換前から公開前までにまとめています。

結論：指定は少なく、確認は多く

表現	使うもの	仕様
縦書き	`writing-mode: vertical-rl`	CSS Writing Modes
文字の向き	`text-orientation`（既定は`mixed`）	CSS Writing Modes
ルビ	`ruby`・`rt`・`rp`、`ruby-position`	HTML、CSS Ruby
縦中横	`text-combine-upright`	CSS Writing Modes
傍点	`text-emphasis-style`・`-position`	CSS Text Decoration
設定（CSS以外）	`dc:language`、`page-progression-direction`、KDPの読む方向	EPUB 3.3、KDPヘルプ

よくある質問

縦書きにすると、Kindleできれいに表示されますか？

この記事の確認時点で、KDPの公式ヘルプから、縦書きEPUBでのルビ・縦中横・傍点の対応を確認できていません。Kindle Previewerで、端末ごとの見え方を確認してください。

英数字が横に倒れて読みにくいです。

text-orientation: mixed（既定）では、英数字は横倒しになります。2桁の数字などは縦中横にすると、読みやすくなる場合があります。英単語は、横倒しのままがよいか立てるかを、見た目を確認して決めてください。

傍点が出ません。

リーダーがtext-emphasisに対応していない可能性があります。リーダーを変えて確認してください。