Wakamai Fondue, a tool that tells you what your font can do

Roel Nieskens

Hi folks,

I've been working on a tool that would make it easy for webdevelopers to see which layout features are in the font, to which characters they apply, and what CSS you'd need to enable them on the web. The generated CSS cascades and can be combined by applying a class per layout feature, something that's usually hard to do due to font-feature-settings not cascading and the lack of support for font-variant-*.

You can try the tool here: https://wakamaifondue.com/

Note that fonts aren't being uploaded to a server—everything is processed locally in your browser.

If you see things that can be improved, I'd appreciate the feedback!

Grzegorz Luk (gluk)

Hi Roel,
good idea but difficult to implement (I think...)

As you wish, my first fedback:
If You show glyphs from feature, you need to turn off all other features (as example font Kleymissky)


Your site show glyphs "Z" as "Z.init" ,"z" as "z.fina" and not from "cv07" table.
Most probably "calt" feature should be OFF. (font Kleymissky have init and final forms as contextual alternates implemented)

Nick Shinn

Impressive!
Noting the huge display of contextual alternates, I wondered if a similar display of kern pairs might also be possible?

Mark Simonson

Very nice. Doesn't always work with Safari (says there was a problem and reloads the page, other times it works, same font file), but Firefox and Chrome had no trouble.

James Puckett

Wakamai Fondue goes bonkers with lots of contextual alternates, puking up thousands of combinations to display. I’ve sent you an email about it.

Roel Nieskens

@gluk The layout features calt, clig, jalt, liga, rand, kern, vkrn are turned on by the browser by default. So I'd better turn those off manually for all those preview fields. I'll try to update the site later today. Thanks for reporting this!

@Nick Shinn and @James Puckett, I'm now dumping everything combination that is in the lookup table for a feature (except kern, where I experimented by just showing a pangram to play around with). I could do the same for kern as I do for calt, but it would potentially add another huge blob of combinations to the page. I figured that would be the point, but I take it it's undesired? What would be a better way to display kern, calt or other potentially long strings?

@Mark Simonson I'm filing a bug with Safari. As the browser crashes completely it's hard to debug what caused it. But I'm working on it, and hope to push an update over the weekend!

Thanks everybody for checking it out, and the feedback!

Andreas Stötzner

Interesting project, Roel.
I wonder why the characters overview displays all in one single row.

Jens Kutilek

Very nice! The site doesn’t seem to read and display the friendly names for Stylistic Set features, or does it?

Unrelated: This almost looks like wrapping paper with a pattern

Roel Nieskens

@Andreas Stötzner How do you mean? The character set should be shown in a grid. If not, could you tell me which browser you're using?

@Jens Kutilek Unfortunately there's no mapping to the name table for GSUB/GPOS stuff in Fontkit, the font library I'm using. I'd like to figure out how to that sometime though (or hope @devongovett will!)

Adam Ladd

Thank you @Roel Nieskens this will be really handy. One bit of feedback is that it would be nice to be able to toggle the "Try Me" paragraph sample text color scheme... so it's not just reversed white text on red, but also having dark text on a light background (or options to choose your own scheme).

Andreas Stötzner

Roel Nieskens said:

… The character set should be shown in a grid. …

That could be the point, my Firefox 48.0.2 is already a bit vintage, I suppose.

Roel Nieskens

@Adam Ladd Thanks for the suggestion, I've added a light switch to change the colors.

@Andreas Stötzner Wow, that is vintage indeed! Regardless, Wakamai Fondue should've shown you a nice grid. It's fixed now!

Andreas Stötzner

Yes, now I see them all in a grid. But now I wonder why most glyphs are shown twice, the second each labeled ›Kern‹.

AbrahamLee

This is really wonderful, @Roel Nieskens! Another excellent tool added to my font toolbox.

Adam Ladd

Nice, thank you @Roel Nieskens

John Hudson

Decided to throw the Gabriola font at Wakamai Fondue today. It's the most complicated font I've made in terms of contextual behaviour in the lookups, so I was interested to see how well it is handled. All the feature previews except kern fail to display any glyphs, with an explanation of the form 'There are X glyphs we couldn’t trace back to a character. These are probably substitutions of other substitutions'.

I also tried SBL Hebrew, which is relatively simple in terms of GSUB, but very complex in its GPOS. The contextual GSUB lookups get displayed fairly well, with affected glyphs displayed with triggering contexts, but it looks a mess because GPOS is not applied correctly in the strings, so when the context trigger is a mark, it isn't shown in correct relationship to the substituted base.

Roel Nieskens

Thanks for the kind words, everyone!

@John Hudson Thanks for reporting. Gabriola contained a lookup type I hadn't implemented yet. It should work now. I also had to cap the number of substitutions that are shown on screen to 500, to avoid the browser from crashing. I'd like to know how to fix the GPOS problem you see in SBL Hebrew, but unfortunately I can't work on that before next week.

Roel Nieskens

@Andreas Stötzner Every character that has a layout feature associated with it, will be duplicated with that layout feature applied. Makes sense for stylistic sets and all, but not for kern. I'll remove it in the next update!

Khaled Hosny

Impressive!

I had a few issues, though.

I tried with Amiri, all stylistic sets except ss03, ss04 and ss08 show no glyphs. calt and kern show only a tiny selection of what the font has.

With AmiriQuranColored.ttf (which has no Latin glyphs) a fallback font is used for Latin (in the Try me and kerning boxes), with no indication that these are not glyphs from the font. A preview of the color glyphs with way to turn it on/off like layout features would be nice.

With Aref Ruqaa, only ss05 and ss08 show glyphs (though turning ss08 off does not seem to have any effect).

With Reem Kufi, none of the character variant features show any glyphs.

Dave Crossland

Adobe Blank can solve th fall back issue

Roel Nieskens

@Khaled Hosny Thanks for reporting. I'll use Adobe Blank or that Notdef variant (thanks for the suggestion @Dave Crossland). 

I can only show glyphs when they modify the original character. If the glyph is an alternate for something that has already been altered by another layout feature, the current tooling simply doesn't allow me to trace it back to the original character. If it did, I could instruct the browser to apply all layout features that would cause that specific glyph to be shown. I hope to address this soon.

I'm still not sure what to do with calt and kern: some people seem to prefer to see every single lookup that I can extract from the tables, others hate the wall of text this can result in.