【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink

text-decoration-skip-inkプロパティは、テキストのライン装飾が テキストを横切る時、そのまま線を引くか、テキストの部分の線をスキップするか決めます。

これは、text-decoration-skipプロパティの値だった「ink」がプロパティとして独立したもの。
W3C の Text Decoration Module Level 4（ドラフト）で仕様として上がっています。
というわけで、まだ勧告されてはいませんが一応書いておきます。（2019年7月記）

参考：
・Text Decoration Module Level 4 | W3C First Public Working Draft
・text-decoration-skip-ink - CSS | MDN

text-decoration-skip-inkプロパティの値

text-decoration-skip-inkプロパティの値は

text-decoration-skip-inkプロパティの値
キーワード	autoがデフォルト値。 none
グローバル値	text-decoration-skip-ink: inherit; 親の値を継承（コレ書かなくても継承するけど） text-decoration-skip-ink: initial; 継承した親の値を解消しデフォルト値に戻す text-decoration-skip-ink: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	する	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。

auto

デフォルト値です。
テキストのアセンダーやディセンダーを横切らないように、ラインを中断しながら引きます。

英文字の小文字の h や k のように x より上辺より上に出る部分をアセンダー（Ascender）といいます。
逆に g や p のように下にはみ出る部分をディセンダー（Descender）といいます。
上線がアセンダーを横切らないように、下線がディセンダーを横切らないように線を引くのが text-decoration-skip-inkプロパティのデフォルトというわけ。

none

下線も上線も、ライン装飾は何もスキップしません（切れ目なくラインが付く）

text-decoration-skip-inkプロパティの指定サンプル

text-decoration-skip-inkプロパティの値を指定してみます。
今のところ Chrome、Opera、Android標準ブラウザ が実装しているようです。
（参考：Can I use 2019年7月記）

<ins>要素（下線が引かれます）で試しています。

text-decoration-skip-ink: 未指定（= auto） pやqやgのディセンダーに注目

text-decoration-skip-ink: none pやqやgのディセンダーに注目

下は Chrome 75（on MacOS）でのプレビューです。

文字にかからないようにラインが途切れるのがデフォルトなんですね。
文字にかかるのを見慣れているので変な感じ。でも確かにスキップされたほうが読みやすいかもね。

サンプルのソースコードはこちら。

<div class="mihon">
<p>
<b>text-decoration-skip-ink: 未指定（= auto）</b>
<ins>pやqやgのディセンダーに注目</ins></p>
<p>
<b>text-decoration-skip-ink: none</b>
<ins class="sample1">pやqやgのディセンダーに注目</ins></p>
</div>

<style>
.mihon {
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em 1.4em;
	}
.mihon p {font-size:1rem; margin:0 0 1em}
.mihon p:last-child {margin-bottom:0}
.mihon b {display:block; color:#579961}
.mihon ins {font-size:2rem}
.sample1 {
	text-decoration-skip-ink:none}
</style>

これ、auto（下線がアセンダーやディセンダーをスキップする）がデフォルトなので、あんまり使う機会が無さそう。
どうしても下線を切れ目なく引きたい時に「none」を使うってかんじですかね。

次回予告

次回は、text-underline-positionプロパティについて。
これは、text-decorationプロパティの値が「underline」になってるときに、下線の「位置」を指定するプロパティです。
といってもまだ実装しているブラウザは無いようですが、Text Decoration Module Level 4 でも削除される予定が無いようなので記事にしておきます。