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

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

広告

今までに出版した電子書籍

Amazon.co.jp: 急急如律令: Kindleストア

プライバシーポリシー

 

電書協CSSとAozoraEpub3のCSSの比較1 縦中横、上付き、下付き

なぜ、これをするかというと、AozoraEpub3のCSSの最終的な完成イメージが沸かないからです。

AozoraEpub3のCSSで縦書きの本文ページを見ていきます。

  1. vertical_text.vm
  2. vertical.css
  3. vertical_font.css

この3つがスタイルシートで、vmとなっているのがテンプレートエンジンのvelocityを使っている。

Apache Velocity - Wikipedia

テンプレートエンジンは書き換える部分を予め ${pageMargin[0]}のような形式に指定しておくと、データを置き換えて出力してくれる。

AozoraEpub3のアプリケーションから設定で「スタイル」を選んだところの数字がこの部分に置き換えられている。つまりスタイルシートをただ単に電書協CSSに置き換えるとこの機能が使えなくなる。

 

なので、テンプレートエンジンが利用されている部分については後回しとする。

 

電書協CSSの主要な部分で、機能が同じだけで書かれ方が違うものについて比較する。

 

縦中横

電書協CSSのstyle-standard.cssでは

/* 縦中横
---------------------------------------------------------------- */
.tcy {
-webkit-text-combine: horizontal;
-webkit-text-combine-upright: all;
text-combine-upright: all;
-epub-text-combine: horizontal;
}

AozoraEpub3のCSSのvertical.cssでは

/* 縦中横 */
/* 外字画像と重ならない対策 ※有効にすると字下げ折り返し内で画面外にずれる */
/*span.tcy { display: inline-block; }*/
.tcy span {
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}

 

違いは、spanタグを指定しているか、-webkit-text-combine-upright: all;
text-combine-upright: all;と-webkit-text-combine: horizontal;が異なっている。

 

上付け、下付け

電書協CSS

/* 上付文字・下付文字
---------------------------------------------------------------- */
/* 上付文字 */
.super {
font-size: smaller;
vertical-align: super;
}
/* 下付文字 */
.sub {
font-size: smaller;
vertical-align: sub;
}

 

AozoraEpub3のCSS

/* 行右小書き 上付き小文字 */
.sup {
vertical-align: super;
font-size: 0.66em;
}
/* 行左小書き 下付き小文字 */
.sub {
vertical-align: sub;
font-size: 0.66em;
}

文字を小さくするときの指定の仕方が違う。

 

長くなってきたので記事を分けます。

honttoni.blog74.fc2.com