ePUBの外字/iBooksでの表示_SVGフォント
前回の記事にあるように、画面表示上の拡大に追随すべき外字としての画像を含んだePUBを、iBooksで正常に表示させるのはちょっと難しそうだということが判った*1。
その後の展開をここにmemo的に記しておこうと思い、新たにePUBファイルを作成しつつ再検証してみた*2。
- こういうことでもあるが……。
尚、私の12月11日の私のtweetから始まる関連tweet群を「ePUBの外字/iBooksでの表示_memo」として纏めておいたのでご参考まで。
で、先の記事の脚注に書いたように@uakira2（id:uakira）さんが「SVGフォント生成のお手伝いを」とお声をかけてくださった*3。さらにタイミングよく、ちょうど同じ日に@kojiishiさんからSVGフォントをxhtmlのhead部に埋め込んだサンプルをいただいた*4。
お言葉に甘えてグリフデータをSVG形式で書き出したモノと件のサンプルを@uakira2さんにお送りし、その日の夜には「SVGフォント埋め込みのxhtml見本」として返送していただいた。
まず、以下のようないたってシンプルなひな形を作成しベースとした……【test01】
- 2ブロックあるが、2ブロック目はpタグ直下に空span【test01/02】あるいは空ruby【test03】タグをかませてある…その理由は末尾のリンク参照…でも効果ないみたい…理解不足なので何処か間違っているのかも知れない
cssの設定（一部）は
p.kihon { font-family: "ヒラギノ明朝 ProN W3"; line-height: 1.66em; font-size: 1.00em; 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); } p.kihon-1 { font-family: "ヒラギノ明朝 ProN W3"; 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-0 { font-family: "ヒラギノ明朝 ProN W3"; line-height: 1.00em; font-size: 1.00em; 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); }
xhtml（一部）は
<p class="kihon">分が八屋根の「頒」は「頒」です</p> <p class="kihon-1">分が八屋根の「頒」は「頒」です</p> <p class="kihon-0"><span><br /></span></p> <p class="kihon-0">分が八屋根の「頒」は「頒」です</p>
とシンプルなもので、その差は1行目/2行目を「line-height: 1.66em」としてあるのに対して3行目は「line-height: 1.00em」としてあり、1/3行目を「text-indent: 0.00em」としてあるのに対して2行目を「text-indent: 1.00em」としてあるだけ*6。
このhead部分にSVGフォントを組み込み、本文中の2文字目：後ろの「頒」にも変更を加える……【test02 & 03】
尚、この作業はePUBファイルを解凍し、textエディタで処理し、再度圧縮するという手順が必要だった。
何故なら、以下が出来上がったePUBファイルをSigilで開いた画面だが……
重要なSVGフォントの部分が自動的にbody部分に移されてしまうから*7。
- 今回の一連の作業中にもう一つ気付いたのはこういうこと。
さて、出来たところで表示テスト（【test02 & 03】とも表示は同じ）。
calibreのみ外字が表示できている。もう少し拡大してみたのが下の画像（上）。
尚、下部分はSafariでxhtmlを表示してみたモノで、これも大丈夫ということで iBooks での表示に期待したが……
結局は、残念な結果に終わってしまった（【test02 & 03】とも表示は同じ）。
これはspanタグでフォントを変更することを不可能としたiBooksの仕様によるものだろうが……こんな場合は困ったことになる。
※後日、spanタグの代わりにciteタグを流用することでSVGフォントも表示されることが判った。次の記事の末尾に画像も添えて記載している。（20101220追記）
上記の検証と並行して、twitter上の話の流れを読み取って@uakira2さんが（従来よくやっていた）欧文シンボルフォントとして生成しましょうかとお声をかけてくださり、件のグリフデータからTrueTypeFontとOpenTypeFontを作成していただいた……この件は次回に……一応の成果は挙がるのでご期待ください（もう出来ているので20日正午頃更新予定）。
●主な参考になるページ（もちろん、すべての意味を理解できたワケではないが……）
・SVGフォント全般
・ヨモツネット: Web Fontsで SVG Fontsを利用する
・印刷どーなる？: SigilでePub体験してみる（その３：フォント編）
・高橋文樹.com: iBooks用のePub作成覚え書き
・Pigs, Gourds, and Wikis: Beating iBooks Bugs
・HowManyFilesの日記: 詳説EPUB（煉獄篇）
※ワケも判らずrubyタグを追加したのは上記ページの作者@HowManyFiles（id:HowManyFiles）さんの以下のtweetを読んで……
その1, その2
*1:後に別の方法を教えていただくのだが……それはまた改めて
*2:実際に使用したモノでは説明不足で判り難いだろうから
*5:このことは同じ日に@lost_and_found（id:lost_and_found）さんからも「埋め込みフォント使えないとはCSS WebFontがサポートされていないという意味です」とご助言をいただいている_これもtwitterのDMにて
*6:今回の記事内容の検証には直接関係ないが、後に問題となる……
