How to determine the actual width of a string on the screen/component?

Vaadin 6 / 7 / 8
1

Hi guys,

Recently, I had to implement a resizable text area which idea was: as new characters are entered, and I reach the - constant - width of the component, I add a row to it. This way, the text area’s height (de/in)creases based on its value at any given moment.

Despite some tricks, like the fact that, in text change events, the actual context of the text field is not yet updated (text in the text change event differs from the value in the text area) and I have to first set the value of the text area with the string held by the event (so I can recalculate the dimensions), I would like to configure the component like below:

  • I set the text area’s width to 20, considering the unit Unit.EM
  • I would consider, because of the first bullet, the total characters per row would be 20
  • If I reach these 20 characters, I set the number of rows of this text area to [current rows + 1]

What I am struggling with:

  • Actually, the width of 20, Unit.EM, is a lot larger than the width of 20 characters typed in the text area.
  • I don’t have a utility method in the framework to tell me the font being used at the moment, and the width of a character
  • I don’t have a utility method in the framework to tell me the total width a string takes on the screen
  • Sounds like there’s is no correspondence between Unit.EM and the width of a character, as I was expecting

I don’t have may mean ‘I couldn’t find it’. Maybe I am missing something you guys already use and are aware of. Is it the case? If not, is it a good subject for a new ticket? Is there any workaround to implement what I want?

Right now, after many attempts, I found ‘magic numbers’ that fit on my needs. So I am playing with them. I found, by exercising the screen, the number of characters that would fill, completely, a width of 20 in Unit.EM (which is more than 20 characters). I just set these numbers in stone, and that pays the bill. But I am not happy, there should be a way to determine the width a given text takes on the screen/component, so I am able to know the remaining space. Or, more than this, there should be a way to determine the total characters, based on the current font settings, that would completely fill a component with a given width. Makes sense to you as much as it does to me?

If I can help in the discussion or if you think this is relevant enough to be a backlog item to the dev team, tell me. I would be glad to contribute either way. If you have a solution for the case, also, I’d appreciate if you share it :slight_smile:

Cheers,
Pedro

2

Hi!
As far as I know, there is currently no way to do this on the server-side. On the client-side you could do it e.g. by creating a temporary element with the content, measuring the width, and then removing the element. With most fonts you can’t set any fixed character count for the width, though, because there’s quite a difference whether you have iii or WWW.