FitText on Multiple, shared constraint

[catchamonkey]

Hi,

It would be useful to be able to apply FitText to multiple elements (of the same style), and have all of them use the maximum size of any one. If applied to 3 elements, whatever the smallest size is for any of them once resized, should apply to all 3 so the size is consistent across the elements.

Good work though, enjoying this.

[davatron5000]

Can you supply a code sample of what you're explaining. I was able to create a sample of similar description (http://jsfiddle.net/3Xr8L/), but all the <h1> elements are the same size throughout resizing. Perhaps you need to target elements of the same class?

[catchamonkey]

Hi,

Maybe I've misunderstood, but see http://jsfiddle.net/ku6eg/1/ There are 4 containers, each with an h1 (in reality of course not). None of the headings have scaled to the maximum width of the container div, and although they are all the same size, they are all the wrong size (not filling the container).

Thanks, Chris

[davatron5000]

Ahhh, FitText doesn't just auto-fill the parent container, it's designed for scalable text. You might want to check out BigText, I think it'll do what you're asking for.

If you want FitText to fill more of your .container look into setting the compressor value (as outlined in the readme).

[catchamonkey]

Ok, I did misunderstand then ;) Although i'm not sure of the difference between scaling text to fit, and having text increase to fill.

I'll have a play around a bit more.

Thanks.

[laurend]

I'm attempting to use fittext with consistent text sizes in four inline-blocks. It seems to mess up on load but fixes itself on resize. Has anyone else experienced this problem? For some reason the text in the last box appears larger than the rest.

[davatron5000]

@laurend Can you put a code sample in a jsfiddle? That would be the quickest way to debug this. Thanks.

[laurend]

http://jsfiddle.net/laurend/dULXN/26/

... it gets smaller on the subsequent instances of .service. not exhibiting the behavior that i described above (i'll keep working on trying to reproduce this) but it does this, as well.

[laurend]

were you able to take a look at that fiddle that I posted above? I'm now experiencing the shrinking effect on yet another site with repeating hed classes ... any help would be much appreciated!

[davatron5000]

Sorry. I thought you said "not exhibiting the behavior that i described above", so I was waiting for more news.

Ok. I think I've got your fix: http://jsfiddle.net/dULXN/31/

Essentially the order at which you execute fittext() matters. You'll need to execute it before you do your tabs. If you try to fittext() a hidden element, the browser assumes it has a height and width of 0.

You'll also probably need to reapply fittext() everytime a tab is shown. Working on a solution for this..

http://jsfiddle.net/dULXN/32/ - here's your fix

[laurend]

aha. thank you!

I'm still having issues with mysteriously shrinking hed classes, though -- the problem that I still can't reproduce in js fiddle. I ran into it again on another work-in-progress site. It's only happening in Safari. Here is my correctly-functioning js fiddle reproduction: http://jsfiddle.net/laurend/FE8Ju/20/ and here is my broken demo: http://www.davidberlow.com/index.php/index_b. It fixes on resize but when there are four subheds shown (in the narrower widths), the last one is set to the min fittext size. This could have something to do with the fact that I hide that child in the 3-col wider layout, though if that were the case as it was before, shouldn't it render properly upon loading at the 2-col width?

[davatron5000]

:heart: background:pink; development!

Hmmm... that is peculiar. In Safari it's acting like it's not even apart of the DOM, or it's applying fitText mid-render, which is weird and should be impossible. If it's not too much effort, it might be worth going with a Mobile First min-width media query here, just to see if that solves the problem. Show four until min-width: ~1200px (or whatever) then display:none the fourth-child.

[laurend]

Ok, thanks for the insight! I'll give that a shot and report back.

[laurend]

reordering the media queries with min-width didn't work ... but this did: I moved the nth-child(4) {display:none} style out of my main styles and down to a min-width = 1251px at the top of my max-width media queries list (in which the largest query is 1250px). I'm assuming this discrepancy has something to do with performance and rendering ... no quick stack overflow or google searches answered my question as to why but I'm sure an answer is out there. Thanks for suggesting to mess with the media queries, though!