AozoraEpub3では青空文庫の注記をhtmlタグに変換するが、そのときに参照しているのが、chuki_tag.txtである。大見出しは<div class="chap1"> </div>に変換される。
電書協CSSでは「大見出し」はoo-midashiと指定されているので対応する部分も修正する必要がある。
/* 大見出し */
.hltr .oo-midashi {
}
スタイルシートの内容の違いだけでなく、クラス名や使われているタグも違う場合があるので修正箇所は多くなるだろう。ゴールとして、電書協CSSをそのまま入れ替えるようにしても。途中段階で差異をなくしていくという方向性のほうが無理がないと思う。
一旦入れ替えてみて不具合等が出るか確認してみる。
AozoraEpub3/chuki_tag.txt at master · kyukyunyorituryo/AozoraEpub3 · GitHub
電書協の扉はAozoraEpub3では左右中央となっている。
文字の大きさ
文字の大きさを変えるスタイルシートの書き方で気になった点は、電書協CSSでは大見出しに文字の大きさが指定されていないが、AozoraEpub3では文字の大きさが変化する。単純にCSSを入れ替えると、文字の大きさまで変わってしまう。
電書協CSS
/* 小書き文字
----------------------------------------------------------------
通常の文字を「ぁゃっ」のような小書き文字に見せるための指定
---------------------------------------------------------------- */
.kogaki {
font-size: 0.75em;
}
/* 【横組み】左下 */
.hltr .kogaki {
padding: 0 0.15em 0 0.1em;
vertical-align: baseline;
}
/* 【縦組み】右上 */
.vrtl .kogaki {
padding: 0.1em 0 0.15em 0;
vertical-align: super;
}
/* フォントサイズ（％指定） */
.font-050per { font-size: 50%; }
.font-060per { font-size: 60%; }
.font-070per { font-size: 70%; }
.font-075per { font-size: 75%; }
.font-080per { font-size: 80%; }
.font-085per { font-size: 85%; }
.font-090per { font-size: 90%; }
.font-100per { font-size: 100%; }
.font-110per { font-size: 110%; }
.font-115per { font-size: 115%; }
.font-120per { font-size: 120%; }
.font-130per { font-size: 130%; }
.font-140per { font-size: 140%; }
.font-150per { font-size: 150%; }
.font-160per { font-size: 160%; }
.font-170per { font-size: 170%; }
.font-180per { font-size: 180%; }
.font-190per { font-size: 190%; }
.font-200per { font-size: 200%; }
.font-250per { font-size: 250%; }
.font-300per { font-size: 300%; }
/* フォントサイズ（文字数指定） */
.font-0em50 { font-size: 0.50em; }
.font-0em60 { font-size: 0.60em; }
.font-0em70 { font-size: 0.70em; }
.font-0em75 { font-size: 0.75em; }
.font-0em80 { font-size: 0.80em; }
.font-0em85 { font-size: 0.85em; }
.font-0em90 { font-size: 0.90em; }
.font-1em { font-size: 1.00em; }
.font-1em10 { font-size: 1.10em; }
.font-1em15 { font-size: 1.15em; }
.font-1em20 { font-size: 1.20em; }
.font-1em30 { font-size: 1.30em; }
.font-1em40 { font-size: 1.40em; }
.font-1em50 { font-size: 1.50em; }
.font-1em60 { font-size: 1.60em; }
.font-1em70 { font-size: 1.70em; }
.font-1em80 { font-size: 1.80em; }
.font-1em90 { font-size: 1.90em; }
.font-2em { font-size: 2.00em; }
.font-2em50 { font-size: 2.50em; }
.font-3em { font-size: 3.00em; }
AozoraEpub3
/* 文字サイズ 大 */
.font1, .chap3 { font-size: 110%; }
.font2 { font-size: 120%; }
.font3, .chap2 { font-size: 130%; }
.font4 { font-size: 140%; }
.font5, .chap1 { font-size: 150%; }
.font6 { font-size: 160%; }
/* 文字サイズ 小 */
.font-1 { font-size: 90%; }
.font-2 { font-size: 83%; }
.font-3 { font-size: 77%; }
.font-4, .kogaki { font-size: 70%; }
.font-5 { font-size: 66%; }
.font-6 { font-size: 62%; }
見出し
電書協CSSではh1タグなどで見出しを指定している。AozoraEpub3ではそれがついていない。電書協CSSでは窓見出しがなかった。扉見出しは左右中央と同じ扱いである。ただ、AozoraEpub3ではtableタグで書かれている。
電書協
/* 見出しのデフォルト書体指定
---------------------------------------------------------------- */
/* 横組み用 */
.hltr h1,
.hltr h2,
.hltr h3,
.hltr h4,
.hltr h5,
.hltr h6 {
font-family: serif-ja, serif;
}
/* 縦組み用 */
.vrtl h1,
.vrtl h2,
.vrtl h3,
.vrtl h4,
.vrtl h5,
.vrtl h6 {
font-family: serif-ja-v, serif-ja, serif;
}
/* 見出しの指定（上：横組み 下：縦組み）
---------------------------------------------------------------- */
/* 扉見出し */
.hltr .tobira-midashi {
}
.vrtl .tobira-midashi {
}
/* 大見出し */
.hltr .oo-midashi {
}
.vrtl .oo-midashi {
}
/* 中見出し */
.hltr .naka-midashi {
}
.vrtl .naka-midashi {
}
/* 小見出し */
.hltr .ko-midashi {
}
.vrtl .ko-midashi {
}
AozoraEpub3
/* 見出し*/
.chap1, .chap2, .chap3 {
clear: both;
}
/* 窓見出し 行頭2行のみ対応 */
span.mado {
float: left;
display: inline-block;
line-height: 1em;
}
/* 窓見出し 左右paddingは (lineheight-文字サイズ/2)/文字サイズ */
span.mado.L { font-size:1.5em; padding:0 0.625em 0.33em 0; line-height:1em;}
span.mado.M { font-size:1.3em; padding:0 0.846em 0.38em 0; line-height:1em;}
span.mado.S { font-size:1.1em; padding:0 1.091em 0.45em 0; line-height:1em;}
vertical_middle.css
/* 左右中央 */
table.middle td {
vertical-align: middle;
}
/* kindle左右中央 */
div.kindle_outer {
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-epub-writing-mode: horizontal-tb;
text-align: center;
width:100%;
margin: 0;
padding: 0;
line-height: 0;
}
div.kindle_outer.bottom {
text-align: left;
}
div.kindle_inner {
display: inline-block;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
text-align: left;
line-height: 1.5;
height: 95%;
}
圏点・傍点
同じ内容について書かれている場合も電書協では2つの指定方法で、AozoraEpub3では3つで書かれている。電書協では10種類、AozoraEpub3では12種類で数が違う。left_empとx-dotが追加されている。ばつ傍点と左に傍点がそれぞれである。
電書協
/* 圏点・傍点
---------------------------------------------------------------- */
.em-sesame {
-webkit-text-emphasis-style: filled sesame;
-epub-text-emphasis-style: filled sesame;
}
.em-sesame-open {
-webkit-text-emphasis-style: open sesame;
-epub-text-emphasis-style: open sesame;
}
.em-dot {
-webkit-text-emphasis-style: filled dot;
-epub-text-emphasis-style: filled dot;
}
.em-dot-open {
-webkit-text-emphasis-style: open dot;
-epub-text-emphasis-style: open dot;
}
.em-circle {
-webkit-text-emphasis-style: filled circle;
-epub-text-emphasis-style: filled circle;
}
.em-circle-open {
-webkit-text-emphasis-style: open circle;
-epub-text-emphasis-style: open circle;
}
.em-double-circle {
-webkit-text-emphasis-style: filled double-circle;
-epub-text-emphasis-style: filled double-circle;
}
.em-double-circle-open {
-webkit-text-emphasis-style: open double-circle;
-epub-text-emphasis-style: open double-circle;
}
.em-triangle {
-webkit-text-emphasis-style: filled triangle;
-epub-text-emphasis-style: filled triangle;
}
.em-triangle-open {
-webkit-text-emphasis-style: open triangle;
-epub-text-emphasis-style: open triangle;
}
AozoraEpub3
/* 圏点 */
span.sesame {
text-emphasis-style: sesame;
-webkit-text-emphasis-style: sesame;
-epub-text-emphasis-style: sesame;
}
span.open_sesame {
text-emphasis-style: open sesame;
-webkit-text-emphasis-style: open sesame;
-epub-text-emphasis-style: open sesame;
}
span.dot {
text-emphasis-style: dot;
-webkit-text-emphasis-style: dot;
-epub-text-emphasis-style: dot;
}
span.open_dot {
text-emphasis-style: open dot;
-webkit-text-emphasis-style: open dot;
-epub-text-emphasis-style: open dot;
}
span.circle {
text-emphasis-style: circle;
-webkit-text-emphasis-style: circle;
-epub-text-emphasis-style: circle;
}
span.open_circle {
text-emphasis-style: open circle;
-webkit-text-emphasis-style: open circle;
-epub-text-emphasis-style: open circle;
}
span.double-circle {
text-emphasis-style: double-circle;
-webkit-text-emphasis-style: double-circle;
-epub-text-emphasis-style: double-circle;
}
span.open_double-circle {
text-emphasis-style: open double-circle;
-webkit-text-emphasis-style: open double-circle;
-epub-text-emphasis-style: open double-circle;
}
span.triangle {
text-emphasis-style: triangle;
-webkit-text-emphasis-style: triangle;
-epub-text-emphasis-style: triangle;
}
span.open_triangle {
text-emphasis-style: open triangle;
-webkit-text-emphasis-style: open triangle;
-epub-text-emphasis-style: open triangle;
}
span.x-dot {
text-emphasis-style: '×';
-webkit-text-emphasis-style: '×';
-epub-text-emphasis-style: '×';
}
span.left_emp {
text-emphasis-position: under;
-webkit-text-emphasis-position: under;
-epub-text-emphasis-position: under;
}
電書協CSS対応が終わったら休みたい、まだ続きそう。
