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

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

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

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

この３つがスタイルシートで、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