Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add window max/min width options. #8

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

mattwiebe
Copy link

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
Copy link
Owner

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

@mattwiebe
Copy link
Author

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
Copy link

tbrown commented Jul 9, 2012

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
Copy link
Owner

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
Copy link

tbrown commented Jul 9, 2012

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:
#8 (comment)

Tim Brown
tim@tbrown.org

@davatron5000
Copy link
Owner

Circling around to this 2 years later. Sorry. 😿

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
Copy link
Author

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
Copy link
Owner

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
Copy link

I've added optional support for Paul Irish's matchMedia polyfill in my pull request (#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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants