2

I would like to display a single line of text across the screen so that:

  1. Width: 100%
  2. Fonts-size is maximum possible based on browser width
  3. One line only (nowrap)
  4. Given font-family

My idea is to start a hidden div and random font-size, then run jQuery to "brute force" to increase or decrease font-size so that its width is close to browser width.

Is there a best way to do this? Great if I can see some examples. Thanks.

HP.
  • 19,226
  • 53
  • 154
  • 253

2 Answers2

2

This is the solution

http://simplefocus.com/flowtype/

$('body').flowtype({
   minimum : 500,
   maximum : 1200
});

Download https://github.com/simplefocus/FlowType.JS

Web typography at its finest: font-size and line-height based on element width.

HP.
  • 19,226
  • 53
  • 154
  • 253
  • Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Aug 22 '13 at 06:58
0

I would figure out how wide the text is as a ratio to the height of the font, then do something like

var w = [parentElement].clientWidth; [textElement].style.fontSize = w*ratio;

twinlakes
  • 9,438
  • 6
  • 31
  • 42