-
Notifications
You must be signed in to change notification settings - Fork 121
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Kerning problems #70
Comments
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. |
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. |
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:
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.) |
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! |
@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) |
Finally had time to create a test case for you: https://codesandbox.io/s/troika-kerning-test-xh7v3 |
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. |
Wow that was fast, great job! Thanks a lot 🤘 |
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",
viadrei@0.0.63
The text was updated successfully, but these errors were encountered: