text-decoration-skip-ink: allでunderlineをすべてのグリフの周りで途切れさせる
text-decoration-skip-ink: allは、underlineやoverlineがグリフを横切る箇所を必ず途切れさせるCSSの値です。CJKに対しては線を途切れさせない実装が多いautoとの挙動の差を、Baseline 2026で揃った3つ目の値allと合わせて見ていきます。
はじめに
underlineやoverlineは文字の上下を横切るときに、ディセンダのあるgやp、yのような文字とぶつかってしまうことがあります。underlineを引いただけだとそうした文字のループの底に線が突き刺さって読みにくくなるので、ブラウザは標準でグリフのインクと交差する箇所では線を途切れさせてくれます。
その制御を担うのがtext-decoration-skip-inkプロパティです。これまではautoとnoneの2つの値で、ブラウザに任せるか一切途切れさせないかを選べました。Baseline 2026ではallという3つ目の値が揃いました。
プロパティの基本と3つの値
text-decoration-skip-inkはunderlineやoverlineをグリフのインク（実際にレンダリングされる字の形）と交差させるかどうかを制御します。値は3つあります。
auto（既定値） - ブラウザの判断でグリフを避けるかどうかを決める。ラテン文字のディセンダは通常避けるが、CJK文字には適用しないユーザーエージェントが多いnone- 途切れさせない。常に1本の線として描画するall- すべてのグリフのインクと交差する箇所で必ず途切れさせる
autoでは仕様上ブラウザに裁量があり、どこを避けてどこを避けないかは実装次第です。allを指定すると裁量を排除して、グリフがあれば必ず線を切る挙動になります。
auto と all の挙動の差
ラテン文字のunderlineはautoでも実用上ほとんどのブラウザがディセンダを避けてくれるので、autoとallの差は目に見えません。差が出るのは主にCJKテキストのunderlineです。
仕様上、autoは
UAs may interrupt underlines and overlines where the line would cross glyph ink
とUAに裁量を与えているだけです。CJKに対しては多くのUAが線を途切れさせない実装になっており、結果として日本語の文章にunderlineを引くと、漢字の下端やぐ、ゆのような字に線が突き刺さった見た目になりがちです。
allは
UAs must interrupt underlines and overlines where the line would cross glyph ink
と義務になります（mayとmustの部分が異なります）。CJK文字でもラテン文字と同じようにunderlineがグリフを避けて途切れるようになり、グリフごとに線が刻まれるような見え方に変わります。autoの連続したunderlineを前提に組んだデザインに後付けで入れると、印象が大きく変わる点には注意してください。
p {
text-decoration: underline;
text-decoration-skip-ink: all;
}skip-ink値の比較
日本語の文章にunderlineを引くと、漢字の下端やぐ・ゆなどに線が触れて読みづらくなりがちです。Latin script: jumping typography.
おわりに
text-decoration-skip-ink: allはChromiumに長く欠けていた値がようやく揃ったというだけのもので、CJK混じりのunderlineが必ず読みやすくなるとは限りません。グリフの周りで線が大きく途切れることで、かえって途切れが目立って違和感が出る場面もあります。autoの挙動が物足りない箇所だけを狙って、実際の文章で見栄えを確認しながら使うかどうか決めるのがよさそうです。