how can i make text best fit based on text length?

Question

I have a page that shows the company name of the user. the company could have a very long name or a short name. both should automaticly change font-size so text would perfectly fit inside the element:

<h1 class="sidebar-compName responsiveText">{{user.companyName}}123456789</h1>

(the 123456789 is to test if it works and the h1 element has a 200px width) this is how it looks: https://i.stack.imgur.com/QztoT.jpg

i created a system which works when you have 1 text that should be responsive. (because its a while loop it will crash the browser when it has to loop to many times)

//angularjs function which gets called when all content is loaded
$scope.adjustFontsSize = function(value){
    //get all elements with the class "responsiveText"
    var elems = document.getElementsByClassName("responsiveText");
    //loop through all elems
    for(var i = 0; i < elems.length; i++){
        //set standard size to 50px
        var size = 50;
        elems[i].style.fontSize = size + "px";
        //resize untill it fits within the element (the -75 increases the size a little because it looks small without it)
        while (elems[i].scrollWidth -75 > elems[i].offsetWidth) {
            size--;
            elems[i].style.fontSize = size + "px";
        }
    }
}

this can only decrease the font size. thats why it needs a standard size.

with my system it looks like this: https://i.stack.imgur.com/2XKVf.jpg

now i want this to be done for multiple elements (with the class "responsiveText") and done by increasing and decreasing the font-size to make it fit perfectly. but i cant seem to figure out how.

it would also be very nice to have a offset with it. so i give it the class "rt1" which fits the text as large as possible inside the element and "rt2" should fit the text but a little bit smaller than the "rt1" inside the element.

EDIT: this is not a duplicate of Dynamically resize font size to fit container size

i already have the "while" possibility but this wont work when i have to many elements that it has to change.

Possible duplicate of [Dynamically resize font size to fit container size](https://stackoverflow.com/questions/17001302/dynamically-resize-font-size-to-fit-container-size) — Daniel Beck, Jun 03 '18 at 15:02

score 0 · Answer 1 · answered Jun 03 '18 at 15:04

0

You can use plugin call FlowTypeJS . It based on width of element. Just like you control font-size on every @media queries (Less than 768px, more than 993px, more than 1200px, and many more)

answered Jun 03 '18 at 15:04

Bariq Dharmawan

755
4
16
26

i cant get it to work with the FlowTypeJS. for me it just uses the smalles font size i give with it: `$(elems[i]).flowtype({ minFont : 12, maxFont : 100 });` – Kelvin Wijkniet Jun 03 '18 at 15:20

score 0 · Accepted Answer · answered Jun 03 '18 at 20:56

i fixed it by using FitText.js ( https://github.com/davatron5000/FitText.js )

i also added an offset option to it and this is how i used it:

var elems = document.getElementsByClassName("responsiveText");
    for(var i = 0; i < elems.length; i++){
        jQuery(elems[i]).fitText();

        var text = elems[i].classList.value;
        var fontSize = elems[i].style.fontSize.split("px")[0];
        var offset = 0;

        if(text.includes("rt")){
            offset = text.slice(text.indexOf("rt") + 2).split(" ")[0];
        }

        elems[i].style.fontSize = (Number(fontSize) + Number(offset)) + "px";
    }

to make text smaller i have an element like this:

<h1 class="sidebar-userName responsiveText rt-*">{{user.companyName}}</h1>

to make it larger i have an element like this:

<h1 class="sidebar-userName responsiveText rt*">{{user.companyName}}</h1>

and if its the perfect size without using the offset i just have an element like this:

<h1 class="sidebar-userName responsiveText">{{user.companyName}}</h1>

(replacing " * " with the offset value in pixels)

how can i make text best fit based on text length?

2 Answers2