5 ms·

Customizing Color Fonts on the Web

66 points by feross 4y ago

lucideer 4y ago
Whomever's idea it was not to put any screenshots in the article...
- mdoms 4y ago
- yathern 4y ago
  The article starts with a screenshot here: https://webkit.org/wp-content/uploads/palettes.png 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.
- guessmyname 4y ago
  Here you go → https://i.imgur.com/M7GINpG.png https://i.imgur.com/M7GINpG.png (it seems that it only works in Safari).
  - seba_dos1 4y ago
    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).
    - lucideer 4y ago
      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.
- deleted 4y ago
  [deleted]
- TranquilMarmot 4y ago
  I thought I was going crazy because I was sure I was looking at screenshots. But no! Live examples in supported browsers.
ballenf 4y ago
Would this enable calligraphy style gradation of color within a stroke? Would love to see a font that has very subtle black level shifts.
- easrng 4y ago
  There are several color font formats. This one can't do gradients. You can check your browser's support at https://pixelambacht.nl/chromacheck/ 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 https://github.com/googlefonts/nanoemoji.
- pointlessone 4y ago
  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.
Jaruzel 4y ago
Took me a while to realise that the examples weren't screenshots but actual colour font rendering in my browser! (Firefox on Android)
- lucideer 4y ago
  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)
  - lelandfe 4y ago
    Hmmm... Looks identical in Chrome 101 and Safari 15.4. Perhaps Chrome also landed this? https://i.imgur.com/KASP45O.jpg https://i.imgur.com/KASP45O.jpg
    - lucideer 4y ago
      Ah.. yeah I hadn't checked Chrome. Looks like it supports it too.
      - deleted 4y ago
        [deleted]
    - Jaruzel 4y ago
      Ah, now I see the difference. Cheers!
- deleted 4y ago
  [deleted]
jfk13 4y ago
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?
- mrunseen 4y ago
  I can reproduce same behaviour on Safari 15.5

66 points by feross 4y ago

lucideer 4y ago

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

mdoms 4y ago
yathern 4y ago
The article starts with a screenshot here: https://webkit.org/wp-content/uploads/palettes.png 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.
guessmyname 4y ago
Here you go → https://i.imgur.com/M7GINpG.png https://i.imgur.com/M7GINpG.png (it seems that it only works in Safari).
- seba_dos1 4y ago
  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).
  - lucideer 4y ago
    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.
deleted 4y ago
[deleted]
TranquilMarmot 4y ago
I thought I was going crazy because I was sure I was looking at screenshots. But no! Live examples in supported browsers.

ballenf 4y ago

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

easrng 4y ago
There are several color font formats. This one can't do gradients. You can check your browser's support at https://pixelambacht.nl/chromacheck/ 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 https://github.com/googlefonts/nanoemoji.
pointlessone 4y ago
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.

Jaruzel 4y ago

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

lucideer 4y ago
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)
- lelandfe 4y ago
  Hmmm... Looks identical in Chrome 101 and Safari 15.4. Perhaps Chrome also landed this? https://i.imgur.com/KASP45O.jpg https://i.imgur.com/KASP45O.jpg
  - lucideer 4y ago
    Ah.. yeah I hadn't checked Chrome. Looks like it supports it too.
    - deleted 4y ago
      [deleted]
  - Jaruzel 4y ago
    Ah, now I see the difference. Cheers!
deleted 4y ago
[deleted]

jfk13 4y ago

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?

mrunseen 4y ago
I can reproduce same behaviour on Safari 15.5