0

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!

Community
  • 1
  • 1
Mike
  • 1,296
  • 2
  • 15
  • 40

1 Answers1

2

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.

Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58
  • Thanks Andrei! In (3) you are talking about HTML5 canvas, right? In that case, neither (3) nor (5) work for absolutely all browsers (although for most of them). (4) is not what I was looking for. (6) Is a bit vague for me, could you be more explicit? (2) looks nice, anthough it is intended for headlines, not for paragraph text. I think I'll go for (1)... – Mike Oct 26 '12 at 09:15
  • 1
    Fluid design means that all elements on a page reflow nicely regardless of the size of an individual paragraph. I can't give any specific advice without looking at your HTML and CSS, and your requirements. This is what good UI designers do: they figure out how to handle content of different size without changing the layout or font size. – Andrei Volgin Oct 26 '12 at 16:19