配置位置と幅を任意に選べる文字の下線・上線・取り消し線・マーカー / CSSの工具箱

シンプルなコードで正確な配置とバリエーション

先日、文字のアンダーライン（下線）を「linear-gradient」で描画する、シンプルなCSSコードを作りました。

「linear-gradient」を使い、配置位置が正確で線幅が指定できるコードは、ネット上には見当たらず、これはすぐれものです。「上線・取り消し線・マーカー」は、このコードを応用するだけですが、その配置できる範囲の確認をしました。

フォント表示の複雑な背景

サンプルのHTMLを作っていて、予想外の問題に気付きました。先ずそれから説明しないと、後が書けません。

HTML

<html><body>
<div id="ContA">
簡単な説明文で[Ex]<br>
要部の<span>下線付</span>は[Ex]<br>
普通の表現方法[Ex]
</div>
<div id="ContB">
簡単な説明文で[Ex]<br>
要部の<span>下線付</span>は[Ex]<br>
普通の表現方法[Ex]
</div>
</body><html>

CSS

#ContA,
#ContB {
    margin: 10px;
    padding: 0 .5em;
    width: fit-content;
    border: 1px solid #aaa; }

#ContA {
    font-family: Meiryo; }

#ContB {
    font-family: "ＭＳ ゴシック"; }

下線を付けるための「span」を含む3行の文字列を、2種のフォントで表示するだけの簡単なHTMLですが、その最初で躓きました。

以下がChromeでの表示ですが、上側「メイリオ」と下側「MSゴシック」で行間隔が違ってしまうのです。（行右端の[Ex]は英半角文字の位置の指標です）

下は「span」に緑の背景色を付け、文字列の一部をカーソルで反転させたところ。青反転の部分は行間隔の高さに相当しますが、両者とも緑の部分の高さと一致します。

最初のCSSは「line-height」の指定はなく、DevTools を調べてもユーザーエージェント指定は見当りません。 Chromeでは、フォントごとに背景色が着く部分の高さをデフォルトの「line-height」とする様です。（他のブラウザもそうかも知れません）

下は、両者に「line-height: 1;」を指定したもので、この場合の実値は「1em」で「16px」の高さを指定した事になります。

「MSゴシック」の緑部分の高さは16pxの様で、フォントサイズそのままです。

次に両者に「line-height: 1.5;」を指定すると、下の様になります。

これから、「メイリオ」の背景色部分の高さは16px×1.5=24pxと判ります。以上の様に、「line-height」を指定してやると、やっと両フォントが同じ扱いになります。

さて、文字の緑の背景色の高さは、一体何で決まるのか？このページで扱うタイプの装飾線は「background」で描画するので、文字の背景色の付く範囲内にしか装飾線が描画出来ません。ですから、背景色の範囲について、確実な知識が欲しいのです。

しかし、これを調べて行くと、すごく複雑でなかなか答えが見つかりません。フォント描出の仕組みはOSやブラウザによって違うらしく、「baseline」「ascent」「descent」「leading」などのキーワードが出て来ます。「line-height」と「font-size」の関係については、当然判っている必要がありますが、この背景色の範囲の説明には足りません。現在、手応えのある記事は以下の2記事でした。

　　Java の Font 周りの比較的ディープな話(前編)

　　各プラットフォームのフォントの高さについて

これらの記事から、2種のフォントで背景色の付く部分は、漢字フォントの場合なので「ascent ＋descent」の高さと考えると良い様です。

フォント背景色の範囲内で配置のバリエーション

「MSゴシック」「MS Pゴシック」は「descent」が少なく、「padding-bottom」等を追加しないとアンダーラインの範囲が窮屈です。それらのフォントはもはや現代的なフォントとは言えないので、ここでは「メイリオ」で「padding無し」の条件で装飾線のバリエーションを確認します。

まず、背景色の付く範囲は以下です。

● 上線　（装飾線の上端は背景色範囲の上端、3px幅です）

span {
    background: linear-gradient(transparent 0em, #f90 0, #f90 calc(0em + 3px), transparent 0); }

● 取り消し線　（装飾線の上端は 0.6emの位置で、3px幅です）

span {
    background: linear-gradient(transparent 0.6em, #f90 0, #f90 calc(0.6em + 3px), transparent 0); }

● 下線　（装飾線の上端 1.15emの位置、漢字の僅か下の配置、3px幅です）

span {
    background: linear-gradient(transparent 1.15em, #f90 0, #f90 calc(1.15em + 3px), transparent 0); }

● 下線　（装飾線の上端 1.31emの位置、3px幅では最下端の配置です）

span {
    background: linear-gradient(transparent 1.31em, #f90 0, #f90 calc(1.31em + 3px), transparent 0);
}

● マーカー　（装飾開始.1em ～終了位置1.3em、グリーン透過色指定）

span {
    background: linear-gradient(transparent .1em, rgba(0, 255, 64, .5) 0, rgba(0, 255, 64, .5) 1.3em, transparent 0); }

● 中幅マーカー（装飾開始.8em ～終了位置1.3em、グリーン透過色指定）

span {
    background: linear-gradient(transparent .8em, rgba(0, 255, 64, .5) 0, rgba(0, 255, 64, .5) 1.3em, transparent 0); }

指定の要点

固定幅の装飾線の各指定ヵ所を以下に纏めます。

background: linear-gradient(transparent 1.15em, #f90 0, #f90 calc(1.15em + 3px), transparent 0);

　　1.15em ▶ 装飾線の開始位置を「em値」で指定

　　#f90 ▶ 装飾線の色を指定

　　3px ▶ 装飾線の固定幅を「px値」で指定

〔注意〕calc()のコードは、演算子「+」の両横に半角空白が必要です。