font units

[louisdoe]

Hi

Is there a way to use "rem" units in data-fittext-max ?

Thanks a lot for this plugin

[bonatoc]

+1 — I think rem and em units support is crucial in these responsive times...

[patrickmarabeas]

v4.x will have ability to set max size to font-size specified in CSS (data-fittext-max="initial") - this can be what ever unit type you like - but will still be calculated and applied as a px unit. How does this sound?

[louisdoe]

yes that's really cool. Could we be notified when this version is avail ?

thanks !

2016-01-18 3:41 GMT+01:00 Patrick Marabeas notifications@github.com:

v4.x will have ability to set max size to font-size specified in CSS ( data-fittext-max="initial") - this can be what ever unit type you like - but will still be calculated and applied as a px unit. How does this sound?

— Reply to this email directly or view it on GitHub https://github.com/patrickmarabeas/ng-FitText.js/issues/42#issuecomment-172410776 .

[patrickmarabeas]

It's live (beware of potentially breaking changes): https://github.com/patrickmarabeas/ng-FitText.js/releases/tag/v4.0.0

[louisdoe]

So with this version 4.0.0, can I use "rem" units like this (I'm not sure I understand your previous message regarding "font-size specfied in css":

<div class="fittedRes" data-fittext data-fittext-max="2rem" data-ng-model="data.computed.userLengthFtin + ' x ' + data.computed.userWidthFtin + ' x ' + data.computed.userThickFtin">
    {{data.computed.userLengthFtin}} x {{data.computed.userWidthFtin}} x {{data.computed.userThickFtin}}
</div>

[patrickmarabeas]

CSS:

.myEmClass {
    font-size: 2em;
}

HTML:

<div class="myEmClass" fittext fittext-max="inital">Face man</div>

Also check out the line "Max font size is CSS font-size" in the demo.

[louisdoe]

ok, thanks, should I remove  data from all three directives data-fittext data-fittext-max and data-ng-model ?

[louisdoe]

Doesn't seem to work for me with version 4.0.0 with the following code:

<div class="fittedRes" fittext fittext-max="inital" ng-model="data.computed.userLengthFtin + ' x ' + data.computed.userWidthFtin + ' x ' + data.computed.userThickFtin">
    {{data.computed.userLengthFtin}} x {{data.computed.userWidthFtin}} x {{data.computed.userThickFtin}}
</div>

with CSS:

html {
    font-size: 11px;
}
#results #userdims .fittedRes {
    font-size: 1.2rem;
}

and the font-size in my div stays to 10px, whereas there is still space left to fill.

EDIT: it seems that it doesn't 'recompute' the size dynamically, back to my first issue, while this was working with version 3.3.3

[patrickmarabeas]

• data- is optional
• ng-model has been replaced with ng-bind, {{ ... }} no longer required due to correct usage of ngBind

<div class="fittedRes" fittext fittext-max="inital" ng-bind="data.computed.userLengthFtin + ' x ' + data.computed.userWidthFtin + ' x ' + data.computed.userThickFtin"></div>

[louisdoe]

ok seems good now ! Thanks !!

[louisdoe]

except with the font-size with version 4.0.0:

CSS:

html {
       font-size: 11px;
}
#results #userdims .fittedRes {
    width: 100%;
    height: 2rem;
    font-size: 2rem;
}

and HTML:

<div class="fittedRes" fittext fittext-max="inital" ng-bind="data.computed.userLengthFtin + ' x ' + data.computed.userWidthFtin + ' x ' + data.computed.userThickFtin">
                            {{data.computed.userLengthFtin}} x {{data.computed.userWidthFtin}} x {{data.computed.userThickFtin}}
                        </div>

font-size should go up to 2rem, which is 22px, but it maxes out at 10px, whereas there's still space in the box.

[patrickmarabeas]

Going to say it's the width: 100%; you are setting that's borking it.

Here's a working demo: http://codepen.io/patrickmarabeas/pen/RrxmLQ

[patrickmarabeas]

v4.1.0 has replaced 'intial' with the more semantic word 'inherit'. This value can also be used with data-fittext-min.

[louisdoe]

yes indeed, that must be it, but as I use a totally responsive design (it's a mobile app), I don't know how to avoid this. Do you have an idea ?

2016-01-22 3:32 GMT+01:00 Patrick Marabeas notifications@github.com:

Going to say it's the width: 100%; you are setting that's borking it.

Here's a working demo: http://codepen.io/patrickmarabeas/pen/RrxmLQ

— Reply to this email directly or view it on GitHub https://github.com/patrickmarabeas/ng-FitText.js/issues/42#issuecomment-173782651 .

[patrickmarabeas]

Put FitText on a nested element. I'm assuming you aren't doing * { width: 100% } and all your elements have 100% width.

[louisdoe]

I am not sure I understand. All my nested divs widths are in %.

2016-01-28 23:24 GMT+01:00 Patrick Marabeas notifications@github.com:

Put FitText on a nested element. I'm assuming you aren't doing * { width: 100% } and all your elements have 100% width.

— Reply to this email directly or view it on GitHub https://github.com/patrickmarabeas/ng-FitText.js/issues/42#issuecomment-176451494 .

[patrickmarabeas]

Add a class or use following selector to ensure the element has an auto width:

[fittext] {
  width: auto;
}