11月 6, 2012
kamata

【EPUB】iBooksで外字画像が本文サイズにならない①

鎌田です。

iBooksで外字を画像(インライングラフィック)で処理したEPUBを表示させると、文字サイズと比例した大きさになりませんでした。iBooks2、3でも。

Digital EditionsやReadiumでは文字サイズに追随しますが、iBooksではダメでした。

CSSは下記の通り。

img.gaiji{
display: inline-block;
width: 1em;height: 1em;
vertical-align: text-top;
}
htmlは、こんな感じでした。
○○○○<img alt=”" class=”gaiji” src=”../Images/gaiji99.JPG” />○○○○

またまた闘いの始まり〜。ググってみても、なかなか見つかりません。

2時間後、次の情報を得た。

http://d.hatena.ne.jp/works014/20101221

この通りにやってみる。

CSSは、

img.gaiji{
width: 1em;
height: 1em;
vertical-align: text-top;
}
span.gaiji {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-top;
line-height: 1;
text-indent: 0;
}
span.gaiji>img {
display: block;
width: 100%;
height: 100%;
}
htmlは、
○○○○<span class=”gaiji”><img alt=”" class=”gaiji” src=”../Images/gaiji0.JPG” /></span>○○○○
この対応で、文字サイズに追随する外字設定ができました!
情報提供者様に感謝です。

1 Comment

Leave a comment