Fit to container height

[gragland]

Awesome work on this library! I'm looking for something similar but that scales the font size of multi-line text to always fit the container height rather than width. Any thoughts on adding a height option?

[rikschennink]

Thanks! I want to keep the library as small as possible, but this seems like a logical feature for it, I'll see if I can incorporate it without it adding too much additional weight.

[x35a]

@gragland try this https://gist.github.com/rosivanov/d3d9cc739e36f06b96a332d4bdef7d9e

[gragland]

@RosIvanov Thanks! Will test that out once I get a chance.

[rikschennink]

@RosIvanov Thanks!

[x35a]

@gragland @rikschennink You are welcome) Please note that this is very tiny code snippet which does not detect @font-face load and images load.
To do this I would recommend libs below
https://github.com/JenniferSimonds/FontDetect
https://github.com/desandro/imagesloaded

[jcklpe]

@gragland Hey so does this js plugin detect height now, or does that gist linked work? I've been using textSlab.js and it works well for breaking stuff up into multiple lines but if the text being broken up is super long then it makes stuff waaaay to tall.

[x35a]

@thedonquixotic linked gist has to work if you set height for text element

[jcklpe]

@RosIvanov Does it work with max-height?

[x35a]

@thedonquixotic guess it should

[deviousasti]

It's been a year since this issue was opened.
Are there any plans?

[rikschennink]

@deviousasti The plans are there, it's the time that is the problem, can't believe it's already been a year.

[deviousasti]

I just wrote my own:

        function FitText(el) {
            this.element = el;
            this.parent = el.parentElement;
            this.clientHeight = -1;
            this.clientWidth = -1;

            this.fit = function (shouldRecalc) {
                this.parent.style.fontSize = "100px";
                if (shouldRecalc || this.clientWidth < 0) {
                    this.recalc();
                }

                this.parent.style.fontSize =
                    Math.max(10,
                        Math.min(this.clientHeight,
                            Math.floor(this.clientWidth / this.element.clientWidth * 100),
                        )
                    ) + 'px';
            }

            //cache parent width, height
            this.recalc = function () {
                this.clientWidth = this.parent.clientWidth;
                this.clientHeight = this.parent.clientHeight;
            }
        };

HTML

<div class="parent-with-size-defined">
   <span class="fit-text">Some text</span>
</div>

Usage

let f = new FitText(document.querySelector(".fit-text")); f.fit();

[rikschennink]

Nice! Thanks for posting.

[jcklpe]

Why not do a pull request to add these changes in to the original plugin?

I'm just a designer learning to code so I get that my JS is super rusty and maybe I'm not understanding the conversation but that seems like a good idea right? If there's a limitation to the plugin, and a fix has been posted then shouldn't that change be pulled in?

[impactcolor]

@RosIvanov thanks for adding that resize code. Unfortunately it doesn't work for me.
I'm resizing the test with fitty('.fit'); then I attempt to resize it using scaleFontSize that you made with this: $('.fit').scaleFontSize({minFontsize: 12}); no errors it just doesn't resize to fit the height. Can you elaborate a little more on how it should work? Or am I doing something wrong?

[x35a]

@impactcolor sorry for late reply, hope you already have solved this problem.

[KoalaBear84]

Any updates on this? This is what I'm also missing right now :)

[iba-jsykes]

I had a problem where , since it only uses width, the lib made the text too tall for the container.

You can mod the following line where maxSize is the height of the parentNode : for my project, jQuery was already injected so I used

var maxHeight  = $(e.element).closest(".class-of-the-parent-element").height();

e.currentFontSize = Math.min(Math.max(e.minSize, e.availableWidth / e.currentWidth * e.previousFontSize), maxHeight),

[GuilhermeCouto]

any news?

[rikschennink]

@GuilhermeCouto apart from solutions posted by other devs, no

[MatanMaimon]

same issue..please support this feature

[MatanMaimon]

I just wrote my own:

        function FitText(el) {
            this.element = el;
            this.parent = el.parentElement;
            this.clientHeight = -1;
            this.clientWidth = -1;

            this.fit = function (shouldRecalc) {
                this.parent.style.fontSize = "100px";
                if (shouldRecalc || this.clientWidth < 0) {
                    this.recalc();
                }

                this.parent.style.fontSize =
                    Math.max(10,
                        Math.min(this.clientHeight,
                            Math.floor(this.clientWidth / this.element.clientWidth * 100),
                        )
                    ) + 'px';
            }

            //cache parent width, height
            this.recalc = function () {
                this.clientWidth = this.parent.clientWidth;
                this.clientHeight = this.parent.clientHeight;
            }
        };

HTML

<div class="parent-with-size-defined">
   <span class="fit-text">Some text</span>
</div>

Usage

let f = new FitText(document.querySelector(".fit-text")); f.fit();

nice
maybe worth to mention to add
line-height: 1;
in the parent block

[LeelaBasavaiah]

The gist link above does not come up now. Can some one please paste the code snippet here if it works for height? The other piece of code does not set max and min fonts.

How to make the resize working with height as well?

[madmod]

I am currently in need of this and am willing to contribute a PR if someone can point me in the right direction.

[rikschennink]

@madmod I'm open to merging it, but only if it's fast and doesn't add too much weight.

[LeelaBasavaiah]

Please have a look at the bold lines which I added to make it work:

l = function (e) {
(e.availableWidth = e.element.parentNode.clientWidth),
(e.currentWidth = e.element.scrollWidth),
(e.availableHeight = e.element.parentNode.clientHeight),
(e.currentHeight = e.element.scrollHeight),
(e.previousFontSize = e.currentFontSize),
(e.currentFontSize = Math.min(Math.min(
Math.max(
e.minSize,
(e.availableWidth / e.currentWidth) * e.previousFontSize
),
e.maxSize
),
Math.min(
Math.max(
e.minSize,
(e.availableHeight / e.currentHeight) * e.previousFontSize
),
e.maxSize
))),
(e.whiteSpace =
e.multiLine && e.currentFontSize === e.minSize
? "normal"
: "nowrap");
},

[rikschennink]

Thanks, this looks like a super small change, I'll take a look at this sometime in the next couple weeks.

[rikschennink]

@LeelaBasavaiah can you create a public demo of this code on https://codesandbox.io

[cb109]

I would love to see support to make text respect the height of the container in fitty.js, that would make it the best text fitting solution I have seen yet 👍

[Corgi]

Arrived here in search of a way to get height fitting working. Would also love to see it.

[MaxVeilleuxMTL]

Hello,

2023 here XD

Just found this lib that would do exactly what I am looking for... except this issue is still unresolved (using width AND height to resize text).

As soon as my text is multiline, it uses the minSize instead of adapting depending on parent height.

See here :

[RishabaPriyanCMW]

I read the entire thread, so i found a solution that would solve my problem of resizing the text; when the text overflows the container height using this library : use-fit-text 👍 : https://www.npmjs.com/package/use-fit-text, https://github.com/saltycrane/use-fit-text/blob/master/index.ts