Confirm that CBDT/CBLC glyph actually works

[RoelN]

Edit: current situation in a nutshell:

CBDT spec proposal stated no glyf table should be present in CBDT/CBLC fonts. Current spec doesn't say anything about this. Fonts built on the proposal specs will fail in browsers with OTS, as the absence of a glyf table makes OTS reject them. In current FreeType implementations (Chrome on Android), these glyfless fonts work, and the color glyphs are shown.

For CBDT/CBLC fonts with a glyf table the glyph in the CBDT/CBLC table will be ignored, effectively always rendering the normal glyph, making it impossible to get the color glyph.

[RoelN]

CBDT/CBLC still will only be rendered when the font is installed on the OS, not when loaded through @font-face. To test if the font is working well, install it on a Linux/Android device and test it again.

[jungshik]

I haven't tried ChromaCheck, but I have a related issue.

When I tested https://pixelambacht.nl/demo/color-font-test.html, I was very surprised to find that none of Chrome-Linux, Chrome/Chromium OS and Chrome-Android works for CBDT/CBLC font (served as a web font). Why? Because I know that a color font with CBDT/CBLC works in those browser-platform combinations [1]. If it does not work any more, it's a regression.

Alarmed, I filed a bug against Chromium at http://crbug.com/605334. Then, I checked your CBDT/CBLC font in Chrome's DOM inspector. It has a color glyph (green circle with light green check mark inside) for "X" (capital). OTOH, your test page has 'x' (lowercase). When I changed 'x' to 'X', I got a color glyph. See the screenshot below (taken on Chrome OS).

