なんでやねんDTP・新館

はてなダイアリーから移行しました…

iBooks上でのePUB_表示書体

(リフロー型の電子書籍フォーマットのひとつである)ePUBファイルの表示において、ビューワ/リーダそれぞれにクセ(仕様)のようなモノがあり、一様に表示されるわけではない(現在、その標準化に向けて作業が続けられている最中)。
そんなこともあって、今回あるePUB形式の電子書籍を作成するにあたり、一応のターゲットをiPadiBooks)としたワケだが、その表示には色々と問題のあることが判ってきた(昨日の記事もそのひとつ)。


そのいくつかを実例を挙げて紹介し、解決法があればそれも提示しておこうと思う。

  • 多くは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」で括ってはいないが*3css*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タグ」を流用することでしか指定書体での表示には成功していない。

*1:その検証には時間とともに端末も必要となる

*2:私が選択したのか、デフォルトなのか、今となっては不明

*3:実は括り忘れた

*4:図中では「citeで指定した…」となっているが間違い

*5:明朝体も大丈夫!

*6:なにしろアレコレと色々やりすぎた感があるので…

*7:もちろんwebサービスの翻訳を通して

*8:詳しくは未検証。違っていればまた追記するほぼ予想通りの検証結果を下部に追記した

*9:ただ、Sigilはbodyタグのすぐ内側にciteタグを挿入すると、pタグなどのブロックレベル要素の内側に必要な数だけ挿入してくれるような動作をするので、意外と使えるかもしれない

*10:何処か手順や挿入位置を間違えていたのかもしれないが…