CSS - text-decoration-skip-ink

概要

属性名	text-decoration-skip-ink
値	none \| auto \| all
初期値	auto
適用可能要素	すべての要素
継承	あり
サポート	https://caniuse.com/?search=text-decoration-skip-ink

説明

テキストの装飾線 (上線、下線、打消し線) が対象テキストと重なる場合のスキップ方法を指定します。

値	説明
none	スキップしません。
auto	スキップすることがあります。しないこともあります。何故か CJK(中国・日本・韓国語)に関してはスキップするべきではないという指針が示されており、Chrome では全角文字のｙやｊに対してはスキップを行いません。Firefox では全角文字でもスキップを行います。
all	常にスキップします。Chrome でもこの値がサポートされれば、全角文字のｙやｊに対してもスキップするようになるかもしれませんが、現時点 (Chrome 103) ではまだこの値をサポートしていません。Firefox はサポートしていますが、auto を指定しても all を指定してもスキップするので違いはわかりません。

使用例

CSS

.td {
  text-decoration-line: underline;
  text-decoration-color: red;
  font-size: 24pt;
}
.none {
  text-decoration-skip-ink: none;
}
.auto {
  text-decoration-skip-ink: auto;
}
.all {
  text-decoration-skip-ink: all;
}

HTML

<div class="td none">My name is Ryoji.</div>
<div class="td auto">My name is Ryoji.</div>
<div class="td all">My name is Ryoji.</div>

表示

My name is Ryoji. 全角ｙｊｇ

リンク

初版：2022年7月31日、最終更新：2022年7月31日

https://www.tohoho-web.com/css/prop/text-decoration-skip-ink.htm

CSS - text-decoration-skip-ink

概要

説明

使用例

関連項目

リンク