CSSで分割しない2倍ダーシ(ダッシュ記号)
途中で分離しない
どんなフォントでも間が開かない
前提:
和文組版のただしいダーシ記号を使う
——
code:html
吾輩は<span class="letter-dash">——</span>猫である。
code:scss
.letter-dash {
padding: 0;
display: inline-block;
color: transparent;
background-image: linear-gradient($fontcolor, $fontcolor); //文字色と同じ色で
background-position: center center;
background-size: 87.5% 1px; //後述
background-repeat: no-repeat;
text-decoration: none;
}
テキストではダーシのままなので意味の一貫性がGOOD
background-size: 100% 1px; では前後の文字とダーシがつまる
ダーシの前後8分アキ(文字サイズの1/8の長さのアキ)になるように、100% * 14 / 16 の値にする
ただしダーシ4つの場合は前後4分アキになってしまう
ダーシ4つ以上使うな
または専用スタイルをつくれ
原稿で一括置換してもよし、
ズボラな人はJSでダーシ検索して一括で <span class="letter-dash"></span> で囲ってもよし