CODEWITHSUNDEEP
cssgwttextboundsautoscaling
Mike
Mike

Reputation: 1336

GWT Auto Scale Text font size to Fit within Bounds

How can I autoscale the text font size in a web page in order to make text in a div or p fit within given bounds?

There are nice solutions for Android, like this one, but I haven't found any for GWT.

Do you guys have any?

Thanks!

Upvotes: 0

Views: 1398

Answers (1)

Andrei Volgin
Andrei Volgin

Reputation: 41089

There are sevaral solutions to this problem:

(1) render the text, measure its width (myLabel.getOffsetWidth(), compare to the desired width, change font size if it does not fit and start over (remember to do this inside the Scheduler's deferred command, or your offset width will be zero);

(2) use FitText.js (http://fittextjs.com/);

(3) use canvas which can auto-fit text into provided space;

(4) use ellipsis when text overflows;

(5) use viewport units for text font (limited browser support at this time): http://css-tricks.com/viewport-sized-typography/

(6) create a different, more fluid UI design that handles content size better.

Upvotes: 2

Related Questions