border-right-styleかtext-decoration
AozoraEpub3ではborder-right-styleとborder-bottom-styleで書かれていて、電書協ではtext-decorationが使われている。ほかに、AozoraEpub3では線の太さを1pxで指定されている。電書協では傍線は、右と左の線しか指定されていないが、カラーが追加されている。
気になるのが、傍線は横書きのときは下線になる。縦書きのときは右線になる。青空文庫の左に二重傍線、左に鎖線、左に破線、左に波線がAozoraEpub3になかった。追加してもいいがどれくらいの端末で動くかが把握できない。
青空文庫にはないけど打消し線を追加するのもいいかもしれない。
<div style="text-decoration:line-through">打ち消し線</div>
電書協
<p><span class="em-line">あいアイ安以ABab12!?ＡＢａｂ１２！？</span> <span>に指定</p>
/* 【横組み】下線 【縦組み】右線 */
.hltr .em-line {
text-decoration: underline;
}
.vrtl .em-line {
text-decoration: overline;
}
/* 【横組み】上線 【縦組み】左線 */
.hltr .em-line-outside {
text-decoration: overline;
}
.vrtl .em-line-outside {
text-decoration: underline;
}
AozoraEpub3
縦書き
/* 傍線 */
span.underline, span.double_underline, span.dotted_underline, span.dashed_underline, span.wave_underline {
border-right-width: 1px;
padding-right: 1px;
}
span.underline {
border-right-style: solid;
}
span.double_underline {
border-right-width: 3px;
border-right-style: double;
}
span.dotted_underline {
border-right-style: dotted;
}
span.dashed_underline {
border-right-style: dashed;
}
span.wave_underline {
border-right-style: solid;/*wave;*/
}
span.left_underline {
border-left-style: solid;
padding-left: 1px;
border-left-width: 1px;
}
横書き
/* 傍線 */
span.underline, span.double_underline, span.dotted_underline, span.dashed_underline, span.wave_underline {
border-bottom-width: 1px;
padding-bottom: 1px;
}
span.underline {
border-bottom-style: solid;
}
span.double_underline {
border-bottom-width: 3px;
border-bottom-style: double;
}
span.dotted_underline {
border-bottom-style: dotted;
}
span.dashed_underline {
border-bottom-style: dashed;
}
span.wave_underline {
border-bottom-style: solid;/*wave;*/
}
span.left_underline {
border-top-style: solid;
padding-top: 1px;
border-top-width: 1px;
}
####傍線 (すべて傍線と同じ表現)
####傍線 (すべて傍線と同じ表現)
傍線 <span class="underline">
傍線終わり </span>
二重傍線 <span class="double_underline">
二重傍線終わり </span>
鎖線 <span class="dotted_underline">
鎖線終わり </span>
破線 <span class="dashed_underline">
破線終わり </span>
波線 <span class="wave_underline">
波線終わり </span>
左に傍線 <span class="left_underline">
左に傍線終わり </span>
変更後
試しに赤線を追加してみる。
/* 横組み打ち消し線
---------------------------------------------------------------- */
.line-through {
text-decoration: line-through;
}
/* 【横組み】下線 */
.em-line {
text-decoration: underline;
}
/* 【横組み】上線 */
.em-line-outside {
text-decoration: overline;
}
/* 【横組み】二重線 */
double_underline {
text-decoration:underline double;
}
/* 【横組み】鎖線 */
dotted_underline {
text-decoration:underline dotted;
}
/* 【横組み】破線 */
dashed_underline {
text-decoration:underline dashed;
}
/* 【横組み】波線 */
wave_underline {
text-decoration:underline wavy;
}
/* 【横組み】赤線 */
line-red {
text-decoration:underline red;
}
/* 【横組み】左に二重傍線 */
left_double_underline {
text-decoration:overline double;
}
/* 【横組み】左に鎖線 */
left_dotted_underline {
text-decoration:overline dotted;
}
/* 【横組み】左に破線 */
left_dashed_underline {
text-decoration:overline dotted;
}
/* 【横組み】左に波線 */
left_wave_underline {
text-decoration:overline wavy;
}
/* 【横組み】左に赤線 */
left-line-red {
text-decoration:overline red;
}
/*縦書き 打ち消し線
---------------------------------------------------------------- */
.line-through {
text-decoration: line-through;
}
/* 【縦組み】右線 */
.em-line {
text-decoration: overline;
}
/* 【縦組み】左線 */
.em-line-outside {
text-decoration: underline;
}
/* 【縦組み】二重線 */
double_underline {
text-decoration:overline double;
}
/* 【縦組み】鎖線 */
dotted_underline {
text-decoration:overline dotted;
}
/* 【縦組み】破線 */
dashed_underline {
text-decoration:overline dashed;
}
/* 【縦組み】波線 */
wave_underline {
text-decoration:overline wavy;
}
/* 【縦組み】赤線 */
line-red {
text-decoration:overline red;
}
/* 【縦組み】左に二重傍線 */
left_double_underline {
text-decoration:underline double;
}
/* 【縦組み】左に鎖線 */
left_dotted_underline {
text-decoration:underline dotted;
}
/* 【縦組み】左に破線 */
left_dashed_underline {
text-decoration:underline dotted;
}
/* 【縦組み】左に波線 */
left_wave_underline {
text-decoration:underline wavy;
}
/* 【縦組み】左に赤線 */
left-line-red {
text-decoration:underline red;
}
縦書き用
/* 打ち消し線
---------------------------------------------------------------- */
.line-through {
text-decoration: line-through;
}
/* 【縦組み】右線 */
.vrtl .em-line {
text-decoration: overline;
}
/* 【縦組み】左線 */
.vrtl .em-line-outside {
text-decoration: underline;
}
/* 【縦組み】二重線 */
double_underline {
text-decoration:overline double;
}
/* 【縦組み】鎖線 */
dotted_underline {
text-decoration:overline dotted;
}
/* 【縦組み】破線 */
dashed_underline {
text-decoration:overline dashed;
}
/* 【縦組み】波線 */
wave_underline {
text-decoration:overline wavy;
}
/* 【縦組み】赤線 */
line-red {
text-decoration:overline red;
}
/* 【縦組み】左に二重傍線 */
left_double_underline {
text-decoration:underline double;
}
/* 【縦組み】左に鎖線 */
left_dotted_underline {
text-decoration:underline dotted;
}
/* 【縦組み】左に破線 */
left_dashed_underline {
text-decoration:underline dotted;
}
/* 【縦組み】左に波線 */
left_wave_underline {
text-decoration:underline wavy;
}
/* 【縦組み】左に赤線 */
left-line-red {
text-decoration:underline red;
}
####傍線 (すべて傍線と同じ表現)
####傍線 (すべて傍線と同じ表現)
傍線 <span class="em-line">
傍線終わり </span>
二重傍線 <span class="double_underline">
二重傍線終わり </span>
鎖線 <span class="dotted_underline">
鎖線終わり </span>
破線 <span class="dashed_underline">
破線終わり </span>
波線 <span class="wave_underline">
波線終わり </span>
左に傍線 <span class="em-line-outside">
左に傍線終わり </span>
左に二重傍線 <span class="left_double_underline">
左に二重傍線終わり </span>
左に鎖線 <span class="left_dotted_underline">
左に鎖線終わり </span>
左に破線 <span class="left_dashed_underline">
左に破線終わり </span>
左に波線 <span class="left_wave_underline">
左に波線終わり </span>
打ち消し線 <span class="line-through">
打ち消し線終わり </span>
赤線 <span class="line-red">
赤線 <span class="line-red">
赤線終わり </span>
左に赤線 <span class="left-line-red">
左に赤線終わり </span>
