Include proportional spacing information

[djrrb]

Hi...I really appreciate all your work on this project and am excited to be able to generate COLR v1 fonts with it!

I see that there was talk about a proportional space flag in issue #230, but that issue was closed and I didn’t find any ongoing discussion. I hope it is okay that I create this issue to revive that discussion, as I would very much appreciate and use a feature like this when generating non-Emoji COLR v1 fonts.

I could imagine it using the width of each SVG’s viewbox as the glyph’s width in the hmtx table, and avoid modifying the left offset so that the glyph positioned is retained from the SVG. I understand nanoemoji is a tool for making emoji fonts, so feel free to close this issue if you feel this is out of scope.

In case you are interested in how I am using nanoemoji, here is a font I released this week (with a custom written hmtx table for the proportional spacing):
https://tools.djr.com/misc/bradley-initials/

Thank you for your time, and thanks again for the opportunity to play with this exciting format!

[djrrb]

Of course right after posting, I found this: #255

I will see if I can replicate...very sorry to bother you!

[rsheeter]

Mildly amusing timing to spot this issue as I was just playing with slapping gradients onto Bungee for a quick demo (https:/rsheeter/Bungee/blob/master/scripts/make_gradient_colrv1.py)

I'm impressed you found #255, we tried hard to obscure it :D I hope it worked as intended? Any other glaring missing features?

[anthrotype]

Hi David, thank you for trying our tools!

Could you try setting width=0 (the minimum allowed) and see if you get the proportional widths based on the original viewbox width?

If you also want to avoid any scaling and vertical displacement (i.e. your input SVG already "sit" on the baseline as opposed to usual emoji design that need to be centered visually between ascender/descender), try also setting ascender=upem and descender=0.

We should try to see if we can make this use case easier, without requiring hacks or workarounds.

[djrrb]

Sorry for the delay and thank you so much for your response to this!!!

Mildly amusing timing to spot this issue as I was just playing with slapping gradients onto Bungee for a quick demo (https:/rsheeter/Bungee/blob/master/scripts/make_gradient_colrv1.py)

@rsheeter I absolutely LOVE Bungee Spice! Was just debating with a friend about this was a timely Dune reference or a reference to the 🥵 emoji ;-) It looks great, and it’s very helpful to see how you created it...happy to accept a PR if/when you want.

width=0
ascender=upem and descender=0

This all works, thank you so much @anthrotype! I hope that there will be more folks making proportional COLRv1 fonts, so I think it’d be great to call this out in the docs.

Any other glaring missing features?
We should try to see if we can make this use case easier, without requiring hacks or workarounds.

Because my source file is in Glyphs, and SVGs were simply a byproduct, I’m wondering if you have any advice of a streamlined way to generate and match SVGs/metrics/metadata from an existing non-COLRv1 font file.

If you are curious, here was my workflow:

• Export “original font” (OT SVG) from Glyphs app
• Use opentypesvg dumpsvg to get SVG files (these seem to lose their viewbox?)
• Load SVGs in Figma, edit, reset viewbox, export to SVG folder
• Run nanoemoji to build font

For postprocessing, I converted to TTX and then made a bunch of changes to try to bring my nanoemoji results closer to my original font. Here were my postprocessing steps:

• Write a new htmx table (thanks to width=0 I don’t have to do this anymore!)
• Copy additional name records and additional metadata (cmap, os/2, etc) from original font
• Add fallback glyphs to empty records in table (copy from fallbacks in original font)
• Add alternative color palettes to CPAL
• Attempted to add COLRv0 in addition to COLRv1 as a fallback (@PeterConstable mentioned to me that this is valid)

I know it’s possible to set some metadata with nanoemoji arguments, but I’m I’m curious if it’s possible/desirable to have a nanoemoji workflow that copies metadata (and fallback glyphs) from an existing font? Or if there’s another way to deal with these things?

Also wondering if it’s possible to set alternative CPAL palettes, and pass multiple values to --color_format to get a superfont that contains would work in COLRv1 and non-COLRv1-supporting environments?

Again, thanks so much for this incredible tool! I’m already excited about my next project that will use it.

[rsheeter]

Bungee Spice is a nod to Dune. So happy it's not unfilmable anymore!

I hadn't seen https:/adobe-type-tools/opentype-svg/blob/master/lib/opentypesvg/dumpsvg.py. It made me realize that https://fonttools.readthedocs.io/en/latest/ttx.html#dump-options doesn't offer -z extfile for SVG. It's handy for embedded bitmaps; maybe we should have something similar for SVG. I suppose it would be more fiddly given that a single svg in the font may support multiple glyphs and for export you'd arguably want to undo that. For example, https://codepen.io/rs42/pen/RwLLmBe?editors=1000 is the svg nanoemojiI comes up with for some of the noto handwriting emoji, seems unlikely to be fun to directly edit.

