openmoji
openmoji copied to clipboard
hfg-gmuend
Improve/fix OpenMoji Colorfont (and Black)
The OpenMoji colorfont is currently just a proof of concept and only works in Firefox.
We hope to improve this to proper colorfont in the near future (or at least in the long run). Sorry + stay tuned and follow this thread for updates!
This is to gather a few links.
Currently we use https://github.com/hfg-gmuend/openmoji/blob/master/font/README.md basically SVGinOT Color Font Builder a 3-4 year old and stale project. The resulting Colorfont seem just partly to support the standard. They just work in Firefox :(
Other links:
- The google noto-emoji repo seems to have the tooling to generate PNG based colorfonts
- https://colorfonts.langustefonts.com/howto.html (lot's of good links, but resulting font is also just Firefox)
To simplify the discussion: Which format should we support? Right now, there are four: PNG based: Google's CBDT/CBLC tables and Apple's SBIX table Vector based: Microsoft's overlapped glyphs (COLR/CPAL tables) and Mozilla and Adobe’s SVG (SVG table)
These formats are supported as follows at the time (source: https://pixelambacht.nl/2014/multicolor-fonts/):
Checking with https://pixelambacht.nl/chromacheck/ there also seems to be supported SBIX in Chrome.
My opinion: there's no way around SVG because it's much more powerful than COLR. I guess, sooner or later all browsers will support SVG Color Fonts.
Our situation:
From left to right: Chrome, Firefox, Safari (I'm on Mac, so no quick check for Edge, ...)
Safari should support SVG Color Fonts. So, that's a bug.
Hi @bohnacker, many thanks for putting this together. I'm agnostic and happy to support a single standard e.g. SVG properly ... just it should be 100%. Currently our colorfont is just rendered in Firefox, but should also usable in Safari, Adobe CC, Sketch, Affinity ... which is not the case. Also @dnlutz is strongly in favor of SVG ... Hence I think SVG is the best bet, however I couldn't find a good tooling for it back at the beginning of 2019. Also note: Google Noto Emoji tooling is PNG based.
I don't know what joypixels (emojione) is doing, but their color font seems to display nicely in browsers and qt apps (including konsole) on Arch linux with the repo package, which fetches joypixels-android.ttf.
Hi @bohnacker, https://www.glyphrstudio.com/online/ a free online font editor might be interesting in terms of debugging the black font. (But also no colorfont support currently https://github.com/glyphr-studio/Glyphr-Studio-1/issues/270)
Related font issue from #96:
Not sure how valid this is but using the black openmoji font and vscode, it shows ones we support as a single character and others as multiple characters
However we do have a pirate flag emoji so maybe this is also an issue with the font that we haven't realised?
I checked a few things with our color and black fonts and compared it with the fonts "EmojiOne Color" and "Twitter Color Emoji". I chose those because they are not from a vendor of operating systems (Apple, Windows, Google). EmojiOne is an Opentype font while the one from Twitter is Truetype. Ours is Truetype too.
It appears that our fonts are not that bad in general, but there are quite some things to improve.
The following screenshot is made in InDesign on Mac and it seems to handle the Openmoji Color font perfectly. Openmoji Black has some problems. The conversion from SVG to Truetype glyphs ignores stroke-linecap="round" and stroke-linejoin="round" (most obvious on the smiley and the TM-sign). Also, overlapping paths are not converted well (hand, soccer ball, santa claus).
For the black font I see two possible solutions:
- Remove all strokes from all our source emojis and convert it to filled areas.
- Find a better conversion algorithm. The first solution is not very practical and desirable. I think it's good to have line elements in the source files as much as possible. Otherwise improving the source emojis will be a hassle.
I found another problem with our fonts in InDesign. Ligatures sometimes are split into parts when text gets wrapped. It happend with the hand and the horse but not with the dark santa claus and the flags. I'll try to find out why.
Comparision of the behaviour in browsers:
Firefox (Mac and Windows):
Some problems with our color font shows up. Some strokes are not scaled correctly. I'm mot complete sure why. Maybe it's because there are elements on the color layer that have both a fill color and a stroke color. Or it has something to do with transforms that are still in some emojis. Edit: Quite sure it's the first guess... the hand with yellow skin is displayed correctly, all others not because they get a stroke color while building.
Safari (Mac):
Only EmojiOne works (maybe because it's Opentype):
Edge (Windows):
Handles our color emojis perfectly.
Maybe we could use some other libraries like this to convert all strokes in the black SVGs to areas before creating the truetype glyphs: https://www.npmjs.com/package/js-clipper
It seems to support all we need (stroke-linecap="round" and stroke-linejoin="round"). The fact that it is not developed further on is not a problem in my opinion because it has no dependencies.
Or has anybody good experiences with other libraries for path operations?
Hi @bohnacker! A belated happy new year + many thanks for the investigation! That sounds a lot more promising than I've anticipated! Yay! A few comments/thoughts:
OpenMoji Black
- I would vote to introduce a dedicated build process which converts all problematic strokes to shapes ... but not to alter the src svg files
- Instead of js-clipper I would rather bet on paper.js (in node.js) with the paperjs-offset plugin. (See also the discussion on Parametrized stroke outlining / expanding / offsetting with paper.js)
- Q: Would we have to convert every stroke or just the ones with stroke-linecap="round" and stroke-linejoin="round" attributes?
OpenMoji Color
- Q: Is the issue with svgs which have both a fill color and a stroke color a Firefox bug only? If so ... should we simply ignore it?
- Q: Should we ditch current color font generator or stick with it? I can offer to improve the generator "scfbuild" to support properly generating the two fonts without the current hustle ... but this makes only sense if the scfbuild is worth the invest. (I guess it won't be possible to generate a colorfont in opentype flavor with scfbuild, or?)
Hi @b-g, some answers to your questions and suggestions:
I would vote to introduce a dedicated build process which converts all problematic strokes to shapes ... but not to alter the src svg files
Yes, I think so too. That's the only approach that makes sense.
Instead of js-clipper I would rather bet on paper.js (in node.js) with the paperjs-offset plugin. (See also the discussion on Parametrized stroke outlining / expanding / offsetting with paper.js)
I also agree. I had a look at js-clipper and found that it converts all curves to polygons. The result will be glyphs that will look bad when scaling them up a lot. Still we have to check if paperjs is doing everything correctly.
Would we have to convert every stroke or just the ones with stroke-linecap="round" and stroke-linejoin="round" attributes?
Best would be to convert every stroke beforehand because scfbuild (or whereever this is done) has also problems with paths that are crossing itself (see hand and soccer ball in the above examples). In the end (as a glyph) everything will be areas.
Q: Is the issue with svgs which have both a fill color and a stroke color a Firefox bug only? If so ... should we simply ignore it?
As far as I've seen, it's a Firefox only bug. Maybe we could ignore it and hope for a bug fix on the Firefox side.
Q: Should we ditch current color font generator or stick with it? I can offer to improve the generator "scfbuild" to support properly generating the two fonts without the current hustle ... but this makes only sense if the scfbuild is worth the invest. (I guess it won't be possible to generate a colorfont in opentype flavor with scfbuild, or?)
I think we could stick with scfbuild. In general it is doing a good job as far as I've seen. I don't know if it is possible to switch to opentype using scfbuild. I think the truetype glyph creation is done with the fontforge library which should also be capable of generating opentype glyphs. But there might still be a lot more things to change...
Note this image is 5 years out of date (it's from 2014):
COLR works fine in Chrome now
https://pixelambacht.nl/chromacheck/
@mikemaccana Thanks for the heads up! :)
@bohnacker Many thanks + agree! Should I go ahead and improve scfbuild with a dedicated --black-only flag so that we can streamline the font build process, or is this too earlier and currently not helpful?
PS is there a webpage we can see openmoji rendered in COLR format, as a webfont?
@b-g: If you want you can streamline the font building but it's not urgent from my side. I'll start testing paperjs stroke conversion and exploring the other bugs.
@mikemaccana: We haven't build the font in COLR format (and I'm quite sure that we can't do that in the near future). We concentrate on debugging the SVG color font.
via @carlinmack
The OpenMoji colour font kinda works! You can easily test this by
- install the OpenMoji colorfont
- go to https://unicode.org/Public/emoji/13.0/emoji-test.txt on (Firefox developer edition)
Note that Pinata is rendered in OpenMoji now. Yay!
@dnlutz But it also shows that the size of the glyphs is way too small! We should tweak the size in https://github.com/hfg-gmuend/openmoji/blob/master/font/scfbuild-color.yml#L8. What size would you suggest?
I would suggest to scale the OpenMoji by factor 1.3
The Y-position is perfect in relation to the baseline.
Looks good!
We should highlight where the baseline is in openmoji-template.svg
Done. Scaled up by 1.3.
Scale 1 / Scale 1
Scale 1.3 / Scale 1
Scale 1.3 / Scale 1.3
cc @dnlutz
Tip top / thank you! These emoji sizes now work much better within "normal" text fonts.
Ligatures sometimes are split into parts when text gets wrapped. It happend with the hand and the horse but not with the dark santa claus and the flags. I'll try to find out why.
@bohnacker the people at GitLab also noticed this! https://about.gitlab.com/blog/2018/05/30/journey-in-native-unicode-emoji/
@mikemaccana you can view how the the emojis look as a font on this website https://hfg-gmuend.github.io/openmoji/ by selecting Font in the top bar. There are some bugs in the font but it's pretty good
I see that Google have started work on a new tool, nanoemoji, to build colour fonts in a variety of formats. Not all formats are currently implemented, and it doesn't seem to be production quality yet, but I think it's worth keeping an eye on.
Thanks @mavit! This is a good pointer! Would you have time to give it spin? ;) Our color font generator seems not the best bet in the long run ... We are keen to have better and more fonts to render OpenMojis on more platforms.
Status update for nanoemoji. It worked for building COLR TTFs when I first tried it, but by the time I got around to containerising the build it had broken because of googlefonts/picosvg#65.
Hi @mavit! Many thanks for keeping us posted! Building color fonts via nanoemoji would be mega! Fingers crossed that the bug is soon resolved!
googlefonts/picosvg#65 has been closed. Just played around with nanoemoji 0.4.1 and openmoji 13.0 and got it to work in chrome and firefox:
linux chromium openmoji-color-cff2_colr_0.otf:
While nanoemoji can generate colr v1 fonts these don't seem to be supported by browsers yet.
Here are the fonts I generated if you want to avoid having to build them yourselves:
While nanoemoji can generate colr v1 fonts these don't seem to be supported by browsers yet.
It depends on your OS. They mostly work fine on Linux, but not on MacOS. I don't think we've heard either way about Windows, yet.
I'm testing the new font form the zip file above. I really like the simplicity of the design of openmoji and I'm glad that I can use it form applications which just use freetype2, but this rendered font is incredibly small, compared to the other emoji fonts. I can barely see what's depicted in a normal text (12-14pt) on my 1080p display of my laptop. The font looks really great when I set it to be more than 20pt. Edit: Also I've noticed some emojis are missing in yweb (webkit2gtk).
