ThorType Character List

Lately I’ve been working on improving my font portfolio website ThorType.

It’s a Next.JS project that automatically deploys using a GitHub action to both my regular server and Fleek so my site is deployed to both web2 and web3 at the same time.

I used Next.JS because it allows for me to create pre-rendered static website files. I build upon this even further by using custom made tooling to extract information from my OpenType font-files to JSON-data and HTML Data URIs so that the font becomes embedded into the HTML-files themselves.

That way I have as little hyperlinking as possible as IPFS can be a bit slow at times, and to avoid unusable loading times I make sure it’s an “all or nothing” deal to load my website and whatever content I want on that site.

Today I’ve worked on extracting the Unicode-compliant character codes for each Glyph.

I learned that in the CFFTable of the OpenType file there’s a list of GIDs which stands for “Glyph ID”, but this Glyph ID is not the Unicode character, so if I want to display the Glyph I either need to render the Glyph by extracting the vector information directly and translating that into SVG-compatible paths, or I can display characters by mapping the GID to a Unicode ID.

These Unicode IDs are apparently stored in the CMAP table of the OpenType font, where there’s a “GID to Character” method I can call.

On top of it all I had to cheat the Apache FontBox/PDFBox library by using reflection to access private members of the CFFTable. This feels like an ugly hack, but after debugging the tooling and looking through the instances of all the OpenType tables I couldn’t find any other way to access the GID or SID-collections stored in the font.

Luckily I can export the fonts in the format I want, which means I don’t really need to handle any special cases of .ttf or .svg fonts with alternate tables and even less information on available characters.

I noticed that I might not want to rely on the browser to render the font characters. To fix this, I’m considering setting up a project that uses the Selenium testing library to render the font in a browser I know supports different font standards, screenshot it and then use that to create .png-files of each individual font character or glyph.

Over the years I’ve noticed that the automation in testing libraries can be used for a lot more than just testing, and since browsers have some of the best font support – even better than most graphics applications, a Browser automation tool seems very handy for quite a few use cases.

I still haven’t set up good hyperlinking for this feature and the feature is far from finished, but it’s still up here as an example of how one font character list might look like.