以前noteでこんな記事を書きました。
Chromium系ブラウザでは文字がぼやけるという現象です。このぼやけ現象ですが、なぜかWQHDモニターでのみ発生します。フルHDや4Kモニターでは発生しません。またGecko系（Firefoxとか）ではどのモニターでもぼやけません。
普段はGecko系ブラウザのFloorpを使っているので困りはしないのですが、何かあった時用サブブラウザのVivaldiでも文字をきれいに見たい。そんなわけでChromium系ブラウザの文字のぼやけをなんとかしてみる記事です。
文字がぼやける原因みたいなもの
noteにもちらっと書いてますが、おそらく原因は2つ。まず、文字の色が薄いこと。もうひとつはアンチエイリアシング効果の部分が隣の文字と一体になってしまっていること。（ちなみにnoteの記事は影が付いているとかCSSのtext-shadowで影を消すとか、ちょっと間違ったことを書いているので参考程度にとどめてください）
それぞれ詳しく解説します。（なお、例で出てくる文字のフォントはメイリオ。Youtubeトップページ左側に表示されている「履歴」の部分を使用しています）
文字の色が薄いことについて
まずは文字の色が薄いことについて次の画像を見てください。
次にCSSでtext-shadowを使い色を擬似的に濃くした状態の画像を見てください。（矢印部分についてはあとで解説します）
どうでしょう、色の違い分かるでしょうか？字のたれの部分、特に「履」の方がよく分かると思います。このように色が薄いことによってぼやーっとした印象になるんだと思います。
そしてこれを修正するために、VivaldiにstylusというCSSを簡単にいじれる拡張機能を入れて次のように指定しました。
* {
text-shadow:0px 0px 0px rgb(0 0 0 /30%) !important;
}
text-shadowは文字に影を付けるCSSです。値は左から順にX方向へのオフセット・Y方向へのオフセット・ぼかしの強さ・色です。前3つは影を付けるわけではないので文字と同じ位置ということになります。
ここでの肝となるのはそのあと、rgb()で指定する内容です。0 0 0はRGB値を表していますので黒を意味します。そのあとの/30%は透明度を示します。
つまり「文字と同じ位置に透明度30%の影を黒い色でつけよ」という意味になります。こうすることで擬似的に文字の色を濃くすることが出来ました。
これで文字の色が薄い問題は解決しました。ちなみに透明度は個人の好みで設定して構いません。あまり濃くしすぎると見にくいので今回のようにうっすらかけるくらいの方がおすすめです。
アンチエイリアシングの問題について
つぎはアンチエイリアシングについてです。まずは色が濃くなった先ほどの画像を見てください。
注目するのは赤矢印縦ラインの部分。とても薄くですが色が付いていますよね。これ、色々考えた結果、あくまで私の予想ですがアンチエイリアシング効果が悪さをしているようです。隣の文字のアンチエイリアシング効果とかぶってしまっている感じなんですよね。
このせいで文字がはっきり見えずぼやーっとして見えるのではないかと。そこで文字間の距離を離してみることにしました。まずは0.03em離した結果がこちら。
すると、今度はさっき見えなかった「歴」のたれ部分にもうっすらと色が付いてしまいました。ただし、ほんのわずかですが「履」の方のうっすら色が薄くなりました。そのことによってこの状態でもかなりクッキリと見えるようになっています。
今度は0.05em離してみると…
どうでしょう、うっすら色がほとんど無くなりました。この状態ならGecko系ブラウザに近い表示がされています。
このように文字間距離を空けるとアンチエイリアシング効果部分の余計なうっすら色が無くなるので文字がはっきりと見えるようになりました。
合わせ技で効果を発揮する
これら2つの調整を同時に加えるとぼやーっとした文字がいくらかはっきり見えるようになります。ここまでやってもGecko系ブラウザの表示には及びませんが…。
大事なのは2つとも実行しないと意味が無いと言うことです。参考までに文字間距離を調整したものからtext-shadowを無効にした画像を載せます。
先ほど載せた画像と比べると文字の色が薄くなっていると思います。これでは十分な効果が出ません。2つ合わせてはじめて効果を発揮する方法です。
今回使用したコード
最後に今回調整に試用したコードを載せておきます。stylusで管理するのがおすすめですが、簡単なCSSなので適用さえできれば好きな手法で構いません。
[コード]
* {
text-shadow:0px 0px 0px rgb(0 0 0 /30%) !important;
letter-spacing: 0.05em;
}
どちらもテキストにだけ適用されるプロパティなはずなので、*を指定しています。いくつかのサイトで確認してみましたがこれで特に問題は無いようです。厳密にテキストだけ指定したい場合は、[p,span,h1…]などと指定してみてください。
今回のまとめ
今回はChromium系ブラウザとWQHDモニターのみで起こる謎の文字のぼやけについて書きました。それらしい原因は見つけたものの、根本的な解決には至りませんでした。
色々調べてみたのですが、WindowsのClearTypeチューナーに従っていないとか、skiaレンダリングが問題だとか、もう色々ありすぎてよく分かりません。
とりあえず今回の方法でかなり軽減できたのでヨシとします。
なお、調整前と調整後の文字のSSも載せようと思いましたが、文字が小さいのであまり参考にならないと思い省きました。少し拡大したものをアイキャッチ画像としているのでそちらを参考にしてください。
それでは今回はここまで。また見に来てくれるとうれしいです。
送信中です
コメント