4

Is it possible to tell a h1 to size the text so it fills the full 100% width of the element?

Like this.

enter image description here

code:

<h1>FOO</h1>
<h1>BAAR</h1>
Philip
  • 6,827
  • 13
  • 75
  • 104

3 Answers3

8

Try this plugin.

http://fittextjs.com/

It's great for responsive text.

EDIT:

jQuery("#element1").fitText(1.2, { minFontSize: '20px', maxFontSize: '540px' });
jQuery("#element2").fitText(1.2, { minFontSize: '40px', maxFontSize: '340px' });
  • The problem with this is that the plugin tends to handle one size and then apply it to all elements? I found another plugin called bigtext that worked pretty good. https://github.com/zachleat/BigText – Philip Mar 12 '13 at 13:42
  • how are you applying the plugin? can you paste an example or jsfiddle? –  Mar 12 '13 at 13:45
  • you can just apply it to one element? `jQuery("#test").fitText(1.2, { minFontSize: '20px', maxFontSize: '340px' });` –  Mar 12 '13 at 14:01
  • Yeah, well I have two elements? – Philip Mar 12 '13 at 14:04
  • Ok, then I need to calculate how big the font should be in relative to each other right? – Philip Mar 12 '13 at 14:08
  • Yeah and you can declare that with `minFontSize` and `maxFontSize` –  Mar 12 '13 at 14:09
  • Ok, thanks but I think I'll stick with BigText, take a look at it, it does that but automatically. =) – Philip Mar 12 '13 at 14:10
  • As 7 people have voted up this I'm checking this as the correct answer even though I ended up with BigText. – Philip Aug 04 '14 at 14:47
0

I found a plugin called bigtext that works pretty well, will wait for comments though.

https://github.com/zachleat/BigText

Philip
  • 6,827
  • 13
  • 75
  • 104
-1

One possible solution with jQuery would be:

var cs=$("#content").width();
$("h1").each(function(){
var hs=$(this).width();
while(hs<cs)
{
    $("h1").css("font-size",hs+0.01+"px");
    var hs=$(this).width();
}
while(hs>cs)
{
    $("h1").css("font-size",hs-0.01+"px");
    var hs=$(this).width();
}

})
Dan Ovidiu Boncut
  • 3,083
  • 4
  • 25
  • 45
  • sorry but this didn't work, to extract width with .css can't be right? I mean you get eg. 300px out of that? – Philip Mar 12 '13 at 13:41
  • Sorry about that. I made an edit. The thing is that i didn't test it but the main ideea is presented and it should theoretic work. – Dan Ovidiu Boncut Mar 13 '13 at 11:02