1

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.

royhowie
  • 11,075
  • 14
  • 50
  • 67
Sam
  • 11
  • 2
  • 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](http://meta.stackoverflow.com/questions/270944/feedback-requested-stack-snippets-2-0)) let you have SO run your code here. – ryanyuyu Feb 06 '15 at 21:23

2 Answers2

1

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

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • Thanks — the issue is that I want the container's height to remain proportional to its width... – Sam Feb 06 '15 at 22:04
  • Thanks again. Unfortunately I need to do the height as well, since I'm hoping to implement this with a CMS where the text content in the container can change, resulting in varying lengths of text. I need the container to scale (always keeping its aspect ratio the same) and have any quantity of text fill that container. – Sam Feb 06 '15 at 22:21
  • Not real sure I understand, but you could make height a function of width within the resize event. If you post a fiddle showing this problem, I'll see what I can do. – Rick Hitchcock Feb 07 '15 at 00:22
  • Hm, I'm just looking for a way to responsively scale up a div while keeping its proportions, and use something like TextFill to get whatever text I put in the div to be sized as large as possible while fitting in it. – Sam Feb 09 '15 at 15:57
  • My example fiddle maintains the proportions as you resize the window. If you don't want the text to wrap, you could add `white-space: nowrap;` to the CSS like I've done here: http://jsfiddle.net/e40xnk5d/2/ If neither of these are what you're looking for, perhaps a screenshot could help me understand. – Rick Hitchcock Feb 09 '15 at 20:02
  • Thanks again for your help! I do want the text to wrap, and TextFill does a great job of fitting whatever text I put in the div as largely as possible. Then I want to scale up the div and the text it contains, while keeping the div's proportions — _including if the amount of text it contains is changed_. I found a way to keep the div's proportions consistent while it scales with the window's width (by setting the height to 0 and the padding-bottom to a %, as in my first fiddle), but it's the setting of the height that causes TextFill to no longer work. Here's an illustration: http://cl.ly/ZjV9 – Sam Feb 10 '15 at 21:20
  • See http://jsfiddle.net/ztzfn2ur/ This may come close to what you're trying to achieve. However, there may be a bug in how it handles `maxFontPixels`. Note how it overflows on the sentence, "For the next 60 seconds..." Remove `maxFontPixels`, and it no longer overflows, but then you're stuck with the default maximum of 40px. – Rick Hitchcock Feb 10 '15 at 22:08
  • This is excellent! It's only overflowing for me at tiny sizes, which wouldn't ever happen in my scenario. Thanks so much!! – Sam Feb 10 '15 at 22:28
0

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/

Oliver-H-Miller
  • 451
  • 1
  • 7
  • 19
  • My post mentions I'm already hoping to use this plugin, but I want to achieve the same effect in a **variable-width container**, which the plugin doesn't support. – Sam Feb 06 '15 at 23:33