https://github.com/RoelN/ChromaCheck

Feature test for color font support in browsers
https://github.com/RoelN/ChromaCheck

Last synced: about 2 months ago
JSON representation

Feature test for color font support in browsers

• Host: GitHub
• URL: https://github.com/RoelN/ChromaCheck
• Owner: RoelN
• License: mit
• Created: 2015-12-28T20:07:36.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-07-08T21:05:19.000Z (over 1 year ago)
• Last Synced: 2024-10-15T13:36:59.284Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://pixelambacht.nl/chromacheck
• Size: 145 KB
• Stars: 79
• Watchers: 7
• Forks: 9
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-typography - ChromaCheck - Feature test for color font support in browsers. (JavaScript)

README

        
# ChromaCheck

ChromaCheck is a feature test to check if browsers support one of the five color font formats (see list below) when loaded as webfonts through `@font-face`. [See it in action here!](https://pixelambacht.nl/chromacheck)

Also, check out this this older article on [color font formats](http://pixelambacht.nl/2014/multicolor-fonts/), written before COLRv1 existed.

**Please note that ChromaCheck currently [doesn't work for Edge 18+](https://github.com/RoelN/ChromaCheck/issues/40) :-(**

## How it works

We test for color font support by rendering color glyphs to canvas, and then reading out the pixels to see if we have any color.

Older versions of Firefox, the first browser to support color fonts, had [some](https://bugzilla.mozilla.org/show_bug.cgi?id=1209480) [bugs](https://bugzilla.mozilla.org/show_bug.cgi?id=1237640) that needed to be circumvented. This was done by sticking the font in an SVG image, and then drawing that image on canvas. This is how ChromaCheck still works today.

## How to use

Include `chromacheck-min.js` in your page and it'll add classes to the `html` element for each supported color format:

* `chromacheck-svg` if there's support for OpenType-SVG.

* `chromacheck-colr` if there's support for COLRv0.

* `chromacheck-colrv1` if there's support for COLRv1.

* `chromacheck-sbix` if there's support for SBIX.

* `chromacheck-cbdt` if there's support for CBDT/CBLC.

Take note that this test is async, so it can take a split millisecond before the classes are added.

## Known issues

* IE11 on Windows 8 will report false negatives because of [a bug in drawing SVG to canvas in IE11](https://connect.microsoft.com/IE/feedback/details/809823/draw-svg-image-on-canvas-context).

* IE10 in Windows 8 will report false negatives because of a very strict security measure when [drawing SVG to canvas](https://github.com/RoelN/ChromaCheck/issues/32).

* CBDT/CBLC might be reported as not being supported, because ChromaCheck checks for the implementation as described by the spec. A few implementations in the wild, specifically Chrome on Android, do support CBDT/CBLC, but only when implemented with the specs during the _proposal phase_ instead of the final specs. [More info.](https://github.com/RoelN/ChromaCheck/issues/8)

The SVG-on-canvas method might be replaced or extended with a non-SVG method to address the SVG related issues. Likewise it'd be possible to include two CBDT/CBLC fonts to test with: one on the old specs, one one the new. If you have a need for that right now, check out the `feature/regular-test-page` branch.

## License

ChromaCheck is released under the [MIT license](https://github.com/RoelN/ChromaCheck/blob/master/LICENSE.md).