ePUBの外字/iBooksでの表示_画像_リベンジ
先の記事の末尾に記したように、件の処理を検証中に、twitterのTLには@kojiishiさんのヒントとなるtweetが流れ、その約2時間後には@MurakamiShinyuさんのtweetが流れることとなり、サンプルファイル（test-img-gaiji.epub）までご提供いただいた。
※上記tweet中にサンプルファイルへのリンクが張られているので入手可能だと思う
citeタグの流用で一応の成果は出たものの、この方法も試さない手はないとサンプルファイルを参考に、見よう見まねで書いてはみた……【test06】
ベースの【test01】のcssに以下をサンプルのママ追記*1し、
img.gaiji { width: 1em; height: 1em; vertical-align: text-top; } span.gaiji { display: inline-block; width: 1em; height: 1em; vertical-align: text-top; } span.gaiji>img { display: block; width: 100%; height: 100%; }
<p class="kihon-0">分が八屋根の「頒」は「<span class="gaiji"><img alt="頒" gaiji="gaiji" src="../Images/han_gaiji_han.svg" /></span>」です</p>
（これもほぼサンプルママ）などと変更した。
- 尚、上記xhtml中の「gaiji="gaiji"」部分はご本人に確認したところ操作ミスと判明…不要：特にワルサはしない模様
が、iBooksの表示は……
どうもうまくいかない。
3行を比較していただくと判るが、line-hightおよびtext-indentの設定が邪魔をするようで、画像がズレてしまう。
- 1行目/2行目を「line-height: 1.66em」としてあるのに対して3行目は「line-height: 1.00em」としてあり、1/3行目を「text-indent: 0.00em」としてあるのに対して2行目を「text-indent: 1.00em」としてある
※このように設定を変更して3行並べてみるとその原因は想像がつくが、私が当初試したのはホンチャンの設定である2行目だけだったので……
こうなってはとてもとても私の手に負える代物ではなく、イーパ部 in 大阪の副部長@usakororinさんに無理をいってお力添えを依頼し、いろいろ検証していただいた（※その時のtweet）結果、上記のように「line-hightおよびtext-indentの設定」が関係していることが判明し、最終的にspan.gaiji部分に
line-height: 1; text-indent: 0;
を追加した……【test07】
ひとまず成功。と思ったものの……また問題が……
上の画像の外字【頒】と【」】間に半角スペースがあるのが判ると思うが、これを拡大すると
このように画像が画面の拡大に追随してはくれない*3。
この半角スペースは先にも書いたようにSigilが勝手に「/span」と和字の間に追加してしまう悪い癖の産物*4。
それが追加される条件やタイミングは深く追求していないが、エディタで開くと以下の通り。
一度解凍し、例の半角スペースを削除後にePUB化したモノは……【test07_b】
拡大しても画像もそれに追随して拡大される。
※（SVG・外字otf）フォントの場合はciteタグの流用で表示可能ではあるが……この画像として外字を埋め込む方が無難だろうと思う。また、他のビューアも考慮に入れるなら、SVG形式の画像は避けた方がいいかもしれない。
いずれにしても、ePUBオーサリングソフトSigilおよびePUBリーダー/ビューワ全般の個別のクセには手を焼く……ということ。
4回に亘って連載した形になったが、「ePUBの外字/iBooksでの表示_memo」に纏めたように、記事中に挙げなかった方も含め、多くの方々のご助言・ご協力があってのこと、改めて感謝の意を表明しておく。
なお、この間のiBooks（iPad）の表示画像については@workstationmこと、大阪DTPの勉強部屋の主宰者えむさんにご協力いただいた。感謝を込めて記しておく。
