text-underline-position と text-underline-offset を試してみる
主にリンクの下線をスタイリングする text-decoration: underline だが、最近この text-decoration 系が色々とスタイリングできるらしく、中でも面白いモノを見つけた。
text-decoration-color による線の色だけ変更する技や、text-decoration-style による border-style チックな指定方法は知っていたが、text-underline-position と text-underline-offset というプロパティは今回初めて知った。下線の位置を詳細に調整できるプロパティだ。
- 参考 : text-underline-position - CSS: カスケーディングスタイルシート | MDN
- 参考 : text-underline-offset - CSS: カスケーディングスタイルシート | MDN
いずれも text-decoration: underline にのみ作用し、overline などには影響しない。
テキストに下線を引くと、アルファベットの g や q などベースラインの下を越える文字と重なった時に見づらくなることがある。そのため最近のブラウザは text-decoration-skip-ink が auto になり、下線が途切れるようなスタイリングに変わっていたりする。コレはコレで今までと見た目が変わってしまって慣れないのだが、今回見つけた text-underline-position と text-underline-offset はその問題を改善できるかもしれない。
以下のデモページで色々と検証しているので見てみてほしい。
- デモ : text-underline-offset
- コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes
text-underline-position は、指定のキーワードによって位置を調整できるモノ。一方 text-underline-offset は 5px とか 0.3em といったように、数値でオフセット位置を指定できる。
自分が試した限りだと、text-underline-offset を 0.1em ～ 0.25em くらいの間で調整すると、アルファベットの g や q などと程良く間隔が開いて見やすくなる。text-decoration-skip-ink: none; を同時に指定して、下線が途切れないようにしておくと良いだろう。
ついでに検証してみたところ、text-underline-offset: -1.21em あたりにすると、text-decoration: overline と同じ位置に underline を配置できる。意味はないけど。ｗ
text-underline-position と text-underline-offset は併用もできて、text-underline-position: under などでベース位置を決めたら、そこを起点に text-underline-offset の分だけズラせる感じ。
地味なスタイリングだけど、より自然なテキストのスタイリングができるようになって良き良き。
