[COLRv1] some vector region-flags display jagged edges as if not anti-aliased

[anthrotype]

As user @Soberia reported in https://github.com/googlefonts/noto-emoji/pull/389#issuecomment-1134895059

Seems flags edges need antialiasing. Default system font (Google Chrome on Windows Subsystem for Android) vs. COLRv1

[drott]

(Google Chrome on Windows Subsystem for Android)

What is that?

Is it possible to get/generate higher resolution screenshots? Is the issue that underlying layers show up as fringes on the edges?

To understand the issue better: If it's the fringes on the sides - how come the CBDT/CBLC images rendered from SVG do not have them? Is this a side effect of converting contours to font (TrueType, CFF2?) contours?

[anthrotype]

Is the issue that underlying layers show up as fringes on the edges?

I believe so, yes.

how come the CBDT/CBLC images rendered from SVG do not have them?

because they are produced differently, the original non-waved SVG flags (from Wikipedia) get first converted to rectangular PNGs, then warped by applying some Cairo effect (see waveflag.c code in this repo) directly on this bitmaps.

The vector flags start with the same original SVG flags from wikipedia, but these are warped using https://github.com/rsheeter/warp tool producing the waved flags in third_party/region-flags/waved-svg directory, then these become the source for nanoemoji compiler, which converts them to COLRv1.

Is this a side effect of converting contours to font (TrueType) contours?

possibly yes, but we need to confirm. glyf contours can only contain integer coordinates. We can try to tweak the --upem flag in nanoemoji and increase the granularity of this integer grid and see if that mitigates the effect, but the whole font may become larger (smaller numbers usually get packed in a more compact way in OT tables).

[anthrotype]

this static html contains all the flags in Noto-COLRv1.ttf and has a black background to highlight this issue. If you place it next to the Noto-COLRv1.ttf file inside noto-emoji repository's fonts/ directory and load it on Chrome, even on desktop (I tried macOS with Chrome 103) you will see the jagged effect affecting many of the flags:

Noto-COLRv1-flags.html.zip

E.g. take Finland, notice where the blue meets the white along the borders

[anthrotype]

I modified the Palestinian flag from the waved-svg directory in this repository to add a black backround, you can see the grey border at the top:

Original svg is https://github.com/googlefonts/noto-emoji/blob/main/third_party/region-flags/waved-svg/emoji_u1f1f5_1f1f8.svg

The black horizontal strip at the top overlaps almost perfectly a white rectangle which fills the entire background of the flag.

this shows that the issue happens in the waved SVG files as well, even if in less visible form. The waved-svg are the source for the COLRv1 font. In the latter, maybe this jagged effect from almost overlapping layers is compounded by the fact that curves get converted to truetype and rounded to integer, but I'm not 100% sure.

[Soberia]

Is it possible to get/generate higher resolution screenshots?

From https://soberia.github.io/matchmoji/ open setting section and change Emoji to Noto-Emoji and select only the Flags.

[anthrotype]

https://soberia.github.io/matchmoji/

This game is amazing! I really suck at it though 🤣

[Julien-Marcou]

You can also see this problem here:

https://emoji.julien-marcou.fr/

Go to the "Flags" tab, choose "Noto Color Emoji" instead of "System's Default" (switch to "Dark mode" to better see the problem).

Some flags like the "French flag" have uggly "white pixels" on the edges