Add window max/min width options.

[mattwiebe]

Ran into responsive design scenarios when FitText should only be invoked above certain sizes due to different layouts. This provides maxWidth/minWidth options so that FitText will only fire inside that window width threshold - otherwise, it'll clear the inline font-size so that your stylesheet is doing the work.

[davatron5000]

Cool. Can you provide a jsbin or something to demonstrate your use case?

[mattwiebe]

Here's the site I'm developing it for: http://clients.somadesign.ca/pegcity/

FitText is being used for the top nav and the tagline. The top nav converts to a dropdown at 480px, so I don't want FitText active at that point. At 700px, the tagline goes from under the logo to beside it, at which point I don't want it scaling any more.

[tbrown]

I like Matt's logic, that FitText should be conditionally applicable.

I'll add a use case here. These screenshots show a title that uses FitText and looks the way I intend at different viewport widths: http://cl.ly/122v0B0C1d253D0Y0u1u http://cl.ly/220M140W3k1Z442J3V3y

At narrow widths my display typeface becomes unsuitably thin, so I switch to something made for smaller sizes. Unfortunately, instead of looking like this: http://cl.ly/2s3B272R0Z430v0a2e0E

... it looks like this: http://cl.ly/1c1g1J311B020q3N1J2U

I tried adjusting the width value to affect font-size (per Trent's suggestion), but that doesn't work: http://cl.ly/0j2z3w1F2k472O1f2Z18

Even when I manually insert nonbreaking spaces, something's not right. Plus, I don't want to do this anyway because the title should be allowed to wrap: http://cl.ly/2a2r2G3W3v1T330Z3611

If I were able to conditionally apply FitText, I would disable it when I switch my typeface. I might even apply a second set of FitText instructions that only work at smaller sizes.

[davatron5000]

Totally seeing the need here. Great use case, Tim. It looks like @mattwiebe's solution would work. It's by far the easiest to understand from a designer perspective. Proof-of-concept-wise, were you able to get your design working using Matt's fork?

FWIW, I like this fork but am taking issue #34 into account, which creating ~ 3 editions (small, medium, large widths) per page could further that problem. But there might be some magic in #28 that would solve memory leaking in an ajax situation.

[tbrown]

I have not tried Matt's fork.

Out of curiosity, would it be possible to use ems as a width value? And if so, would the ems used via a FitText parameter be aware of context in the CSS?

On Jul 9, 2012, at 10:50 AM, Dave Rupert wrote:

Totally seeing the need here. Great use case, Tim. It looks like @mattwiebe's solution would . It's by far the easiest to understand from a designer perspective. Proof-of-concept-wise, were you able to get your design working using Matt's fork?

FWIW, I like this fork but am taking issue #34 into account, which creating ~ 3 editions (small, medium, large widths) per page could further that problem. But there might be some magic in #28 that would solve memory leaking in an ajax situation.

---

Reply to this email directly or view it on GitHub: https://github.com/davatron5000/FitText.js/pull/8#issuecomment-6848682

Tim Brown tim@tbrown.org

[davatron5000]

Circling around to this 2 years later. Sorry. :crying_cat_face:

It maybe makes more sense to use window.matchMedia() in favor of querying min/max width from the window on resize. But then we'd need a polyfill in there. Guh. Or maybe we only allow that feature for browsers with matchMedia or ... guh.

Anyone passionate about this. I could move it into a FitText 2.0 milestone.

[mattwiebe]

window.matchMedia() would be better - it just wasn't that widely supported 2 years ago. :) For the present, just noting the need for a polyfill on unsupported browsers, and possibly disable FitText altogether when a matchMedia'd instance is run on an unsupported browser.

[davatron5000]

Sooo.... something like:

var resizer = function(){
  if(window.matchMedia && window.matchMedia( settings.mediaQuery ).matches) {
   // do stuff
  } else {
    // DESTROoOOOY!
  }
});

If we keep support as is, and just enhance things, we could do something like if(!window.matchMedia || window.matchMedia( settings.mediaQuery ).matches). And i guess our default value would be something like settings.mediaQuery : 'screen' or something.

[jpederson]

I've added optional support for Paul Irish's matchMedia polyfill in my pull request (https://github.com/davatron5000/FitText.js/pull/126). You can just specify the media query string as the matchMedia option when instantiating FitText, and it'll only take effect if it matches your query. If you don't include matchMedia, the media queries won't work, but all other functions work correctly. It also functions right alongside the min/maxFontSize options, so you can use both at the same time. Maybe this will help your needs?