Customizing Color Fonts on the Web | Hacker News Reader

Customizing Color Fonts on the Web

webkit.org

66 pointsfeross16 comments

Weirdly, using Safari on macOS, clicking on the first of the "The Round Table" examples causes the page to unexpectedly reload, "because a problem occurred". Clicking on other examples doesn't do this.

Any other Mac users see that, or is it just me?

I can reproduce same behaviour on Safari 15.5

Would this enable calligraphy style gradation of color within a stroke? Would love to see a font that has very subtle black level shifts.

There are several color font formats. This one can't do gradients. You can check your browser's support at https://pixelambacht.nl/chromacheck/. SBIX is Apple's format and it basically just embeds PNGs in the font which isn't scalable. COLRv0 is Microsoft's format and it basically just stacks single-color glyphs, so it's scalable but doesn't do gradients. COLRv1 is newer (2019) and adds support for gradients. Opentype-SVG is Mozilla and Adobe's format and it embeds SVGs for glyphs. You can do gradients and maybe even animation, and it scales. CBDT/CBLC is Google's format and it also includes bitmap images like SBIX. You can make fonts that support multiple of these with https://github.com/googlefonts/nanoemoji.

No, this is a bit different. This new feature lets font authors define "layers" that can be individually colored by the end-user. Color gradation you describe is technically possible but would require many layers since the feature doesn't accommodate for partial transparancy or gradients.

Whomever's idea it was not to put any screenshots in the article...

The article starts with a screenshot here: https://webkit.org/wp-content/uploads/palettes.png

Though I agree it could use a few more inline with the live examples, so you can check if your browser is already using what they announce.

Here you go → https://i.imgur.com/M7GINpG.png (it seems that it only works in Safari).

This screenshot was made from a browser that does not support this stuff, so it's not very helpful. Every pair of examples should show different colors, and on your screenshot they're all the same (except of the very last example).

Seems to be at least partially supported in the screenshot as the characters have multiple tones, and it's very different to what I see in Firefox.

Still though, I see the same as you describe in Safari.

I thought I was going crazy because I was sure I was looking at screenshots. But no! Live examples in supported browsers.

Took me a while to realise that the examples weren't screenshots but actual colour font rendering in my browser! (Firefox on Android)

The examples do not work on Firefox on Android; they're Safari-only.

They do however render coloured fonts in non-Safari browsers (using basic CSS features that have existed a long time), but they're monotone per-character. The new safari feature supports multiple colours shown within a single character at once.

The lack of screenshots makes the article very confusing for non-Safari readers (as I mentioned in another comment)

Hmmm... Looks identical in Chrome 101 and Safari 15.4. Perhaps Chrome also landed this?

https://i.imgur.com/KASP45O.jpg

Ah.. yeah I hadn't checked Chrome. Looks like it supports it too.

Ah, now I see the difference. Cheers!

Reply on news.ycombinator.com