はじめに
アンチエイリアスは、ウェブ グラフィックにおける名もなきヒーローの一つです。それこそが、クリアなテキストと滑らかなベクター図形を画面に表示できる理由です。現在のブラウザで使用されているアンチ エイリアスには、実際に 2 つのアプローチがありますが、テキスト レンダリングに関しては最もわかりやすいアプローチがあります。スイッチのアンチアライズに使用されるアルゴリズムは、予期しない視覚結果につながる可能性があります。この記事では、アンチ エイリアスのアプローチと、ピクセルの描画方法を説明します。
ご存じのとおり、すべての画面はピクセルで構成されています。ブロックの巨大なグリッドで、各ブロックには赤、緑、青（RGB）の要素が含まれています。遠くに画像、テキスト、アイコンが見えますが、実際には RGB コンポーネントのグリッドや、すべてがどのように構成されているかを間近で見ることができます。
画像を滑らかに表示する
では、ベクター図形を描画していて、それがピクセルの「一部」を通過する場合はどうなるでしょうか。今度は図形が黒で、背景が白だとしましょう。そのピクセルに色をつけるべきでしょうか？色を付ける場合、何色にしますか？黒、灰色、それ以外？
アンチ エイリアスの処理により、ピクセルへの塗りつぶしに使用する色が決まります。その最もシンプルなバージョンはグレースケール アンチエイリアスと呼ばれ、ピクセルの 3 つのコンポーネントを均等に扱います。ピクセルが半分に覆われていて、わかりやすくするために 1 秒間、白地に黒いテキストを仮定すると、各コンポーネントの明るさが半分に設定されると考えるかもしれませんが（確かにそうでした）、実際にはそれよりも複雑です。ガンマを考慮する必要があり、その正確な値に設定することはほとんどありません。もちろん、やや厄介な問題になりますが、これはトピックの紹介ですので、ここでは掘り下げません。知っておくべき重要なことは、グレースケール アンチエイリアスはピクセルレベルで処理されることです。実際、はるかに優れた結果が得られます。
図 2 では同じ三角形が描画されていますが、左側ではアンチエイリアスが有効になっていますが、右側では無効になっています。ご覧のとおり、アンチエイリアスが有効になっている場合、三角形がピクセルの一部しか通過しない場合、ピクセルはグレーの濃淡になります。ただし、無効にすると、ピクセルは黒一色または白一色で塗りつぶされ、形状はギザギザのように見えます。
テキスト レンダリング
ブラウザがテキスト（基本的にはベクトル図形）をレンダリングするときはいつでも、同じ問題に直面します。テキストの文字が一部のピクセルの一部しか埋められないため、これらのピクセルを塗りつぶす方法が必要です。理想的には、テキストをアンチエイリアス化することで、読みやすく、より快適になります。
しかし、アンチ エイリアスに対するグレースケールのアプローチは、対処法の 1 つにすぎないことがわかりました。よく採用されているアプローチは、ピクセルの RGB コンポーネントを有効にする方法をもう少し選択的にすることです。このプロセスはサブピクセル アンチエイリアスと呼ばれ、特に Microsoft の ClearType チームは長年にわたり、この開発に多大な時間と労力を投資してきました。今ではかなり広く使用されており、主要なすべてのブラウザで、程度は大きくなっています。
まず、各ピクセルは実際には個別の赤、緑、青の成分で構成されていることがわかっているため、該当するピクセルでそれらの成分がどの程度「オン」になるべきかを検出します。したがって、ピクセルが左側から「半分を覆う」場合、赤色成分を完全に、緑成分を半分に切り、青をオフのままにすることができます。このプロセスはしばしば「画面の水平解像度の 3 倍」と表現され、各ピクセルが 1 つの単位ではなく 3 つの独立したコンポーネントを横に並べて配置されるという事実に依拠しています。
上の図 3 では、左側では各コンポーネントが均等に扱われ、各コンポーネントが均等にオンまたはオフ（グレースケール）であることがわかります。ただし、右側ではサブピクセル アプローチを採用し、描画されるシェイプとどの程度重なるかに応じて各コンポーネント（赤、緑、青）を異なる方法で有効にします。
とはいえ、人間の視力は赤、緑、青の光の重さを等しく測定しているわけではありません。赤や青よりも緑に敏感です。つまり、Darel Rex Finley が指摘しているように、グレースケール アンチエイリアスには明らかな利点がありますが、各コンポーネントを個別に有効にしても、実際には明瞭さが 3 倍に向上しません。サブピクセル アンチエイリアスは確かに便利ですが、グレースケール アンチエイリアスを使用した場合よりもテキストが鮮明に表示されます。
追いかける時間
これらはすべて、デベロッパーにとってどのような意味を持つのでしょうか。少なくとも Chrome の観点からは、テキストのレンダリングに使用されるグレースケールとサブピクセルのアンチエイリアスが混在しており、どちらが得られるかはいくつかの条件によって決まります。ただし、まずはレイヤについて少し理解しておく必要があります。レイヤは主要な基準です。レイヤについてまだ知らなかったり、Chrome の内部でどのように使用されているかについては、Tom Wiltzius が書いたこのトピックの素晴らしい紹介を最初にお読みください。
レイヤに精通している場合、またはレイヤについて読んだことがある方は、次に進みます。ページでハードウェア合成が有効になっていて、ルートレイヤではないレイヤにテキスト コンテンツがある場合、デフォルトでは、グレースケール アンチエイリアスを使用してレンダリングされます。デベロッパーは、要素にハックを適用して独自の（ルート以外の）レイヤに配置すると（translateZ を使用するなど）、テキストのレンダリングが変わることに気づくことがよくあります。多くの場合、デベロッパーは JavaScript や CSS を通じて「新しいレイヤ」のトリガーをオンザフライで適用して、テキスト レンダリングがサブピクセルからグレースケールに切り替わることがよくあります。レンダリングの変更の原因がわからなければ、混乱を招きかねません。ただし、テキストがルートレイヤにある場合、サブピクセル アンチエイリアスでレンダリングする必要があるため、読みやすくなります。
しかし、ウェブのあり方も変わりつつあります。Chrome では、ルート以外のレイヤ内のテキストに対して、レイヤが 3 つの条件を満たしている場合、サブピクセル アンチエイリアスが有効になります。これらの基準は本日から適用されますが、今後変更される可能性が高く、今後対象になるケースが増加することが予想されます。現在、その基準は次のとおりです。
- レイヤの背景色は完全に不透明です。特に、
border-radiusまたはデフォルト以外のbackground-clip値を使用すると、レイヤが不透明でないものとして扱われ、テキスト レンダリングがグレースケール アンチエイリアスに戻ります。 - レイヤには、単位変換または積分変換のみを適用できます。積分とは、丸められた値のことです。したがって、たとえば
translate(20.2px, 30px)では、x コンポーネント20.2pxが非整数であるため、グレースケール アンチエイリアスになります。単位変換とは、単純に、デフォルトを超えて追加の回転、平行移動、スケーリングが適用されないことを意味します。 - レイヤの不透明度は 1.0 です。不透明度を変更すると、アンチエイリアスがサブピクセルからグレースケールに変更されます。
最後に、CSS アニメーションを適用すると新しいレイヤが作成される場合がありますが、requestAnimationFrame を使用した場合は作成されません。一部のデベロッパーにとって、テキスト レンダリングの違いから、CSS アニメーションを使用できないことがあります。テキスト レンダリングの違いが原因で JavaScript を使用して要素をアニメーション化している場合は、このアップデートで問題が解決するかどうかをご確認ください。
Chrome に関する説明は以上です。他のブラウザについては、Opera も Chromium に移行する際は Chrome の動作とほぼ一致する必要があります。Internet Explorer は、ほぼすべてのテキストにサブピクセルのアンチエイリアスを使用しているようです（もちろん ClearType を有効にしている場合）。ただし、Windows 8 の Metro モードではないようです。WebKit と Blink の近さを考慮すると、Safari は Chrome と非常によく似ていますが、サブピクセルのアンチエイリアスを増やすという新しい改善はありません。Firefox は、ほぼすべてのテキストにサブピクセル アンチエイリアスを使用するという点で、Internet Explorer とほぼ同じように動作します。もちろん、これがすべてを網羅しているわけではなく、すべてのブラウザでサブピクセルの代わりにグレースケール アンチエイリアスが使用される可能性があります。ただし、サブピクセル アンチエイリアスがメインのブラウザ セットで広く使用されていることを知っておきましょう。
まとめ
これで、アンチエイリアスの仕組みと、特に低 DPI のデバイスでは、現在のサイトとアプリケーションでテキスト レンダリングに違いが生じる理由についてご理解いただけたと思います。テキスト レンダリングに関して Chrome の実装に関心をお持ちの場合は、以下のバグにスターを付けてください。
- 48 ピクセルを超える自動フォント グレースケールのアンチエイリアスがオーバーライドできない
- Windows 版 Chrome での Google Web Fonts によるフォントのひどい表示）
- DirectWrite のサポート