CSS - text-decoration-skip-ink

トップ > 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 では全角文字の y や j に対してはスキップを行いません。Firefox では全角文字でもスキップを行います。
all常にスキップします。Chrome でもこの値がサポートされれば、全角文字の y や j に対してもスキップするようになるかもしれませんが、現時点 (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. 全角yjg
My name is Ryoji. 全角yjg
My name is Ryoji. 全角yjg

関連項目

text-decoration

リンク


Copyright (C) 2022 杜甫々
初版:2022年7月31日、最終更新:2022年7月31日
http://www.tohoho-web.com/css/prop/text-decoration-skip-ink.htm