AozoraEpub3の電書協css対応作業４ 傍点、圏点

 HTMLだと普通はemタグを使うのだけど、電書協ではemタグではなくspanタグで書かれていた。AozoraEpub3もspanタグを使っているので変更箇所はclass名とstylesheetかな。emはEmphasisの略で強調という意味。

傍点

電書協

<p>ゴマ点→この<span class="em-sesame">例の文章</span>は<span class="em-sesame-open">サンプル</span>です（em-sesame [-open]）</p>

.em-sesame {
-webkit-text-emphasis-style: filled sesame;
-epub-text-emphasis-style: filled sesame;
}

AozoraEpub3

<span class="sesame"> 傍点 </span>

span.sesame {
text-emphasis-style: sesame;
-webkit-text-emphasis-style: sesame;
-epub-text-emphasis-style: sesame;
}

スタイルシートの書き方を見ると、AozoraEpub3ではspanタグ内だけに限定している。

変更後

/* 圏点 */
/* 傍点 */
/*
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;
}
*/
/* 圏点・傍点
---------------------------------------------------------------- */
.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;
}

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;
}

chuki_tag.txt

############## 強調 ##############
####圏点
傍点 <span class="em-sesame"> 2
傍点終わり </span> 3

白ゴマ傍点 <span class="em-sesame-open"> 2
白ゴマ傍点終わり </span> 3

丸傍点 <span class="em-dot"> 2
丸傍点終わり </span> 3

白丸傍点 <span class="em-dot-open"> 2
白丸傍点終わり </span> 3

黒三角傍点 <span class="em-triangle"> 2
黒三角傍点終わり </span> 3

白三角傍点 <span class="em-triangle-open"> 2
白三角傍点終わり </span> 3

二重丸傍点 <span class="em-double-circle-open"> 2
二重丸傍点終わり </span> 3

蛇の目傍点 <span class="em-double-circle"> 2
蛇の目傍点終わり </span> 3

ばつ傍点 <span class="x-dot"> 2
ばつ傍点終わり </span> 3
×傍点 <span class="x-dot"> 2
×傍点終わり </span> 3

左に傍点 <span class="left_emp em-sesame"> 2
左に傍点終わり </span> 3

左に白ゴマ傍点 <span class="left_emp em-sesame-open"> 2
左に白ゴマ傍点終わり </span> 3

左に丸傍点 <span class="left_emp em-dot"> 2
左に丸傍点終わり </span> 3

左に白丸傍点 <span class="left_emp em-dot-open"> 2
左に白丸傍点終わり </span> 3

左に黒三角傍点 <span class="left_emp em-triangle"> 2
左に黒三角傍点終わり </span> 3

左に白三角傍点 <span class="left_emp em-triangle-open"> 2
左に白三角傍点終わり </span> 3

左に二重丸傍点 <span class="left_emp em-double-circle-open"> 2
左に二重丸傍点終わり </span> 3

左に蛇の目傍点 <span class="left_emp em-double-circle"> 2
左に蛇の目傍点終わり </span> 3

左にばつ傍点 <span class="left_emp x-dot"> 2
左にばつ傍点終わり </span> 3
左に×傍点 <span class="left_emp x-dot"> 2
左に×傍点終わり </span> 3