青空文庫で傍線で表していた部分が、電書協では罫線で表している部分がある。どっちの表記がいいのかわからないが、とりあえず青空文庫の方で書いている。機能を追加したければ追加すればいいかなと思う。
電書協では文字をぐるっと線で囲むだけではなく、上だけや下だけといった部分的な指定もできる。線の種類も多かったので鎖線と二重線を追加した。
####罫囲み 点線(鎖線)dotted、二重線double
罫囲み <span class="k-solid">
罫囲み終わり </span>
破線罫囲み <span class="k-dashed">
破線罫囲み終わり </span>
破線の罫囲み <span class="k-dashed">
破線の罫囲み終わり </span>
枠囲み <span class="k-solid">
枠囲み終わり </span>
破線枠囲み <span class="k-dashed">
破線枠囲み終わり </span>
ここから罫囲み <div class="k-solid"> 1
ここで罫囲み終わり </div> 1
ここから破線罫囲み <div class="k-dashed"> 1
ここで破線罫囲み終わり </div><br/> 1
ここから枠囲み <div class="k-solid"> 1
ここで枠囲み終わり </div> 1
ここから破線枠囲み <div class="k-dashed"> 1
ここで破線枠囲み終わり </div> 1
鎖線罫囲み <span class=".k-dotted">
鎖線罫囲み終わり </span>
二重線罫囲み <span class="k-double">
二重線罫囲み終わり </span>
ここから鎖線罫囲み <div class=".k-dotted"> 1
ここで鎖線罫囲み終わり </div> 1
ここから二重線罫囲み <div class="k-double"> 1
ここで二重線罫囲み終わり </div><br/> 1
/* 罫線
----------------------------------------------------------------
線種や線幅など、細かな調整が必要なときは、
無理に既存のクラスを用いず新たにクラスを作成すること
---------------------------------------------------------------- */
/* 線種【実線】 */
.k-solid-top,
.k-solid-right,
.k-solid-bottom,
.k-solid-left,
.k-solid-topbottom,
.k-solid-rightleft {
border-width: 1px;
border-color: #000000;
}
/* 線位置【実線】 */
.k-solid-top { border-style: solid none none none; }
.k-solid-right { border-style: none solid none none; }
.k-solid-bottom { border-style: none none solid none; }
.k-solid-left { border-style: none none none solid; }
.k-solid-topbottom { border-style: solid none solid none; }
.k-solid-rightleft { border-style: none solid none solid; }
/* 線種【点線】 */
.k-dotted-top,
.k-dotted-right,
.k-dotted-bottom,
.k-dotted-left,
.k-dotted-topbottom,
.k-dotted-rightleft {
border-width: 2px;
border-color: #000000;
}
/* 線位置【点線】 */
.k-dotted-top { border-style: dotted none none none; }
.k-dotted-right { border-style: none dotted none none; }
.k-dotted-bottom { border-style: none none dotted none; }
.k-dotted-left { border-style: none none none dotted; }
.k-dotted-topbottom { border-style: dotted none dotted none; }
.k-dotted-rightleft { border-style: none dotted none dotted; }
/* 線種【二重線】 */
.k-double-top,
.k-double-right,
.k-double-bottom,
.k-double-left,
.k-double-topbottom,
.k-double-rightleft {
border-width: 4px;
border-color: #000000;
}
/* 線位置【二重線】 */
.k-double-top { border-style: double none none none; }
.k-double-right { border-style: none double none none; }
.k-double-bottom { border-style: none none double none; }
.k-double-left { border-style: none none none double; }
.k-double-topbottom { border-style: double none double none; }
.k-double-rightleft { border-style: none double none double; }
/* 線種【破線】 */
.k-dashed-top,
.k-dashed-right,
.k-dashed-bottom,
.k-dashed-left,
.k-dashed-topbottom,
.k-dashed-rightleft {
border-width: 1px;
border-color: #000000;
}
/* 線位置【破線】 */
.k-dashed-top { border-style: dashed none none none; }
.k-dashed-right { border-style: none dashed none none; }
.k-dashed-bottom { border-style: none none dashed none; }
.k-dashed-left { border-style: none none none dashed; }
.k-dashed-topbottom { border-style: dashed none dashed none; }
.k-dashed-rightleft { border-style: none dashed none dashed; }
/* 線幅 */
.k-0px { border-width: 0; }
.k-1px { border-width: 1px; }
.k-2px { border-width: 2px; }
.k-3px { border-width: 3px; }
.k-4px { border-width: 4px; }
.k-5px { border-width: 5px; }
.k-6px { border-width: 6px; }
.k-7px { border-width: 7px; }
.k-8px { border-width: 8px; }
.k-thin { border-width: thin; }
.k-medium { border-width: medium; }
.k-thick { border-width: thick; }
/* １Ｃ用の線色 */
.k-black { border-color: #000000; }
.k-dimgray { border-color: #696969; }
.k-gray { border-color: #808080; }
.k-darkgray { border-color: #a9a9a9; }
.k-silver { border-color: #c0c0c0; }
.k-gainsboro { border-color: #dcdcdc; }
.k-white { border-color: #ffffff; }
/* 基本色 */
.k-red { border-color: #ff0000; }
.k-blue { border-color: #0000ff; }
.k-cyan { border-color: #00ffff; }
.k-magenta { border-color: #ff00ff; }
.k-orangered { border-color: #ff4500; }
/* 罫囲み
.border {
border: 1px solid #000;
margin: 0.25em;
padding: 0.25em;
}
破線罫囲み
.dashed_border {
border: 1px dashed #000;
margin: 0.25em;
padding: 0.25em;
}
打ち消し線と取り消し線が重複していたので解消。
打ち消し線 <span class="line-through">
打ち消し線終わり </span>
.line-through {
text-decoration: line-through;
}
取り消し線 二重
/* 取り消し線 */
.strike { text-decoration:line-through; }
.dbl_strike { text-decoration:line-through; }
