Question

I need to determine the width of the text in a TextBox in Google Web Toolkit.
I have a proportional font, so I can’t just use something like getText().length() * characterWidth.

What I’m trying to do is resize the text so it always fits into the TextBox. That’s why I need width of the text to calculate needed font size.

Only solution I can think of is to make a map of widths of characters of the font I use and calculate the width of the text as a sum of widths of its individual characters.

Answer 1

I solved the problem as Corvus did, by introducing an additional Label element and hiding it with CSS. I copy the text from the TextBox to the Label and retrieve the width by Label.getOffsetWidth().

However, I needed additional code to

1. handle repeated spaces correctly,
2. handle style changes on the text box, and
3. avoid text jumping when the user was typing.

I found that I could match styles by calling

label.setStyleName(textBox.getStyleName() + " prewrap");

The prewrap style referenced in the above statement must be defined somewhere as

.prewrap { white-space: pre-wrap; }

This extra style is required because the built-in style for the textbox contains a pre-wrap directive which does not appear in the style list returned by textbox.getStyleName().

I also added an extra two spaces at the end of the label’s text string when calculating the width so that the text won’t jump back and forth so much when the user is typing.