Support OpenType Color Fonts

[yisibl]

1. Open https://harfbuzz.github.io/harfbuzzjs/
2. Drag and drop this font file：https://www.fontself.com/colorfontweek/2018#playbox

Error message：

<svg> attribute viewBox: A negative value is not valid. ("12000 12000 -24000 -24000")

This is a OpenType Color Fonts，I hope that the preview can be colored.

[ebraminio]

We have its support code inside HarfBuzz APIs and here is its demo in C, just needs someone to add the APIs to wasm builds then compile the .wasm containing the support (is fairly easy, you just need clang/lld installed in your system) and port that C code to JS, are you interested on it? I think better to have it as a separate demo as I tried to create the most minimal possible SVG in this demo which isn't useful for color fonts.

Nice font btw its link however isn't working for me I think.

[yisibl]

Oh, sorry, it may be a dynamic link, please download it here: https://www.fontself.com/colorfontweek/2018#playbox

I am interested, but I forgot about my C language 😭 .

Moreover, my LLVM has been installed all afternoon, and it has not been installed yet.

Is clang that comes with the macOS OK?

clang -v
Apple clang version 11.0.0 (clang-1100.0.33.16)
Target: x86_64-apple-darwin18.6.0
Thread model: posix
InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin

[ebraminio]

I am interested, but I forgot about my C language.

No worries, remember that C is designed to be a JavaScript's like language (!) so you should be fine here :) I can help you however with particular questions. C structs are just sequence of numbers in memory, you can easily inspect them to see how they should be read.

Is clang that comes with the macOS OK?

I'm not sure but they are usually shipping the outdated versions, just run build.sh of this repo and see what happens :) You can always install it from brew however, this is what Simon and Khaled has done successfully.

[yisibl]

Thanks, does lld need to be installed separately?

In addition, ask some questions, and hope to help me answer my doubts:

• What does .malloc() in instance.exports do?
• What is the difference between hb_face_create and hb_font_create, and in what scenarios should I use them?
• How to modify the name table and version of the font?

[ebraminio]

Thanks, does lld need to be installed separately?

I think lld is already the default linker in macOS, you just need maybe an update version (maybe your version already is?) which have a wasm-ld and make sure to have that in PATH, something is suggested here https://github.com/tinygo-org/tinygo/issues/82#issuecomment-466793964 which shows lld is in llvm package of brew.

What does .malloc() in instance.exports do?

The way memory allocation works in C, basically guarantees some part of memory can be used for certain work by who requested that amount of memory, and returns address of that part to who has requested it. That particular address should be later .free()ed to make memory manager know can reuse and dedicate that part of memory to others.

What is the difference between hb_face_create and hb_font_create, and in what scenarios should I use them?

Take hb_face_t as somehow equivalent of a .ttf file (which isn't for font collection, still). font is created upon face but has size and variation and other specific things also.

How to modify the name table and version of the font?

That isn't easy :) There is something related here but that is private API and harder to read, maybe you can find some other library able to do that, maybe we should do it as a part of subset API or maybe not, it isn't supported currently anyway.

[yisibl]

Thank you for your patience.

That isn't easy :) There is something related here but that is private API and harder to read, maybe you can find some other library able to do that, maybe we should do it as a part of subset API or maybe not, it isn't supported currently anyway.

I think it can be implemented in subset. I am currently maintaining the largest font icon website(https://www.iconfont.cn) in China. We need to generate different versions after font subsets.

I plan to switch the font subset function to harfbuzzjs. Currently we rely on opentype.js, but in the scene where CJK fonts are subsetted (font files are usually large, 10MB+), the speed is relatively slow, and the server's CPU usage is also very high. Switching to harfbuzzjs should be a big improvement.

We have millions of users and hope this can give you motivation.

[ebraminio]

The very subset project is motivated by CJK issues AFAIK, let's ask @garretrieger whether considering your usecase is a possibility, basically turning what we have in hb-uniscribe into a feature, guess will useful for Google Fonts hosting also.

[yisibl]

Yes! Very useful!!!

We also have CJK font hosting service. Performance is currently the bottleneck.

[yisibl]

@photopea Are you interested in color fonts? I remember that Typr.js already supports color fonts.

[photopea]

Hi, I think Harfbuzz is not for parsing SVG or for extracting the vector shapes of glyphs. I would like that Harfbuzz remains simple and a single-purpose library.

Parsing vector shapes of glyphs can be done with other tools. Photopea and Typr.js already support color fonts.

[behdad]

HB has API to fetch SVG for glyph. That's all. A lot more code needs to be written by client to render them.

[yisibl]

@ebraminio Subsetting Playbox-FREE.otf will become black and white, how to keep the color?

[photopea]

@yisibl What program do you use to render the font? Harfbuzz is just a tool for shaping the text, it does not contain functions to rasterize bézier curves or parse the SVG and CSS.

[ebraminio]

Weird, COLR/CPAL subset isn't behind any compile flags as I checked now so should work there, please check if the issue also exists with hb-subset command line tool shipped with HarfBuzz Linux packages or in win32 package of https://github.com/harfbuzz/harfbuzz/releases/tag/2.7.1 the latest release

[yisibl]

@ebraminio

I execute the following command on the Mac, prompt: Unable to open output file.The version of homebrew is still 2.7.0, please see when you have time to update it.

 hb-subset Playbox-FREE.otf 123ABC

[yisibl]

@photopea Which problem are you referring to? Subset color fonts or rendering of color fonts on web pages?

[papandreou]

@yisibl, try:

hb-subset --output-file=... Playbox-FREE.otf 123ABC

[yisibl]

@papandreou Thanks! This command works, but the color is also lost. Playbox-FREE-subset.otf.zip

hb-view --output-file=subset.png Playbox-FREE.otf 123ABC

[khaledhosny]

The font contains SVG table, hb-subset does not support SVG table (hb-view does not support it either).

[yisibl]

@khaledhosny Is there a plan to support SVG table?

[khaledhosny]

I don’t know, you need to open an issue in the main repo. But I guess the answer will be the similar to https://github.com/fonttools/fonttools/issues/534.

[behdad]

SVG-table subsetting is particularly challenging because it involves modifying XML to rename glyphs. So basically a full-on XML library is needed and then some, to do it correctly. Or we can do a simple job at it using search/replace and not trimming unreachable elements after subsetting.

[behdad]

SVG-table subsetting is particularly challenging because it involves modifying XML to rename glyphs. So basically a full-on XML library is needed and then some, to do it correctly. Or we can do a simple job at it using search/replace and not trimming unreachable elements after subsetting.

Definitely much more doable in fonttools than in HarfBuzz.