KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

数式のはいった電子書籍について 第3講

99nyorituryo.hatenablog.com

 前に続いて、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でどのように見えるかを試してみると、数式の大きさは問題がなさそうである。

f:id:kyukyunyorituryo:20151019003555j:plain

 やはり色を反転すると見えなくなる。

f:id:kyukyunyorituryo:20151019003614j:plain

次の課題は、色の問題について。

 そういえば、メディアクエリっていうので端末ごとにCSSを変えることができそうだなとKDPガイドラインを読んで思った。SVGの場合に、E Ink端末の時は黒にして、液晶の場合は青にすれば、背景色が変わっても表示に問題がなくなるかも。