CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Sam
Sam

Reputation: 11

Change font size to fit a variable width container

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.

Upvotes: 1

Views: 1325

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

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

Upvotes: 1

Oliver-H-Miller
Oliver-H-Miller

Reputation: 451

Quick jQuery Plugin:
http://www.jqueryscript.net/text/jQuery-Plugin-For-Auto-Resizing-Text-textfill.html

Nice Demo:
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Auto-Resizing-Text-textfill/

Upvotes: 0

Related Questions