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

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

広告

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

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

プライバシーポリシー

 

AozoraEpub3の電書協css対応作業5 傍線

 

99nyorituryo.hatenablog.com

 

border-right-styleかtext-decoration

AozoraEpub3ではborder-right-styleとborder-bottom-styleで書かれていて、電書協ではtext-decorationが使われている。ほかに、AozoraEpub3では線の太さを1pxで指定されている。電書協では傍線は、右と左の線しか指定されていないが、カラーが追加されている。

 

 気になるのが、傍線は横書きのときは下線になる。縦書きのときは右線になる。青空文庫の左に二重傍線、左に鎖線、左に破線、左に波線がAozoraEpub3になかった。追加してもいいがどれくらいの端末で動くかが把握できない。

 

 青空文庫にはないけど打消し線を追加するのもいいかもしれない。

<div style="text-decoration:line-through">打ち消し線</div>

www.tohoho-web.com

電書協

<p><span class="em-line">あいアイ安以ABab12!?ABab12!?</span> &lt;span&gt;に指定</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>