(Mobile )Safari 7.1以降では、アルファベットのディセンダーのみでなく、日本語の一部グリフでも下線が途切れることがある。

(Mobile )Safari 7.1より下線がディセンダーに重ならずに引かれるようになった。主にリンクの下線で確認することができる。概ね問題なく期待通りにうまく機能しているものと考えていたが、日本語の文章ではそれなりの確率(再現条件はよくわからない)でおかしくなることを知った。例えば上記スクリーンショットでは、大きめのグリフを持つ「作」や「安」などで下線が途切れているように見える。

Safariでこの機能は、現状では一部実装に留まるものの、CSSのtext-decoration-skipプロパティーを使って実装されている。仕様で定義されているinkという値の実装というわけだ。つまり同じくこのプロパティーを利用することで、挙動を他のブラウザーと合わせることが可能になる。

a {
  -webkit-text-decoration-skip: none;
}

下線がきれいに見えるかどうかは、ディセンダーとの重なりよりもその色と太さにあると考えられる。またこのディセンダーとの重なりをスキップする機能は、日本語のウェブサイトで大きな力を発揮するわけでもない。対して日本語の文章で一部完全に途切れたような形になることは大きな欠点と言えそうだ。安定した表示を求めるのなら、この機能は無効にしておいたほうが無難だろう。

text-decoration-colorプロパティーを始めとしたCSS Text Decoration Module Level 3で定義されているプロパティー群の実装は進みつつある。下線、ことリンクの下線の改良については、それらが安心して使えるようになってから改めて考えることにしたい。