縦書き電子書籍で最低限のスタイルシート

2013/10/3 [13:09:18] (木)

「何を今さら」なんだけどちょくちょく聞かれることがあったりするし、自分整理のためにも。
仕事がらみや公開している easy_epub で使っているスタイルシートから抜き出してメモ（文字通り備忘録）。
とりあえずこれだけでシンプルな縦書きの電子書籍となります（EPUB3チェックではValid）

body
デフォルトで縦書きを指定。
writing-mode:vertical-rl→縦書き(vertical)で、右(right)から左(left）という指定
line-height（行間）は1.75（横書きだと改行の多い文書はスカスカに見えるので1.6ぐらいがいい塩梅だと思う）

body.vertical
縦書きの指定。bodyと同じ。

body.horizontal
横書きの指定。
writing-mode:horizontal-tb→横書き(horizontal)で、上(top)から下(bottom）という指定。

.vertical と .horizontal を作っておくと、ページ単位で縦書き／横書きの指定が簡単。
「本文はデフォルトの縦だけど奥付は横書き」とか「扉ページ＝縦書き中央配置のページを作るための小細工のため」に使う。
body{ writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; line-height: 1.75; text-align: justify; margin:0; padding:0; font-size:100%; } body.vertical { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; } body.horizontal{ writing-mode:horizontal-tb; -epub-writing-mode:horizontal-tb; -webkit-writing-mode:horizontal-tb; }

縦中横
縦書きに混じる!?や平成25年、ABCなどの半角英数字や記号などを正立させる。リーダーによって何文字まで正立するか違いがあるので、2文字ぐらいまでが安全なところかな。
.tcy { font-size:0.9em; letter-spacing:-0.1ex; text-combine: horizontal; -webkit-text-combine: horizontal; -epub-text-combine: horizontal; }
縦書き関連はここまで。

以下はわたしが普段使い回ししている＝使用頻度の高いスタイル設定

傍点
sesamiはゴマみたいな形、dotは丸。縦書きの場合はゴマ、横書きの場合は丸というのが好み。
.sesami { text-emphasis-style : sesame; text-emphasis-color : #333333; -epub-text-emphasis-style : sesame; -epub-text-emphasis-color : #333333; -webkit-text-emphasis-style : sesame; -webkit-text-emphasis-color : #333333; } .ten { text-emphasis-style : dot; text-emphasis-color : #333333; -epub-text-emphasis-style : dot; -epub-text-emphasis-color : #333333; -webkit-text-emphasis-style : dot; -webkit-text-emphasis-color : #333333; }

h（見出し）タグ
何も指定をしないと、リーダーのデフォルト設定となり、思った以上に大きい文字になることが多いと思う。ので、ここで文字サイズなど指定しておく。
h1{ text-indent:0em; font-size:1.1em; font-weight:bold; } h1.normal-title{ margin:0em 1em 0em 2em; } h2{ text-indent:1em; font-size:1.1em; font-weight:bold; } h3{ text-indent:2em; font-size:1em; font-weight:bold; }

imgタグ
google play ブックスなどの場合、デバイスの表示領域以上の大きいサイズの画像を全部表示しようとして画面をハミ出してしまってびっくりすることになる。なのでここで最大サイズを100%と指定しておく。
（kindleはmax-width、max-heightに対応していないので、kindlegenで変換すると警告がでるけど無問題）
img{ max-width:100%; max-height:100%; }

pタグ
段落タグ
文書、元テキストは段落単位にしておくのが基本。リフローは改行位置が決まらないので、改行したければBRタグを使うか、空のpタグを使う。

p.line-indent1
リーダーのデフォルトがどうなってるのかよくわからないので、行頭の一字下げはなしにしておいて、行頭字下げのコントロールはスタイルシートでする。
p.paragraph-indent1
段落を字下げしたいリクエストもあるので用意しておいた
p{ text-indent:0; margin:0; } p.line-indent1{ text-indent:1em; } p.line-indent05{ text-indent:0.5em; } /* 字下げ */ p.paragraph-indent1{ padding-top:1em; } p.paragraph-indent2{ padding-top:2em; } p.paragraph-indent3{ padding-top:3em; }

扉ページ（縦書き中央配置）
具体的なXHTMLと指定のしかたはこちら→ 『EPUB3リフローレイアウトで扉ページ』
ページを横方向にして、縦書きにしたいタイトルを入れたdivなどのブロック要素をセンタリングして、ブロックの中を縦書きにする。
div.tobira-text{ margin-left:auto; margin-right:auto; margin-top:1em; -epub-writing-mode:vertical-rl; writing-mode:vertical-rl; height:100%; } div.tobira-text h1{ font-size:1.2em; text-indent:1em; }
他、もろもろ本体は『macOSでEPUB3作成』にあるMac版、Windows版のeasy_epub.zipの中に入っています。このツールで作ったファイルをそのままkindleの登録に使ってます。

電子書籍のスタイルシートは「緊デジのテンプレート」なども公開されていて、中をみるといろんなパターンがあってとても参考になります。おすすめ。

わたしがEPUB3を始めたきっかけは以下の記事とCSS。ひたすら大感謝です。

・期待の電子書籍フォーマット『EPUB3.0』で電子書籍を作ってみよう
・草枕を作ろう　縦書きHTML簡単作成ガイド