10 ms·

"If you really want to..." This is exactly what we've done with our product, Elevate Web Builder, so I can definitely attest to the fact that it is 100% correc

"If you really want to..." This is exactly what we've done with our product, Elevate Web Builder, so I can definitely attest to the fact that it is 100% correct. Our product uses a compile-to-JS transpiler and has its own layout engine, uses dynamic CSS, has update cycles to allow for efficient DOM updates, etc. The only real downside is that text measurment must touch the DOM and is really slow, so the layout engine has to perform a lot of intelligent caching and "measurement-avoidance" techniques to ensure that it measures text as infrequently as possible.

gizmo 9y ago
If you do your own line wrapping, then I'm pretty sure you don't need to do any text measurements. To get the kerning information for a given font face and size you can cache the widths of all character pairs ("AA", "AB", "AC"). Last I checked just summing the width of character pairs in a string would get you a width estimate accurate to the pixel, even for reasonably long strings. You don't have cross-platform pixel-perfect text rendering anyway, so you don't need to be 100% accurate. Maybe you're already doing this, but if not it's worth exploring.
- ptx 9y ago
  This might be a dumb question, but after figuring out the width of "AB" and "BC", how do you know the width of "ABC"? Do you just calculate the distances A–B and B–C as ab_distance = width("AB") - (width("A") + width("B")) ... and so on?
  - gizmo 9y ago
    Yep. Kerning is just the amount of space in between two characters. So to calculate the total width of a string you take the (fixed) widths of the individual characters and you add the variable widths of the space between each character pair.
- TimJYoung 9y ago
  Thanks, that is very interesting. We do happen to rely on the DOM for line-wrapping, but that's just because we didn't think you could get reasonable results doing what you've suggested. Okay, off to see what this produces... :-)
  - gizmo 9y ago
    Google Docs does its own line-wrapping for proportional fonts, so that may be interesting to look at. It's a little finicky to get it all to work consistently cross browser and cross platform, so good luck!
- panic 9y ago
  What do you do if you encounter a pair like "ペア"?

gizmo 9y ago

If you do your own line wrapping, then I'm pretty sure you don't need to do any text measurements. To get the kerning information for a given font face and size you can cache the widths of all character pairs ("AA", "AB", "AC"). Last I checked just summing the width of character pairs in a string would get you a width estimate accurate to the pixel, even for reasonably long strings. You don't have cross-platform pixel-perfect text rendering anyway, so you don't need to be 100% accurate. Maybe you're already doing this, but if not it's worth exploring.

ptx 9y ago
This might be a dumb question, but after figuring out the width of "AB" and "BC", how do you know the width of "ABC"? Do you just calculate the distances A–B and B–C as ab_distance = width("AB") - (width("A") + width("B")) ... and so on?
- gizmo 9y ago
  Yep. Kerning is just the amount of space in between two characters. So to calculate the total width of a string you take the (fixed) widths of the individual characters and you add the variable widths of the space between each character pair.
TimJYoung 9y ago
Thanks, that is very interesting. We do happen to rely on the DOM for line-wrapping, but that's just because we didn't think you could get reasonable results doing what you've suggested. Okay, off to see what this produces... :-)
- gizmo 9y ago
  Google Docs does its own line-wrapping for proportional fonts, so that may be interesting to look at. It's a little finicky to get it all to work consistently cross browser and cross platform, so good luck!
panic 9y ago
What do you do if you encounter a pair like "ペア"?