Build COLR TTFs with nanoemoji

[mavit]

This is done via the container at https://gitlab.com/mavit/nanoemoji-container.

For me, the resulting COLR TTFs work in Firefox and in the Gnome desktop on Fedora 32 (although they display rather small).

Caveats:

• It may be premature to replace scfbuild for SVG builds. If we decide to go ahead without scfbuild, then we’ll want to remove the remaining files related to it. If we decide to keep scfbuild, then we’ll want to revert those parts of this patch. In either case we’ll want to update the readme to link to the new outputs.
• I’ve tested this with Podman, not Docker.

Relates to #93.

[mavit]

Any feedback?

[carlinmack]

This is super cool! I think @b-g would be responsible for testing this with the other fonts.

In the meantime, could you attach some screenshots?

Thanks so much!

[mavit]

[carlinmack]

wow the quality is so much higher than we've ever had! Thank you for making them larger too, we still need to figure out what option we want to choose (#112 #257), but I think the size you have used is pretty good

[mavit]

I took the 1.3 scaling factor from d66343e, although I think it looks a little cramped and would be tempted to go for something smaller.

[b-g]

Dear @mavit! This is mega!

My apologies for the very long radio silence over the summer ... but I needed a break with the OpenMoji project :)

I totally would love to swap scfbuildwith your version of nanoemoji! scfbuild is no longer actively maintained and this in contrast with a very active nanoemoji project (backed/funded by Google) makes at least for me the decision very easy.

I've tried to build the fonts with npm run generate-font but failed. It would be important that the colorfont generator stays accessible in terms complexity and operation systems. A lot of the people on the project are not coding experts but eventually need to generate the fonts.

Could you check ./helpers/generate-fonts.sh: line 39: OpenMoji-${saturation^}: bad substitution so that I could give it a try as well?

bene@zwei-207 openmoji % npm run generate-font

> [email protected] generate-font /Users/bene/Documents/openmoji
> ./helpers/generate-fonts.sh

👉 generate-font-css.js
master: Pulling from mavit/nanoemoji-container
c7def56d621e: Pull complete 
f2931b91d78b: Pull complete 
f6b4b8ceb868: Pull complete 
Digest: sha256:77b71ae860417e531c72870d17128e878b87a8989479e7010073e607d04a937c
Status: Downloaded newer image for registry.gitlab.com/mavit/nanoemoji-container:master
registry.gitlab.com/mavit/nanoemoji-container:master
./helpers/generate-fonts.sh: line 39: OpenMoji-${saturation^}: bad substitution
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate-font: `./helpers/generate-fonts.sh`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] generate-font script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bene/.npm/_logs/2020-10-15T07_18_22_557Z-debug.log

[mavit]

I'm guessing you're using MacOS, here, because it turns out that that has an ancient version of bash which doesn't support the ${variable^} feature. I'll move this substitution into the container, where we have a known version.

[carlinmack]

you should shellcheck your bash scripts, it's helpful for catching stuff like this :)

[mavit]

you should shellcheck your bash scripts, it's helpful for catching stuff like this :)

This is good advice, but I do, and it doesn't help here: ShellCheck knows that ${variable^} needs Bash, but we are using Bash, so it doesn't warn.

[b-g]

Yes I'm on macOS, using zsh (note: 10.15 Cataline replaced bash with zsh).

% zsh --version
zsh 5.7.1 (x86_64-apple-darwin19.0)

Still the same error.

Yes would be great to move as much as possible inside a fully controlled docker image.

[mavit]

Yes I'm on macOS, using zsh (note: 10.15 Cataline replaced bash with zsh).

/bin/bash will get used anyway, here, since that's what's specified on the #! line of the script.

Still the same error.

Sorry, I overlooked a second place where this syntax was used. Please try it again.

[dnlutz]

