_______               __                   _______
       |   |   |.---.-..----.|  |--..-----..----. |    |  |.-----..--.--.--..-----.
       |       ||  _  ||  __||    < |  -__||   _| |       ||  -__||  |  |  ||__ --|
       |___|___||___._||____||__|__||_____||__|   |__|____||_____||________||_____|
                                                             on Gopher (inofficial)
   URI Visit Hacker News on the Web
   URI   Customizing Color Fonts on the Web
   DIR   text version
        jfk13 wrote 2 days 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 wrote 2 days ago:
          I can reproduce same behaviour on Safari 15.5
        Jaruzel wrote 2 days 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 wrote 2 days 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 wrote 2 days ago:
            Hmmm... Looks identical in Chrome 101 and Safari 15.4. Perhaps
            Chrome also landed this?
   URI      [1]: https://i.imgur.com/KASP45O.jpg
              Jaruzel wrote 2 days ago:
              Ah, now I see the difference. Cheers!
              lucideer wrote 2 days ago:
              Ah.. yeah I hadn't checked Chrome. Looks like it supports it too.
        lucideer wrote 2 days ago:
        Whomever's idea it was not to put any screenshots in the article...
          TranquilMarmot wrote 2 days ago:
          I thought I was going crazy because I was sure I was looking at
          screenshots. But no! Live examples in supported browsers.
          guessmyname wrote 2 days ago:
          Here you go → [1] (it seems that it only works in Safari).
   URI    [1]: https://i.imgur.com/M7GINpG.png
            seba_dos1 wrote 2 days 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 wrote 17 hours 25 min 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.
          yathern wrote 2 days ago:
          The article starts with a screenshot here: [1] 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.
   URI    [1]: https://webkit.org/wp-content/uploads/palettes.png
        ballenf wrote 2 days 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.
          pointlessone wrote 2 days 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.
          easrng wrote 2 days ago:
          There are several color font formats. This one can't do gradients.
          You can check your browser's support at [1] . 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 [2] .
   URI    [1]: https://pixelambacht.nl/chromacheck/
   URI    [2]: https://github.com/googlefonts/nanoemoji
   DIR <- back to front page