前に続いて、EPUBに数式を入れていく、今回はCSSをいじる。
epub cafe:フォントを埋め込む
文字を画像として読み込む方法を書いていたが、CSSが見た感じ縦書き用だったので、横書きにするためにwidthをheightにした。数式が1段の場合は1emで2段のような分数の場合2emにしたが2.6emぐらいがいいかもしれない。
span.equals10 {
display: inline-block;
height: 1em;
}
span.equals10 img {
height: 100%;
}
span.equals20 {
display: inline-block;
height: 2em;
}
span.equals20 img {
height: 100%;
}
htmlの方は、
<img src="bvtl.png" alt="磁束" /><br />
spanタグで囲んでいるだけです。
<span class="equals10"><img src="bvtl.png" alt="磁束" /></span><br />
実際にreadiumでどのように見えるかを試してみると、数式の大きさは問題がなさそうである。
やはり色を反転すると見えなくなる。
次の課題は、色の問題について。
そういえば、メディアクエリっていうので端末ごとにCSSを変えることができそうだなとKDPガイドラインを読んで思った。SVGの場合に、E Ink端末の時は黒にして、液晶の場合は青にすれば、背景色が変わっても表示に問題がなくなるかも。