iBooks上でのePUB_表示書体
(リフロー型の電子書籍フォーマットのひとつである)ePUBファイルの表示において、ビューワ/リーダそれぞれにクセ(仕様)のようなモノがあり、一様に表示されるわけではない(現在、その標準化に向けて作業が続けられている最中)。
そんなこともあって、今回あるePUB形式の電子書籍を作成するにあたり、一応のターゲットをiPad(iBooks)としたワケだが、その表示には色々と問題のあることが判ってきた(昨日の記事もそのひとつ)。
そのいくつかを実例を挙げて紹介し、解決法があればそれも提示しておこうと思う。
- 多くはWeb上でも指摘されており、いくつかは解決方法も公開されている。しかし、その解決方法を用いたが故に他のビューワ/リーダでの表示が崩れることは極力避けたいところだが……*1。
まず、現状では「ヒラギノ角ゴ ProN W3」でしか表示できない書体の件だが、これは以前の記事でも紹介した「cite」タグを流用する方法で、以下のような表示が可能だ。
cssの設定(関係箇所のみ)は
h2 { font-family: "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", sans-serif; line-height: 1.33em; font-size: 1.33em; margin-bottom: 1.00em; margin-top: 2.00em; text-indent: 0.00em; margin-right: 0.00em; margin-left: 0.00em; text-align: justify; font-weight: normal; font-style: normal; color: rgb(0,0,0); } p { font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", serif; line-height: 1.66em; font-size: 1.00em; margin-bottom: 0.00em; margin-top: 0.00em; text-indent: 1.00em; margin-right: 0.00em; margin-left: 0.00em; text-align: justify; font-weight: normal; font-style: normal; color: rgb(0,0,0); } p.kihon-2-2 { text-indent: -1.00em; margin-left: 2.00em; }
xhtmlは(cite関係の記述は、このhead部に埋め込んだ)
<!-- (省略) --> <style type="text/css"> h2 cite { font-family: "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", sans-serif; font-style: normal; } p cite { font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", serif; font-style: normal; } cite.W6-m { font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", serif; font-style: normal; } </style> </head> <body> <!-- (省略) --> <h2 id="heading_id_3">1. 表示書体</h2> <p><cite>まず、表示書体の件は「cite」タグを流用し、そこにfont-familyを書きこむことで解決する。これはcssで、例えば<cite class="W6-m">p要素の子要素(セレクタ)として設定してもいい</cite>し、citeタグの<cite class="W6-m">classを利用して書体を指定してもいい</cite>だろう。xhtmlでは前者は「空のciteタグ」で括ればいいし、後者はそのまま「cite=class名」を書き込めばいい。</cite></p> <p><cite>ただし、一般的にはヒラギノ4書体のみ(フォントデータも同梱すれば他の書体でも可能か…)。</cite></p> <p class="kihon-2-2">※この例では「h2」要素(「1. 表示書体」部分)の場合には、「空cite」で括らなくてもciteで指定した書体で表示されている(ヒラギノ角ゴ ProN W6で表示)。</p> </body> </html>
となっている。
- 念のため、他のビューワなどでイタリック表示になるのを避ける意味で「font-style: normal」とした。
- 最後の段落は「cite」で括っていないのでデフォルト(?)の「ヒラギノ角ゴ ProN W3」で表示され、英数字のみTimes New Roman*2となっているのがわかるだろう。
しかし、何故か「h2」部分は「cite」で括ってはいないが*3、css*4で指定した「ヒラギノ角ゴ ProN W6」で表示されている。
実際に進めている本体の方でも、「h」要素部分やリスト部分はcssでの指定が効く*5ようになっているが、どのようなタイミングからかは判然としない*6。
再度、Pigs, Gourds, and Wikis: Beating iBooks Bugsを読んでみる*7と……div要素、span要素およびp要素にfont-familyの指定が効かないようなことが書いてあるだけで、h要素やリスト要素は挙げられていない。
ここで思い出したのは、当初はInDesignが書き出す「font-family: "ヒラギノ角ゴ ProN"」などを「font-family: "ヒラギノ角ゴ ProN W6"」と修正していただけだったのを、「font-family: "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", sans-serif;」と修正したこと。これが功を奏したのではないかと推測される*8。ココ重要!
ならばbody要素にfont-familyを指定すればどうなるのか?(※これはダメでした) あるいはbody直下にciteを流用して書体指定をしてやればどうなるのか?(※これはインライン要素なので無理! 不勉強でした)*9これは、追って検証する。
また、書体指定を活かす別の方法としては「p要素の内容を空spanタグあるいはrubyタグで括る」というテもあるようだが、私の場合うまくいかなかった*10。
参照
今日も、「MacBook Air 11インチ欲しい!」と書いておこう!
-
-
-
-
-
-
- -
-
-
-
-
-
●以下、公開当日の夜_追記
上記のh要素に書体指定が効く件について、以下のようなファイルを作成して検証してみた。
cssに
h1 { line-height: 1.25em; font-size: 1.67em; margin-bottom: 0.00em; margin-top: 0.50em; text-indent: 0.00em; margin-right: 0.00em; margin-left: 0.00em; text-align: left; font-weight: normal; font-style: normal; color: rgb(0,0,0);} h1.abc {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", serif;} h1.ab {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6";} h1.ac {font-family: "ヒラギノ明朝 ProN W6", serif;} h1.bc {font-family: "HiraMinProN-W6", serif;} h2 { line-height: 1.25em; font-size: 1.33em; margin-bottom: 0.00em; margin-top: 0.00em; text-indent: 0.00em; margin-right: 0.00em; margin-left: 0.00em; text-align: justify; font-weight: normal; font-style: normal; color: rgb(0,0,0);} h2.abc {font-family: "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", sans-serif;} h2.ab {font-family: "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6";} h2.ac {font-family: "ヒラギノ角ゴ ProN W6", sans-serif;} h2.bc {font-family: "HiraKakuProN-W6", sans-serif;}
xhtmlには
<body style=""> <h1 class="abc">1. 表示書体</h1> <h2 class="abc">●フォント名とfont nameと総称名</h2> <h1 class="ab">1. 表示書体</h1> <h2 class="ab">●フォント名とfont name(総称名なし)</h2> <h1 class="ac">1. 表示書体</h1> <h2 class="ac">●フォント名と総称名(font nameなし)</h2> <h1 class="bc">1. 表示書体</h1> <h2 class="bc">●font nameと総称名(フォント名なし)</h2> </body>
とし、
iBooks上で表示させると……
この結果からは、英文のfont-nameが必須であるようだと判る。
私は以下のように記述することにしている。
font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", serif;
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", serif;
font-family: "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", sans-serif;
font-family: "ヒラギノ角ゴ ProN W6", "HiraKakuProN-W6", sans-serif;
※現在、h要素以外にはli要素でも大丈夫なのを確認しているが、それ以外は「citeタグ」を流用することでしか指定書体での表示には成功していない。