BTW, I made a 2-line patch to make sbix font (as a web font) work for Blink (that will make sbix work in Chrome on Mac, Linux, Android, Chrome/chromium OS). For that patch to be committed, I need a Layout test. I wonder if I can use your test font (sbix) in my changelist. ( https://codereview.chromium.org/1911123002

Thank you for your test page and sorry for going tangential in the bug.

[1] On Linux-Chrome, you need recent versions of FreeType ( 2.5.x or later) and fontconfig.

/cc @behdad

[behdad]

Thanks Jungshik! Yes, would be great if you can release all your four test fonts, and the test page, as Open Source, on github.

[RoelN]

Thanks for reporting (and going tangential on) this!

Yikes, it looks like you're right. Somehow the CBDT/CBLC is mapped to the capital X. So this has been giving false negatives for a while then :(

I have been planning to deprecate that page and replace it by ChromaCheck. The test font used in ChromaCheck is a lot cleaner and combines all the formats in one font. The TTX file can be found in this repo. Would this font, or ChromaCheck, would suffice for the layout test?

Could you see how ChromaCheck reports CBDT/CBLC support? https://pixelambacht.nl/chromacheck/

[RoelN]

It looks like ChromaCheck fails on CBDT/CBLC. I'll look into that this weekend!

In the mean time, I've updated https://pixelambacht.nl/demo/color-font-test.html to use the capital x, so at least the green checkmark will be shown on Android/Chrome.

[behdad]

The test font used in ChromaCheck is a lot cleaner and combines all the formats in one font.

FreeType chooses between using either sbix or CBDT/CBLC if both are available in the same font. I don't think combining all is a good idea for a test font.

[RoelN]

@behdad Does it do that per character, or for the entire font?

Each test glyph in ChromaCheck's font is mapped to a different Unicode PUA value. So if a browser checks per character, this should work. Firefox seems to do this — it shows both the SVG (e904) and COLR (e900) glyph.

How does FreeType choose between CBDT/CBLC and sbix?

[RoelN]

It appears I have to create separate fonts anyway: the spec defines there shouldn't be a glyf table present, and the ChromaCheck font has one. Leave it out and the CBDT/CBLC color glyph renders properly, but the rest won't.

[RoelN]

Closing this and moving the solution to https://github.com/RoelN/ChromaCheck/issues/21

[RoelN]

@behdad @jungshik ChromaCheck now works for CBDT/CBLC, as well as the three others. The public test page has been updated: https://pixelambacht.nl/chromacheck/

[jungshik]

@RoelN Thanks.

Curiously, Chrome 51.0.2704.7 dev on Linux works well with both your new test (chromacheck/) and the original one (with 4 check in a circle) for CBDT/CBLC.

My trunk build of Chrome on Linux (that also passes through sbix table) show sthat both CBDT/CBLC and sbix fonts are supported at https://pixelambacht.nl/demo/color-font-test.html. However, your new test at https://pixelambacht.nl/chromacheck/ does not work for either of them.

[RoelN]

@jungshik Thanks for testing and sharing your results. Much appreciated!

Perhaps sbix fails in ChromaCheck in the trunk build because sbix is still mixed in with SVG and COLR/CPAL. Since I had to split off CBDT/CBLC to a separate font, I best do that for the other formats as well, like @behdad suggested. Hopefully that'll fix the sbix issue.

Why CDBT/CBLC fails in the trunk build, I don't know. It shoud work, as the only difference with Chrome 51.0.2704.7 dev is that support for sbix has been added, right? The only major difference seems to be WOFF in ChromaCheck, TTF in the old test — could that be the cause? Internally there are some minor differences in the fonts (e.g. having a achVendID of "GOOG" as opposed to " ") but none that look like a red flag to me.

If you want to look at the old fonts, please see https://github.com/RoelN/color-font-test that I've temporarily set up, until ChromaCheck works 100%.

[RoelN]

@jungshik I now believe this might be caused by the OpenType Sanitizer. It rejects fonts without a glyf table (OTS throws downloadable font: no supported glyph shapes table(s) present) or with an empty glyf table. But CBDT/CBLC requires no glyf table being present (although I can't seem to find where that is specced), and you most likely will want an empty glyf table for sbix fonts because otherwise the glyphs and bitmaps will overlap. I ran into this here: https://github.com/RoelN/ChromaCheck/issues/23#issuecomment-218485100

A commit to OTS that allowed empty tables was recently reverted: https://github.com/khaledhosny/ots/commit/56b9be8baddeb52ef15ec742bfcbf8e8df2ab681 And there is still an issue open about it: https://github.com/khaledhosny/ots/issues/52

This might explain why CDBT/CBLC fails, but not sbix as the font currently still has a valid glyf table. Maybe @behdad has an idea or wants to pair debug with me at TYPO? :)

EDIT: Seems you guys are already very much on top of this issue, sorry I missed that: https://github.com/khaledhosny/ots/issues/108

[jungshik]

@RoeIN, thank you for the pointer to khaledhosny/ots#52 (I've seen it before, but forgot). Anyway, that's different from what I have a trouble with my hacked sbix fonts (with and without glyf table ) in Chrome-Mac. Chrome-Linux (and Android by extension) is happy with either way (as long as I use a modified version of OTS to pass through a sbix font without glyf. A sbix font with glyf table just works without an OTS change), but Chrome-Mac is not happy. (Safari is half-way between). OTOH, your sbix font works fine. So, there's something wrong with my sbix font.

will want an empty glyf table for sbix fonts because otherwise the glyphs and bitmaps will overlap. I ran into this here: #23 (comment)

Thank you for the comment above. I'll see if the above helps.

[RoelN]

@jungshik I'd be happy to a look at your sbix fonts to try and help figure out what's going wrong, if they're public! (roel-at-pixelambacht-dot-nl)

[jungshik]

@RoelN Thanks ! My '2-char-only FruityGirl' with sbix (instead of CBDT/CBLC) was uploaded to khaledhosny/ots#108. "-b flag on ttx" (in #23 (comment)) might help, but haven't tried it yet.

[RoelN]

@jungshik The only thing that's a bit off is the metrics, see screenshot. The glyph is shown outside its bounding box. The metrics on the original glyf for 0x002a might have something to do with it (xMin="1000" yMin="500" xMax="1000" yMax="500"). The originOffsetY="32" in the sbix table might also cause problems (although setting it to 0 only moves it down a bit, but not fully inside the bounding box). Maybe your Chrome build with sbix rejects the font/glyph based on one of these details? Or for some reason it won't show the glyph because it's outside the bounding box (although I supposed it should)). I hope this helps!

[jungshik]

Thank you for taking a look ! @RoelN

The originOffsetY="32" In Chrome on Linux with FreeType, that's exactly what I need to get it positioned correctly. Moreover, my reading of sbix spec also indicates that that's the value to use. However, Safari does not think so (it's off-positioned as you found out. Presumably, your screenshot was taken with Safari? ) and Chrome on Mac with passing sbix does not show anything.

The metrics on the original glyf for 0x002a might have something to do with it (xMin="1000" yMin="500" xMax="1000" yMax="500").

Perhaps. That value is based on the actual ink in the contour I put in for U+002A in glyf table. Let me try to tweak with it.

[RoelN]

Update and note-to-self: currently using a CBDT font with glyf table, as the spec doesn't mention anything about that it shouldn't be present. (This was a requirement in the draft phase, though).

ChromaCheck still fails (tested in Chrome on Android 8). The old color font test does work there, but is rejected in Chrome on OSX because the glyf table is missing.

[behdad]

We need to fix FreeType to ignore glyf table for CBDT fonts. We already do that for sbix. @lemzwerg

[RoelN]

That'd be fantastic. With the glyf table removed from the CBDT test font, ChromaCheck works for Android. I wonder if ChromaCheck should include a test with and without glyf, to test for both situations.

[RoelN]

@behdad I updated the first post to reflect the current situation, I hope my understanding is correct!

[DeeDeeG]

Hi,

Just wanted to mention that, while Firefox is not super all-in committed to CBDT/CBLC on all platforms just yet, they're dipping their toes into supporting CBDT/CBLC. ChromaCheck doesn't detect Firefox's support though.

Firefox Nightly (and Beta?) for Linux (and Android?) is able to display fonts with CBDT/CBLC glyphs now, even in @font-face, as long as the following pref is set in about:config: ^{[Bug at Bugzilla.Mozilla]}

gfx.downloadable_fonts.keep_color_bitmaps = true

This does work for, say, loading Noto Color Emoji in @font-face.

However, even with this pref set, ChromaCheck doesn't say my browser supports CBDT/CBLC.

In summary: Firefox has pre-release, opt-in support for CBDT/CBLC on Android and Linux, ChromaCheck doesn't detect this support.

P.S. https://pixelambacht.nl/demo/color-font-test.html does detect CBLC/CBDT support in Firefox.

[DeeDeeG]

I think Firefox uses OTS, so it's essentially an upstream issue at OTS, which was already mentioned in this Issue. Sorry for the "duplicate report."

[RoelN]

No worries, thanks for reporting! I'll keep an eye on Firefox regarding CBDT support.

[drott]

I am working on this for web fonts at the moment, compare crbug.com/605334 and crbug.com/758209.

In my testing (bypassing ots) it only works with a font without glyf, yes, because FreeType prefers glyf over CBDT.

We need to fix FreeType to ignore glyf table for CBDT fonts. We already do that for sbix. @lemzwerg

Any pointers where that code is, @behdad? Maybe I can do my first FreeType patch :)

[drott]

Any pointers where that code is, @behdad? Maybe I can do my first FreeType patch :)

Is it 778a7e6a36912?

[RoelN]

FWIW, I'm planning to add a check for "legacy CBDT" to ChromaCheck, so it'll check with both a font with, and without the glyf table.

[drott]

Filed FreeType bug 53154 with proposed patch.

[behdad]

Nice. Will check. Thanks.

[behdad]

Another thing is, we built our fonts setting table version to 2. MS spec'ed it as having version 3... Watch out for which works where....

[JanisE]

For both Chrome 65.0.3325.162 and Chromium 64.0.3282.167 (not the very latest) I have (Linux, 64bit), https://pixelambacht.nl/chromacheck/ reports no font type supported, although I can see the green Google type icon on https://pixelambacht.nl/demo/color-font-test.html

[RoelN]

@JanisE The old color-font-test.html makes use of the "legacy" CBDT implementation without a glyf table. ChromaCheck currently checks for support for the proper CBDT format with a glyf table. I'm still not sure whether to add both versions to ChromaCheck. (Which would result in two possible classed, chromacheck-cdbt and chromacheck-cdbt-legacy, I suppose)

[JanisE]

I don't know how common my case is for a user of ChromaCheck, but in such cases ChromaCheck just plain does not work. If it is common, I think that support for the legacy format is substantial.