なんでやねんDTP・新館

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

ePUBの外字/iBooksでの表示_外字フォント

さて次の手として、@（id:uakira）さんに作成したていただいたTrueTypeFontとOpenTypeFontをcssに組み込んだ……【test04】

@font-face {
  font-family: gaiji_ttf; src: url(../Fonts/gaiji.ttf);
}
@font-face {
  font-family: gaiji_otf; src: url(../Fonts/gaiji.otf);
}

xhtml（body部のttf部分）はフォントのマッピング*1に従って以下のように変更（同様なotf部分も追加）。

  <p class="kihon">TrueTypeFont仕様</p>
  <p class="kihon">分が八屋根の「頒」は「<span style="font-family:gaiji_ttf;">H</span>」です</p>
  <p class="kihon-1">分が八屋根の「頒」は「<span style="font-family:gaiji_ttf;">H</span>」です</p>
  <p class="kihon-0"><span><br /></span></p>
  <p class="kihon-0">分が八屋根の「頒」は「<span style="font-family:gaiji_ttf;">H</span>」です</p>
  <p class="kihon-0"><span><br /></span></p>
  <p class="kihon">TrueTypeFont仕様＋空rubyタグ</p>
  <p class="kihon"><ruby>分が八屋根の「頒」は「<span style="font-family:gaiji_ttf;">H</span>」です</ruby></p>
  <p class="kihon-1"><ruby>分が八屋根の「頒」は「<span style="font-family:gaiji_ttf;">H</span>」です</ruby></p>
  <p class="kihon-0"><span><br /></span></p>
  <p class="kihon-0"><ruby>分が八屋根の「頒」は「<span style="font-family:gaiji_ttf;">H</span>」です</ruby></p>


Sigilでの表示は以下の通り（すべて同様）。



再度、Code Viewで見ると……



先の記事の例と同じように、外字に付けたspanにはclassが設定され、head部にcssの記述が追加されているのが判るが、特に問題はない。


で、肝腎の表示だが……



となり、やや期待したが、iBooksでは



やはりアキマセン（すべて同様）。


ならばと、これもtwitter上で幾人かの方が言及されたPigs, Gourds, and Wikis: Beating iBooks Bugsにある裏技を適用することに……【test05】


先に書き換えられていた

span.sgc-2 {font-family:gaiji_otf;}
span.sgc-1 {font-family:gaiji_ttf;}

を

cite.sgc-2 {font-family:gaiji_otf;}
cite.sgc-1 {font-family:gaiji_ttf;}

に変更し、body部分のspanをciteに

 <p class="kihon">TrueTypeFont仕様</p>
  <p class="kihon">分が八屋根の「頒」は「<cite class="sgc-1">H</cite>」です</p>
  <p class="kihon-1">分が八屋根の「頒」は「<cite class="sgc-1">H</cite>」です</p>
（略）
  <p class="kihon"><ruby>分が八屋根の「頒」は「<cite class="sgc-2">H</cite>」です</ruby></p>
  <p class="kihon-1"><ruby>分が八屋根の「頒」は「<cite class="sgc-2">H</cite>」です</ruby></p>
  <p class="kihon-0"><span><br /></span></p>
  <p class="kihon-0"><ruby>分が八屋根の「頒」は「<cite class="sgc-2">H</cite>」です</ruby></p>

と変更した。


Adobe Digital Editionsなどでの表示は【test04】とほぼ同様だった（「H」はイタリック表示）が、iBooksでの表示は……



パチパチ！　ここ迄きて、やっと欲しい表示が得られた。
【OpenTypeFontをcssに組み込み、citeタグを流用する】ということになる。


で、ふと思い付いて先のSVGフォントの【test03】のxhtml

  <p class="kihon">分が八屋根の「頒」は「<span style="font-family:gaiji;">頒</span>」です</p>

などのspan部分を

  <p class="kihon">分が八屋根の「頒」は「<cite style="font-family:gaiji;">頒</cite>」です</p>

cite流用に変更したところ、iBooksでは……【test03_b】



と表示され、xhtmlに組み込んだSVGフォントの場合もciteタグを流用すれば大丈夫……ということになった。
いずれにしても、このciteタグ流用が後年の仕様変更に伴って文字化けを生む可能性があることも承知してはいるが……


なお、上記の処理を検証中にも、twitter上では画面上での拡大に追随する画像埋込みのヒント及び解決方法をご教示いただいき、引き続いてその方法にチャレンジすることになる……これも紆余曲折はあるものの、ある方のお力添えでちゃーんと成果が挙がる結果となる……近日明日（21日）公開の予定であります。


●主な参考になるページ（もちろん、すべての意味を理解できたワケではないが……）
・SVGフォント全般
・ヨモツネット: Web Fontsで SVG Fontsを利用する
・印刷どーなる？: SigilでePub体験してみる（その３：フォント編）
・高橋文樹.com: iBooks用のePub作成覚え書き
・Pigs, Gourds, and Wikis: Beating iBooks Bugs
・HowManyFilesの日記: 詳説EPUB（煉獄篇）
※ワケも判らずrubyタグを追加したのは上記ページの作者@（id:HowManyFiles）さんの以下のtweetを読んで……
その1, その2

*1:現在は別のコード位置にしてある