[html5] Measure tons of text in a fast way

[Sebastian Werner]

Hi!

I am looking for a way to measure text. In qooxdoo's layout system
(where we also plan to use parts from in Unify) we compute positions
of all things on our own to make use of the advanced layouting system.

What we need would be a method to measure text. The text only have
basic font formatting (font-family, line-height, font-size,
font-style, etc.) and all styles which should be respected are locally
applied or can be given through a method.

I think a practical interface might look like:

document.getComputedTextSize("Text", styles, maxWidth); => {width: 28,
height: 12}

The optional maxWidth parameter might be used to control the text flow
from the layouting system e.g. in cases where the available space in
only 200px, but the text would like to have a width of 340px.

All values are in pixels like in offsetWidth or getBoundingClientRect().

I am basically asking for a special routine as we practically do this
step 1000+ times during app initialization and also a lot while it's
running. In newer browser it got dramatically better, but is still one
of the slowest parts of the framework. I am especially interested in
supporting it on mobile devices like Smartphones/Tablets.

Currently we place a specialized DIV element directly in the BODY.
Positioned absolute to -1000px coordinates. And it still takes a few
milliseconds each time to measure it out. If we would have a method
which do not influence reflow or browser layouting but just computes
the text size it might be possible to make it way faster.

Alexander ("bga_" on Twitter) already suggested to use
Canvas.measureText, but this does not support any of the CSS font
styles which are important for my use case.

For all people doing custom layouting I would think that this would be
quite a helpful method.

Would be really nice to discuss on this requirement with you.

Regards,
Sebastian