text-decoration-thicknessとtext-underline-offset:メモ

初めて本番に使おうとしたところ気になる部分があったのでメモとして。内容があっているかあまり自信がないのでご覧になる方はその点留意ください。

実現したいこと

• text-underline-offsetを使ってアンダーラインとテキストの間隔をあける
• text-decoration-thicknessを使ってhover時にpx指定で線幅を太くしたい
• hoverで文字色は変化させない(線の太さだけが変わる)

発生した問題

ChromeとFirefoxとSafariで試しましたが、Firefox以外では意図しない動作になりました。

Chromeで発生した問題

• hover後にのみtext-decoration-thicknessを増やすと、連動して線が上か下に移動してしまう

どうやらtext-decoration-thicknessの値が増えると該当テキストとの隙間が増えていくように見えます。そのため実際にはhoverを指定したから起きた問題ということではありません。

対処法

• text-decoration-thicknessのhover前後の差を1pxで設定する

相当に場当たり的と言いますか他に選択肢がないと言いますか、他のブラウザのことを考えますとこの組み合わせしかできないように思います。

何らかの方法でChromeのみにCSSを当てるのであれば以下の方法で対応は可能ですが、他のブラウザでは上方向に移動しているような状態になってしまいます。

• hover時のtext-decoration-thicknessの値を1px増やす
• text-underline-offsetのhover時の値を1px減らす

Safariで発生した問題

• h要素などフォントサイズが大きな要素にtext-decoration-thicknessを2pxなどで指定しても変化しない

対処法

1. hover後の状態にも文字色を設定する(初期状態と同じ色であっても指定する)
2. text-decoration-thicknessを大きめの値で設定する

実験を繰り返して得た対応策なので今後も利用できるのか、そもそも必要なのかという問題はありますが、上記の1か2のどちらかで対応可能です。
ただし前出のChromeの問題を考えますと1しか選べなさそうではあります。

1に関しては仮説が立てられませんでしたが、2に関してはフォントサイズに対するtext-decoration-thicknessの太さには下限があるのではと推測しています。
つまり、フォントサイズによって決まっているtext-decoration-thicknessの太さ以下の数値を指定しても変化しない、という状態です。

ただし以下の様なHTML構造の場合はhoverによる動作が変わりました。理由は不明です。

<!-- インラインで横に並んでいるだけでレイアウトに関わる指定はなし -->
<span><a style="font-size:40px;">大きい文字</a></span><span><a style="font-size:16px;">小さい文字</a></span>

• 「大きい文字」に直接hoverすると線幅は変化しない
• 「小さい文字」にhoverしてからそのまま「大きい文字」へとカーソルを動かすと線幅は変化する

参考

• text-decoration-thickness – CSS: カスケーディングスタイルシート | MDN
• text-underline-offset – CSS: カスケーディングスタイルシート | MDN

結び

調査内容が間違っている可能性もありますが、把握している範囲ではChromeもSafariも微妙な状況です。
あくまで個人的かつ現状ではとなりますが、以下のような状態が安全だと考えています。

• hover後の文字色を指定する
• text-decoration-thicknessのhover前後の差を1pxで設定する

もしも記事内容など間違いがありましたらコメントにて指摘頂けると助かります。