sollenne / angular-fittext

Angular Directive to auto-scale text to fit it's parent container. (fittext.js)
https://www.npmjs.com/package/angular-fittext
33 stars 18 forks source link

Upgrading from ng4-fittext to angular-fittext has several problems #21

Closed mburger81 closed 5 years ago

mburger81 commented 6 years ago

We use your plugin and also contributed to the project. We saw only now that you have renamed the lib and have done several work. We try to update but there are some problems.

If we do the upgrade and import the new module, the behavior of the plugin is not anymore like the it was before. There is always the minFontSize used and compression seems to do nothing.

On a very simple example like this, it does not work:

<div style="width: 100%; height: 100%; margin: 0px; background: yellow;">
    <div style="width: 100%; height: 100%; margin: 0px; display:flex; align-items: center; justify-content: center; color: rgba(76, 175, 80, 0.7); line-height: 100% !important; white-space: nowrap !important;"
            fittext
            [activateOnResize]="true"
            [minFontSize] ="30"
            [maxFontSize] ="40"
            [compression]="0.2">
        48%
    </div>
</div>

One of the problem we discovered is, it "fails" if we set width and height on fittext div. Previously we needed it to center text content

If we use the next code the plugin works again, with used max and min font and resizing also works:

<div style="width: 100%; height: 100%; margin: 0px; background: yellow; display:flex; align-items: center; justify-content: center;">
    <div style="color: rgba(76, 175, 80, 0.7); white-space: nowrap !important;"
            fittext
            [activateOnResize]="true"
            [minFontSize] ="30"
            [maxFontSize] ="40">
        48%
    </div>
</div>

So we think there are some breaking changes, and also we are not sure about the compression property. Previously we used always the compression, not sure why, but now it seems compression makes not sense if we use only on fittext. The sense of this property is if we have for example a scenario like this

image

This is a table with two rows and two cols always with the same size, in this case we have 4 fittext divs where we set minFontSize to 20 and maxFontSize to 40, which is the best approach to have same font size for every div? Perhaps there is also a better way to do this without using cols?

sollenne commented 6 years ago

That is strange. maybe an issue with renderer2. I'll look at the compression issue. Thanks for contributing also. It's cool to see others use your code and take an interest in it.

sollenne commented 6 years ago

Also. I left a comment on your PR. Make sure to update the documentation and I'll merge.

sollenne commented 5 years ago

closing