o.k. … now i managed to test "OpenMoji-Color.SVG.ttf" on my mac.
everything looks fine in firefox (screenshot), but the font doesn't display any glyphs in textedit or adobe illustrator. what's interesting though: when i convert the openmoji text to paths then all emoji suddenly show up in illustrator.

[mavit]

Thanks for testing again.

The latest news from the nanoemoji project is that they think they now have SVG fonts built with their lossy picosvg compression working in Adobe apps and Safari. Lets wait for them to release a version that includes these improvements, then we can try again.

[mavit]

Okay, there's another SVG TTF built with nanoemoji 0.8.1 at
https:/hfg-gmuend/openmoji/blob/b4972b4ca68637a7899d1539bccfc7d97ec2eede/font/picosvgz/OpenMoji-Color.SVG.ttf. Could someone test this on macOS, please?

I think we might be nearly there. 🤞

[dnlutz]

i have to admit that i just discovered an older copy of the openmoji font in a subfolder of my fonts folder (where it did not belong to – sorry!)

but now the font works perfect in firefox AND in adobe illustrator!
in textedit i still discovered a bug though: some smileys and persons are not displayed (screenshot)

[mavit]

i have to admit that i just discovered an older copy of the openmoji font in a subfolder of my fonts folder (where it did not belong to – sorry!)

Ah, that's good to hear. In that case, could you re-test https:/hfg-gmuend/openmoji/blob/b4972b4ca68637a7899d1539bccfc7d97ec2eede/font/untouchedsvgz/OpenMoji-Color.SVG.ttf?raw=true

in textedit i still discovered a bug though: some smileys and persons are not displayed (screenshot)

Does Safari do the same thing? It sounds like this could have the same cause as googlefonts/nanoemoji#276.

[dnlutz]

the re-test shows exactly the same result in textedit.
in firefox everything looks fine.

safari and chrome don't display any openmoji at all : /
there's nothing to see but "ABC XYZ Lorem ipsum" …
i'm sorry – but it looks like the struggle continues ; )

[mavit]

In that case, let's stick with using scfbuild for making SVG fonts for use on macOS. We can still use nanoemoji for black and white fonts and COLR/CPAL fonts.

[gusbemacbe]

@b-g and @carlinmack

I have tested @mavit's COLR font on Edge on Linux and it worked:

Cc: @jmontane

[gusbemacbe]

It also worked on VSCode editor and integral terminal, using COLR font. The flags used to not work on integrated terminal in reference to microsoft/vscode#69900.

[RobertWinslow]

Here's a COLRv0 OpenMoji Font updated to Emoji 14.0
https:/Emoji-COLRv0/Emoji-COLRv0/blob/main/fonts/OpenMojiCOLRv0.ttf

Built using NanoEmoji. It's far from perfect, but may be useful to those who want a functioning color webfont to use right now.
It worked on all the browsers I tried on MacOS and Windows.
Here's a browser test page:
https://emoji-colrv0.github.io/Emoji-COLRv0/emojitable

[b-g]

Hi @RobertWinslow, many thanks for this! Did quickly check the browser test page ... looks quite good on macOS (Firefox, Safari and Chrome)!

@dnlutz could you please double check the font in Adobe CC and Glyphs, too?

Here's a COLRv0 OpenMoji Font updated to Emoji 14.0
https:/Emoji-COLRv0/Emoji-COLRv0/blob/main/fonts/OpenMojiCOLRv0.ttf

[mavit]

Closing in favour of #422.

[dnlutz]

@JeppeKlitgaard

Sorry that it took some time but now i also checked you font files:

MacOS 12.6 / Adobe Illustrator

OpenMoji-black-glyf.ttf
works in Adobe Illustrator. But the font contains a big number of glyphs without unicode encoding that contain chopped bits and pieces (screenshot).

OpenMoji-color-picosvgz.ttf
makes illustrator crash.

OpenMoji-color-untouchedsvgz.ttf
looks good and works fine in Adobe Illustrator.