Your workflow got me to wondering, are you able to adequately design an ot-svg font without leaving Glyphs (I think it has gradients and so on?) or do you have to get into Figma/Illustrator/etc for some edits? - if you are able to create the desired result in Glyphs as an ot-svg then maybe the solution here is an otsvg to colrv1 converter. Revised workflow would be roughly:

1. Design font in Glyphs
2. maybe export as ot-svg
   • in a perfect world we can just compile directly from the glyphs file
3. Run otsvg2colr; it produces the COLRv1 equivalent of your ot-svg font
   • This utility doesn't actually exist but I do have a page of notes somewhere and having a page of notes is definitely the hard part

my next project that will use it

Excited to see it!

[khaledhosny]

FWIW, if you are using Glyphs 3 color layers with gradients, you can create a font with COLRv1 table using fontmake out of box.

[djrrb]

Your workflow got me to wondering, are you able to adequately design an ot-svg font without leaving Glyphs (I think it has gradients and so on?)

I’d love to try this. AFAIK the big limitation right now is that there isn’t a way to connect gradients etc on Color layers to CPAL palettes yet (in a search to confirm this, I found that @khaledhosny recently posted about it)

FWIW, I don’t mind the existing folder o’ SVGs as a workflow option. It gives me flexibility in what editor I use (right now, Glyphs seems to name every color layer as “Color”, which can get confusing) as well as access to external SVG compression/cleanup tools and the ability to find/replace hex colors with variables directly in the SVG code. But I love the idea of being able to bring over all of the other table data from an existing font file.

FWIW, if you are using Glyphs 3 color layers with gradients, you can create a font with COLRv1 table using fontmake out of box.

I didn’t know fontmake was doing this! I might have some questions for you about Color and Color Palette layers coexisting, but I’ll try a simpler test case and maybe post an issue over there. Thanks so much for letting me know @khaledhosny!

I’m not sure how an otsvg2colr tool intersects with what fontmake has planned for color tables or OT SVG export, but I do like the workflow that @rsheeter suggests...seems like it might get me closer to what I’m after: being able to producing CPAL-connected OT SVG, COLRv0, and COLRv1 from a single source, either as separate but interchangeable fonts, or as a single font with multiple color tables and fallbacks.

In any event, all of this is much appreciated! (I’m happy to keep discussing workflow, but just wanted to say that you are welcome to close this issue whenever since my original request is completely satisfied.)

[PeterConstable]

It's great that Glyphs has support for colour layers and gradients. COLRv1 also has other significant capabilities:

• transforms
• compositing modes
• blending modes
• variability in VFs

The variability isn't available in a bag o' SVGs, but the others are. Hopefully we'll see ask of these supported in Glyphs and other apps.

[khaledhosny]

Your workflow got me to wondering, are you able to adequately design an ot-svg font without leaving Glyphs (I think it has gradients and so on?)

I’d love to try this. AFAIK the big limitation right now is that there isn’t a way to connect gradients etc on Color layers to CPAL palettes yet (in a search to confirm this, I found that @khaledhosny recently posted about it)

Yes. Please leave a comment on that thread to show there is more interest in using palettes directly. Fontmake setup will create color palettes on the fly from the colors used, but it will not try to use existing palette indices even if the colors match (this was deliberate to avoid using unrelated colors if multiple palettes are set).

FWIW, I don’t mind the existing folder o’ SVGs as a workflow option. It gives me flexibility in what editor I use (right now, Glyphs seems to name every color layer as “Color”, which can get confusing) as well as access to external SVG compression/cleanup tools and the ability to find/replace hex colors with variables directly in the SVG code. But I love the idea of being able to bring over all of the other table data from an existing font file.

I have an earlier setup (see the make file for pointers) using picosvg, nanoemoji and separate SVG files. It works, but it felt a bit hacky and I figured out I didn’t need much beyond what Glyphs Color Layers provide.

FWIW, if you are using Glyphs 3 color layers with gradients, you can create a font with COLRv1 table using fontmake out of box.

I didn’t know fontmake was doing this! I might have some questions for you about Color and Color Palette layers coexisting, but I’ll try a simpler test case and maybe post an issue over there. Thanks so much for letting me know @khaledhosny!

It supports mixing them in the font (since COLRv1 can have COLRv0-style layers) and will always create a COLRv1 table in this case, but not in the same glyph.

[rsheeter]

We did end up creating a tool to add COLR to an SVG font and vice versa, https:/googlefonts/nanoemoji#adding-color-tables-to-existing-fonts.

FontLab 8 has added COLRv1 (https://help.fontlab.com/fontlab/8/whats-new/whats-new-09-color/), fingers firmly crossed other tools will learn to speak COLR over time.

In re-reading this I don't think there is any further work we plan to do based on this issue so I will close it. Please reopen if that doesn't seem right.

[djrrb]

You rock!! Thanks so much for following up on this...can’t wait to try out the COLR + SVG tool! :-D