Change font size to fit a variable width container

1
votes

I'm trying to fluidly scale the font size to fill its variable-width container using jQuery TextFill. Trouble is, I think this only works with fixed-width containers. I want to use this on a site with a responsive grid.

Here's my test, which confirms jQuery TextFill doesn't work on variable-width containers: http://jsfiddle.net/9uqcjdpy/1/

If you resize the window, you'll see the bottom div resizes, but the text doesn't scale. If you change the pixel width of the top container, you'll see the text scales, but the div can't resize responsively.

I'm also trying to use it in a container whose height remains proportional to its width with this padding method:

width: 40%;
padding-bottom: 23%;
height: 0;

Is there any way to get this working? Doesn't need to use jQuery TextFill, but that's the closest thing I've found.

2
javascriptjqueryhtmlcssresponsive-design
Even though you have a link to your code in a fiddle, it's still really nice to post the code here in your question. Also, Stack Snippets (some information on them here) let you have SO run your code here. – ryanyuyu

2 Answers

1
votes

Remove height from your variablewidth class.

You'll want to use the widthOnly option of TextFill, and update on a window resize event:

$(window).resize(function() {
  $('.variablewidth').textfill({ 
    maxFontPixels: 250,
    widthOnly: true 
  });
});

$(window).resize();

Fiddle

Update

You can make height a function of width like this:

function updateTextFill() {
  $('.variablewidth')
    .height($('.variablewidth').width()/2)
    .textfill({
      maxFontPixels: 250
    });
};

But note that there may be a bug in maxFontPixels as described in our comments.

Fiddle #2