文字の装飾
text-decoration-skip-ink
text-decoration-skip-ink は、下線や上線が文字に重なる所で、線を途切れさせて文字を避けるかどうかを指定します。初期値の auto では、y や p のように下に伸びる部分の前後で下線が途切れます。
構文
auto | none | allプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
text-decoration: underline;
text-decoration-skip-ink: none;
}コントロール
text-decoration-skip-inknone
解説
3 つの値
auto：初期値です。線が文字の形に重なる所と、その少し外側で線を途切れさせます。どの文字を避けるかはブラウザが文字の種類を見て決めてよく、漢字やかなは避けないのがふつうです。none：文字に重なっても途切れさせず、ひと続きの線を引きます。all：漢字やかなも含めて、重なるすべての文字を避けます。
漢字やかなを避けない理由
日本語の字は下の方まで形があるので、フォントによっては下線がほとんどの字に重なり、避けると線が切れ切れになってしまいます。そのため auto では避けないのがふつうです。日本語の下線を字から離したいときは、途切れさせるより text-underline-position: under や text-underline-offset で線を下げる方がきれいに見えます。
気をつけること
- 効くのは下線と上線だけで、取り消し線（
line-through）はいつもひと続きです。 - 線を引いた要素に書いた値が、その中の文字すべての線に使われます。子の要素に別の値を書いても、親が引いた線の途切れ方は変わりません。値は継承されるので、子が自分で引く線には子の値が使われます。
allに対応したのは Chrome・Edge では 148 からです。Firefox と Safari は以前から対応しています。- このページのプレビューでは、
text-decoration: underlineで下線を引いた「Typo」で、y と p の下に伸びる部分と下線の重なり方を見られます。