Not fitting, only uses max font size

[douglasg14b]

I'm using this inside of a vue directive to try and fix text to it's container, however it does not seem to actually do anything except set the font size to the max I allow.

Watching the fit event shows no change even when I manually trigger the fit() function on the element.

The relevant markup looks like:

<div> <!-- div1 max-width = 150px -->
  <div> <!-- div2 no styling -->
    <span>Some long text goes here</span> <!-- The element that is fitty() -->
  </div>
</div>

The span that I am using fitty() on it larger than div 2 since the text causes it to overflow, which seems to be what fitty expects?

Other Info:

• The text element is not forced to be the same size as the parent
• The parent has no padding
• Even when changing the text, the font-size is never changed by fitty when it triggers fit from the dom change
• If I manually constrain the parent container by setting it's max-width, and then calling fit(), it still does not change the text's size to anything but the max

[rikschennink]

Not sure, probably has to do with vue maybe re-rendering the DOM and fitty losing the element reference?

Do you see the same issue outside of Vue.

[douglasg14b]

I don't think it's a DOM re-rendering problem, the DOM only changes in reaction to model changes. Even then it changes the content (The actual text in this case, which is static), not the styling...etc unless I explicitly set it up to do so. I only call fitty AFTER the DOM has finished rendering the models state.

Manually calling fitty after the DOM has been rendered (And no more reactive changes are being made) doesn't seem to resolve the issue either. Fitty changes the element style as expected (Showing that it still has the element reference), but it doesn't seem to want to change the font-size to force the child element to fit in. Only using the max-size each time.

If possible, can you move forward with helping me diagnose this under the assumption that the DOM is NOT re-rendering?

Testing this without Vue is possible, but it might not be applicable to the use-case, I won't even be using the same styling library...

[rikschennink]

@douglasg14b Please understand that Fitty is a free project that seems to work for most use cases, if it doesn't that's unfortunate and while I truly would like to fix/diagnose it, I'm super busy with work that does put bread on the table. I might have time to look into this further somewhere in the next few weeks.

[rikschennink]

Closed because inactive.

[douglasg14b]

Uh, why close the issue?

It hasn't stopped being an issue unfortunately, you specifically said that you are unable to dedicate time to it's discovery at this time due to other obligations. Which I respect. And I don't expect you to solely try and sort this out, but rather assist me in figuring out the cause when the time becomes available.

However, it is much more difficult to respect closing issues for the sake of closing issues.....

[rikschennink]

@douglasg14b You're absolutely right, I quickly read my last comment this morning and missed the last line. I'll re-open it.

[douglasg14b]

Thanks! Sorry for the grumpy reply, my Mondays are usually fraught with updating long-standing issues that ProBot is marking as stale...

[rikschennink]

@douglasg14b All good ;-)

[nathanchase]

I'm using this inside of a vue directive to try and fix text to it's container, however it does not seem to actually do anything except set the font size to the max I allow.

Have you tried just doing a call on the element itself from within your Vue component instead of using a directive? I have something like the following working fine in my Vue (Nuxt) project:

<template>
  <div ref="toFit">Text</div>
</template>

<script>
import fitty from 'fitty';

export default {
  mounted() {
    const fitTitle = fitty(this.$refs.toFit, {
      minSize: 24,
      maxSize: 70,
    });

    fitTitle.element.addEventListener('fit', e => {
      console.log(e);
    });
  },
};
</script>

[radovanobal]

The same happens inside PowerBI custom visuals. But it's stuck at 18px font size for the minimum font size. It does listen to the max limit.

[btrsco]

I was having similar issues to you, but I took the code @nathanchase suggested and modified it a bit to manually fit the text on the fit event.

<template>
    <div><slot /></div>
</template>

mounted() {
    const fitText = fitty( this.$el, {
        minSize:   24,
        maxSize:   72,
    } );

    fitText.element.addEventListener( 'fit', fitText.fit );
},

I was previously waiting for an arbitrary interval of 25ms but was inconsistent and had visual glitches, this modification has made it consistent without any visual weirdness. But it loops infinitely, which is obviously undesirable. My attempts to remove the event listener early on causes the initial issue to reappear.