WEBでのフォントをカラフルにするCOLRとは
本記事ではChromeでもCOLRv1のサポートについて紹介します。
カラフルな文字をブラウザーで描画するには？
ブラウザーでフォントを描画するとき、通常はCSSを用いて色付けを行います。この色付けは文字全体に色付けを行うため、文字へのグラデーションなど複数の色を描画することできません。
しかし、例外的に絵文字だけはカラフルに描画することができています。
カラフルな絵文字が特徴的なzenn.devのトップページ
これはブラウザーが絵文字をシステムから画像として読み出して、描画しているからです。（Appleのフォントを利用している場合）
画像として読み出しているため、拡大すれば画像は荒くなりますし読み込む絵文字の量が増えればそれにかかる時間も増加します。
COLRとは
より便利に、カラフルなフォントを読み込む方法としてCOLRがあります。COLRとはBlink, Google Fonts, Microsoftなどにより開発されたベクターフォントフォーマットです。
もとはCOLRv0でこれを発展させたものが、COLRv1になります。COLRv0はすでに多くのブラウザーで実装されています。
caniuse.comより
ベクターフォントのフォーマットとはどのようなものでしょうか？
コンピューターによる画像の扱い方にはビットマップとベクターの２種類があります。
By The original uploader was Darth Stabro at English Wikipedia. - Transferred from en.wikipediato Commons by Pbroks13 using CommonsHelper., CC BY-SA 3.0
画像からもわかるようにベクターを利用すると拡大しても画質が悪化しないのが特徴です。
またbitmapフォントと比較してフォントサイズを1/5以下に抑えることが可能です。よって、描画時間の減少が期待できます。
ベクターフォントフォーマットは2Dレンダリングエンジンに対して、どのようにしてフォントを描画するかを指示します。
歴史的な経緯
詳しい方は「これまでもSVG Fontを利用することで、色付きベクターフォントを利用することができたのでは？」と思うかもしれません。
これはOpenType SVGといいMozillaとAdobeの開発した形式です。
SVGは2016年の1月27日にOpenTypeの一部として承認されました。[1]
当初はFirefoxのみで利用可能でしたが同年8月15日にはEdgeがサポートを開始しました。[2]
しかし、Chromium（Chromeのソース）はOpenType SVGのサポートを行わずCOLRの開発に取り組み始めました。その理由について次のように述べられています
Comment 18 by e...@chromium.org on Thu, Aug 3, 2017, 12:10 AM GMT+9
Primarily for security and performance reasons.
Supporting SVG fonts would require a second, dedicated, SVG implementation which would have major binary size and memory usage implications. Even so the performance would be worse than for any other font format.
Additionally we feel it isn't a suitable format for fonts as it has no provisions for hinting.
COLR/CPAL on the other hand is built on top of existing font technology, can be supported with minimal overhead and already supports hinting and variable fonts.
Not supporting gradients is unfortunate but that alone isn't worth the overhead, at least not for the time being.
要約すると
- SVGフォントの実装には多くのバイナリーサイズとメモリ使用量を必要とする
- フォントヒンティングの規定がないためフォントには適さない
- COLR/CPALは現在の技術においてベストであり、最小限の追加実装・可変フォントのサポートがすでにある
- （当時COLRv0は）グラデーションをサポートしていないのは残念であるが、SVGの実装コストと比較すれば些細なものである。
実際COLRは複数のフォントにまたがって同一のレイヤーが実装されている場合には、再利用を行うためパフォーマンス的にも有利です。
2022年現在もChromiumはOpenType SVGを実装していません
Applications that support OpenType-SVG fonts
- Photoshop, version CC 2017 and above
- Illustrator
- Firefox, version 32 and above
- Microsoft Edge, Windows 10 Anniversary Edition and above
- In Windows 10, the DirectWrite and Direct2D platform components allow OpenType-SVG support in any apps that use those APIs
もちろんOpenType SVGはベクターフォントフォーマットとして確立されていますが、その後は経緯は不明ですが各ブラウザーでCOLRv0のサポートが進みました。
COLRは現在次の標準規格となることを目指しています。
Firefoxの開発者もOpenType SVGがCOLRに取って代わられる可能性が高いと話しています。
My expectation is that COLRv1 may essentially supersede SVG-in-OT, and in due course we will be able to consider deprecating that format and eventually removing support for it.
https://bugzilla.mozilla.org/show_bug.cgi?id=1740525#c0
COLRは今後どんな場面で使われるか
先程紹介した絵文字の例はもちろんのこと、ブラウザーはフォントをテキストを表示するためだけでなくアイコンや芸術的な文字を表示するために使用しています。
影の濃淡なども表現できるようになるため、筆などを使った文字も使われるようになるのではないでしょうか？
COLRはこれらの可能性を更に向上させると思われます。
COLRは2022年2月1日リリース予定のChrome 98よりサポートされ、順調に行けば今後他のブラウザーでもサポートされるのではないでしょうか。
関連
Discussion