下線の位置はフォントで決まるべきと考えていたが、考えを変えつつある。フォントによってかなりばらつきがあり、かつ、端末の描画品質にもばらつきがあるため、かなり違いが感じられることがわかり始めた。特にこのウェブサイトのようにフォントが不定な場合、印象にそこそこ差が出てしまう。
また、ハイパーリンクであることを色やそのコントラストに頼らずさりげなく示したいものが下線だと考えると、そもそも強調に近い下線は強すぎるという問題もある。そういう意味でも少し離すという考えは納得できる。離し過ぎると次行の上線と誤解される可能性もあるので、数ピクセルくらいになるだろうが、適切な割合を文字サイズから決めることは難しいと感じる。
適切な行送りであるという前提なら、文字から離すというよりも、行ボックスから決めると汎用的で安定的な位置になるのではないだろうか。近すぎず、遠すぎずとするためには、文字のベースラインと行ボックスの下端のそれぞれから少し離したい。両者の真ん中辺りにすると丁度良さそうだ。具体的にはhalf-leadingを計算し、更にその半分にした値を指定する。
a {
text-underline-offset: calc((1lh - 1cap) / 2 / 2);
}行ボックスの高さ(1lh)から文字の高さ(1capとしたが1emでも良い)を引けば、leadingが計算できる。それを半分にするとhalf-leadingだ。更にそれを半分にしているが、行送りの大きさによっては1/3にしても良いかもしれない。
ハイパーリンクをフォーカスした時に表示される輪郭線も、同じように行ボックスを基準にして考えると良いような気がしている。垂直方向の距離は、この記事で提案した下線の位置と丁度重なるくらいが適切だろうか。水平方向はもうちょっと狭くて良いが、調整することができない問題がある。