Google Chromeでアンダーラインが切れてしまった時の対処法

今回はChromeでアンダーラインが切れてしまう問題を解決していきます!
Chrome 64のアップデートから「text-decoration: underline」を使用するとアンダーラインがプツプツと切れるようになりました。
人によっては、切れた方がいいという場合もあるかもしれないので切る方法も解説していきます!

どんな現象が起きているのか?

まずは、どんな現象が起きているのか確認していきましょう!

abcdefghijklmn

「g」と「j」の部分でアンダーラインが切れているのがわかると思います。

2019年8月現在、Google Chrome(AndroidのWebviewも含む)とOperaで確認できると思います。

text-decoration-skip-inkで無事解決!

Chrome 64から新しいプロパティの「text-decoration-skip-ink」が実装されました。

これは、テキストがベースラインよりも下に来た時にアンダーラインを切るかどうか指定できるものになります。

つまり、どういうこと???説明していきます!!

テキストのベースラインとアンダーラインの関係

まずは、ベースラインとアンダーラインについて把握していきましょう。

簡単に言うと、アンダーラインはベースラインの位置に引かれます。

じゃあ、ベースラインってどこ?というと、

こちらの赤線部分になります。

おそらく、英語を習いたてのときはベースラインを気にして書いていたと思います。

CSSではその位置に、アンダーラインがつくようになります。

Chromeの仕様では、「テキストがベースラインよりも下に来た時」にアンダーラインを切るようになっています。

なので、これを「text-decoration-skip-ink」を使って制御していきましょう!!

text-decoration-skip-inkの使い方

それでは、「text-decoration-skip-ink」を使っていきましょう!!

といっても、このプロパティで使う値は以下の2つしかないのでめっちゃシンプルです。

  • auto:ブラウザの仕様に従う(プツプツと切れるようになります)
  • none:テキストコンテンツの全体に渡って引かれる

つまり、アンダーラインが切れるようにしたい場合は

text-decoration-skip-ink: auto;
text-decoration: underline;

abcdefghijklmn

アンダーラインが切れないようにしたい場合は

text-decoration-skip-ink: none;
text-decoration: underline;

abcdefghijklmn

を指定してあげればOKです!!

さいごに

いかがだったでしょうか?

Google Chromeは開発環境としても、ブラウザとしてもバグが少なく、使いやすいソフトウェアになってると思います。

なので、今回のアンダーライン問題は、個人的に

最強のChromeが珍しく余計なことしてるな??

余計なことするのは「Safari」だけで十分です!!!!

というわけで、最後までありがとうございました!!!