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

text-decoration-skip-ink: all

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

CJK対応テキスト装飾

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.text-decoration-skip-ink.all
75
15.4
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

skip-ink: all

CSS Skip-ink: all demo.

プレビュー全画面表示

skip-ink: auto

CSS Skip-ink: auto demo.

プレビュー全画面表示

skip-ink: none

CSS Skip-ink: none demo.

プレビュー全画面表示

実務での使いどころ

  • CJKテキストの下線改善

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

注意点

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

アクセシビリティ

  • CJKテキストの下線がグリフと重ならないことで、特に小さいフォントサイズでの可読性が向上します。

参考リンク