Kerning problems

[ffdead]

Hello and thanks for sharing this awesome lib!

I'm having problems with kerning, here's an example of a couple of common kerning pairs with DOM text behind it:

As you can see the kerning doesn't seem to be applied properly. If I add font-kerning: none; to the DOM text they match perfectly:

Is there a way to explicitly enable kerning or is this a bug?

Tested with "troika-three-text": "^0.29.0", via drei@0.0.63

[lojjic]

Ugh, you're right! Looks like I broke kerning a while back. 😭 I'll fix it ASAP.

Would it be easy for you to put up your testcase in Codesandbox or somewhere else I could access it? That would save me some time, but don't worry if it's too much trouble.

[ffdead]

Great! Happy I could help find a bug :)

It's not that easy to replicate for me right now unfortunately. But I'd be happy to test it locally and report back.

[lojjic]

Just a status update on this: it appears kerning has been broken since I converted from OpenType.js to Typr.js a year ago. The problem is actually twofold:

1. I wasn't calling or applying Typr's getPairAdjustments function (whoops!)

2. Typr's getPairAdjustments is (was) broken.

Item 1 is an easy fix. Item 2, however, is a huge can of worms. Typr.js has since moved on to use a WASM-compiled version of HarfBuzz for all text layout logic, which is great for quality but terrible for file size -- it would increase the size of troika-three-text by 180KB -- and that's not something I'm comfortable doing at this point.

Thankfully there's a fork here https://github.com/fredli74/Typr.ts which continues the JS-only version with some bugfixes, including fixes for kerning. I'm looking at switching over to that, and initial tests do show kerning improvements but perhaps still some bugs. (E.g. in that Philosopher font AV and AT get kerning but Ta does not.)

[ffdead]

Hi @lojjic - thanks for the update.

I agree that keeping the file size down at the cost of some minor layout problems is a good trade-off 👌

Looking forward to try it out!

[ffdead]

@lojjic let me know if there's anything I could do to help. I understand it might be a big change to revert this behavior.

I'd love for this lib to be our goto solution for threejs text, but it's a bit hard to convince designers to ship websites with broken kerning 😅 (especially since webgl effects usually are used for large headlines)

[ffdead]

Finally had time to create a test case for you: https://codesandbox.io/s/troika-kerning-test-xh7v3

[lojjic]

Wow that's an amazing testcase! Thank you so much. I'll swing back around to this as soon as I finish off #73.

The testcase's Exo2 and Volkorn fonts also demonstrate the overlapping paths issue in #57 so it'll be helpful there as well.

[lojjic]

A status update to prove I haven't forgotten about this... ;)

I took a detour to try out moving back to using Opentype.js instead of Typr.js; their kerning is good and they've done some recent work to support some more advanced shaping features like Arabic, which would be a nice improvement anyway. I'd been testing it out for a while and it seemed to work quite well, at the expense of a slightly larger file size (~20kb extra when gzipped.) Unfortunately it's got a pretty huge performance issue with large text strings, which makes it a no-go for my work right now.

So, I'm back to trying out the Typr.ts fork I mentioned above. I'm also investigating an option to use a Harfbuzz WASM build (like Typr.js has done) for users who want more advanced shaping. I do think kerning should be a part of the base build and not require Harfbuzz, though.

[lojjic]

I pulled my Typr.ts fork work off the shelf and it was closer to completion that I remembered. I've published v 0.36.0 that should fix kerning.

[ffdead]

Wow that was fast, great job! Thanks a lot 🤘