text-decoration-skip-inkプロパティの説明
CSSの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からはみ出す部分を用意し、装飾線を加えた時の表示です。
装飾線がアンダーラインの場合は、文字に触れる部分をスキップしますが、打ち消し線はそのまま一直線に引かれます。
<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>
.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;
}