text-decoration-skip-ink: all | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

概要

text-decoration-skip-ink: all はデフォルトの auto とは異なり、CJK文字を含むすべてのグリフで下線のスキップを行います。auto ではCJK文字に対してスキップが適用されないため、日本語や中国語のテキストで下線の読みやすさを改善するにはこの値が必要です。日中韓の多言語サイトで特に有用です。

対応ブラウザ

デスクトップ

Chrome 未対応

Edge 未対応

Safari 15.4+

Firefox 75+

モバイル

Chrome Android 未対応

Safari iOS 15.4+

Firefox Android 79+

基本構文

CSS

.cjk-link {
  text-decoration: underline;
  text-decoration-skip-ink: all;
}

実務での使いどころ

CJKテキストの下線改善

日本語や中国語のテキストにおいて、下線がグリフと交差する部分を自動的に中断し、読みやすさを向上させます。

注意点

Chrome と Edge ではサポートされていないため、フォールバックとして auto を使用することを検討してください。

参考リンク

MDN Web Docs — text-decoration-skip-ink: all

概要