| 属性名 | 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 を指定してもスキップするので違いはわかりません。 |
.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;
}
<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>