text-decoration-skip-ink
text-decoration-skip-ink は文字のディセンダー（g, p, y など下に突き出る部分）と下線が重なる部分で、下線を自動的に中断します。これによりテキストの読みやすさが大幅に向上します。ほとんどのブラウザでデフォルトが auto に設定されており、標準的な欧文テキストでは自動的に機能します。
概要
text-decoration-skip-ink は文字のディセンダー（g, p, y など下に突き出る部分）と下線が重なる部分で、下線を自動的に中断します。これによりテキストの読みやすさが大幅に向上します。ほとんどのブラウザでデフォルトが auto に設定されており、標準的な欧文テキストでは自動的に機能します。
対応ブラウザ
デスクトップ
Chrome 64+
Edge 79+
Safari 15.4+
Firefox 70+
モバイル
Chrome Android 64+
Safari iOS 15.4+
Firefox Android 79+
基本構文
CSS
a {
text-decoration: underline;
text-decoration-skip-ink: auto;
}実務での使いどころ
-
読みやすい下線リンク
リンクの下線がグリフのディセンダーと重ならないようにし、テキストの可読性を向上させます。
注意点
- CJK文字ではデフォルトの auto でスキップが行われない場合があり、all を明示的に指定する必要があるかもしれません。
アクセシビリティ
- 下線のインクスキップはテキストの読みやすさを向上させ、特にディスレクシアのあるユーザーに有益です。