CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HP.
HP.

Reputation: 19896

Responsive font size nowrap

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.

Upvotes: 2

Views: 1972

Answers (2)

HP.
HP.

Reputation: 19896

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.

Upvotes: 2

twinlakes
twinlakes

Reputation: 10228

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;

Upvotes: 0

Related Questions