text-decoration-skip-ink：装飾線が文字を通過する祭の処理を指定する

text-decoration-skip-inkプロパティの説明

text-decoration-skip-inkは、装飾線が文字のアセンダーやディセンダーを通過する祭の処理を指定します。既定値では、可読性を損なわないように装飾線を区切って表示しますが、これをスキップせずに一直線に表示させることもできます。

文字に装飾線を加える場合は、まず初めにtext-decoration-lineで線の種類を指定します。初期値では、これがnoneになっているため、色や太さを変えても表示されません。

text-decoration-skip-inkは装飾線に関するプロパティですが、一括指定のtext-decorationには含まれない機能です。

• text-decoration-color：装飾線の色
• text-decoration-line：装飾線の種類
• text-decoration-style：装飾線の形状
• text-decoration-thickness：装飾線の太さ

text-decoration-skip-inkに指定できる値

auto

装飾線は、文字のx-heightからはみ出す部分を通過する祭に、上書きしてしまわないようにスキップします。これは書体の一部がアセンダーやディセンダーを含む表現である場合に機能します。

all

装飾線は、文字の上を通過する際に必ずスキップします。これはautoの機能が適用対象外の言語やフォントにも同様の効果を期待するものです。

none

装飾線は、アセンダーやディセンダーの上を通過する祭も中断せずに一直線に引かれます。

text-decoration-skip-inkの使い方とサンプル

text-decoration-skip-inkプロパティの構文は以下の通りです。

/* キーワード値 */
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
text-decoration-skip-ink: none;

/* グローバルキーワード */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: unset;

text-decoration-skip-inkの実例

それでは実際にtext-decoration-skip-inkプロパティの書き方を見ていきましょう。以下の例は、英文書体の小文字でx-heightからはみ出す部分を用意し、装飾線を加えた時の表示です。

装飾線がアンダーラインの場合は、文字に触れる部分をスキップしますが、打ち消し線はそのまま一直線に引かれます。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #fff;
}
section > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
	font-size: 3rem;
}
p > span {
	margin-right: 1rem;
}
p > span:nth-child(1) {
	text-decoration-line: underline overline;
	text-decoration-style: solid;
	text-decoration-color: currentcolor;
	text-decoration-thickness: auto;
}
p > span:nth-child(2) {
	text-decoration-line: underline overline;
	text-decoration-style: wavy;
	text-decoration-color: blue;
	text-decoration-thickness: 2px;
}
p > span:nth-child(3) {
	text-decoration-line: line-through;
	text-decoration-style: double;
	text-decoration-color: #f00;
	text-decoration-thickness: from-font;
}
.tdsi_auto > p {
	text-decoration-skip-ink: auto;
}
.tdsi_all > p {
	text-decoration-skip-ink: all;
}
.tdsi_none > p {
	text-decoration-skip-ink: none;
}

<div class="samp_box">
	<section class="tdsi_auto">
		<h2>text-decoration-skip-ink: auto;</h2>
		<p>
			<span>xpkgf</span>
			<span>xpkgf</span>
			<span>xpkgf</span>
		</p>
	</section>
	<section class="tdsi_all">
		<h2>text-decoration-skip-ink: all;</h2>
		<p>
			<span>xpkgf</span>
			<span>xpkgf</span>
			<span>xpkgf</span>
		</p>
	</section>
		<section class="tdsi_none">
		<h2>text-decoration-skip-ink: none;</h2>
		<p>
			<span>xpkgf</span>
			<span>xpkgf</span>
			<span>xpkgf</span>
		</p>
	</section>
</div>