Jan Küster

Posted on Mar 3, 2021 • Edited on Aug 18, 2022

Make text fit its parent size using JavaScript

#javascript #html #fonts #tutorial

*cover image: Amador Loureiro on Unsplash

Automatically resizing a text to its parent container can be a big struggle and it becomes nearly impossible if you aim to use CSS only.

To reflect the "popularity" of this issue just take a look at these StackOverflow questions, asking for nearly the same outcome:

There are tools to auto-resize text

Fortunately, there are already some resources and tools out there to do the heavy lifting for you:

Well, here is the thing: I tried a few and none really integrated flawlessly into my code. At least not without bigger overhead. I therefore thought of saving the time and hassle of integration and just took on the issue on my own. It turned out to be easier than I supposed.

Let's try on our own

There were four use cases I encountered and I'd like to show a potential implementation with additional explanation for each of them.

If you feel overwhelmed or found that I used shortcuts that I did not explain well enough, then please leave a comment so this can be improved. It's good to have an online editor, like jsFiddle or CodePen open to follow the seteps interactively.

The use cases I want to cover are

Container with fixed height and fixed width
Container with fixed width and auto height
Container with auto width and fixed height
Container, which can be resized by users

The following sections will use the same simple HTML example for all the use cases, which differ mostly by different CSS.

1. Container with fixed height and fixed width

For this use case we simply have to check, whether the text-wrapping element (a <span>) overflows on the height and while not, simple increase font-size by 1px.

Consider the following two panels:



<div class="parent">
  <div class="text-container" data-id=1>
    <span class="text">
      This Text is a bit longer
      and should be wrapped correctly
    </span>
  </div>
</div>

<div class="parent">
  <div class="text-container" data-id=2>
    <span class="text">
      This text
    </span>
  </div>
</div>

Consider the following CSS for them:



.parent {
  margin: 2%;
  width: 300px;
  height: 50px;
  padding: 15px;
  background: grey;
  color: white;
  display: block;
}

.text-container {
  width: 100%;
  height: 100%;
}

.text {
  font-size: 12px;
  display: block;
}

The default sized texts in the panels currently looks like this:

We can make use of the "overflow" of the text towards it's container (the div with the text-container class). Let's change the CSS a bit (for better visualization):



.text-container {
  border: 1px solid;
  width: 100%;
  height: 100%;
}

.text {
  font-size: 32px;
  display: block;
}

body {
  background: #33A;
}

The text now clearly overflows it's container:

Calculate the overflow

We can make further use of this, if we can calculate this overflow of the DOM element:



const isOverflown = ({ clientHeight, scrollHeight }) => scrollHeight > clientHeight

Leveraging this circumstance we can aim for an algorithmic logic for our text resizing function:

We can "try" to increase the font size step-wise by 1 pixel and test again, whether the element is overflowing it's parent or not.

If the element overflows, we know, that the previous step (one pixel less) is not overflowing and thus our best fit.

A first implementation

The above described logic implies a function, that receives an element and it's parent and iterates from a minimal value (12, for 12px) to a maximum value (say 128) and sets the style.fontSize property to the current iteration index until overflow occurs. Then re-assignes the last iteration's index.

A simple implementation could look like this:



const resizeText = ({ element, parent }) => {
  let i = 12 // let's start with 12px
  let overflow = false
  const maxSize = 128 // very huge text size

  while (!overflow && i < maxSize) {
    element.style.fontSize = `${i}px`
    overflow = isOverflown(parent)
    if (!overflow) i++
  }

  // revert to last state where no overflow happened:
  element.style.fontSize = `${i - 1}px`
}

Calling this function for the first text element and it's parent produces a fair result:



resizeText({
  element: document.querySelector('.text'),
  parent: document.querySelector('.text-container')
})

Add more options

Of course we want to be flexible and thus make the function more configurable:

allow to only add a querySelector or querySelectorAll and resolve the parent automatically
allow to pass a custom min and max value
allow to use different steps than 1 (use float values for even more precise fitting)
allow to use a differnt unit than px

The final code could look like this:



const isOverflown = ({ clientHeight, scrollHeight }) => scrollHeight > clientHeight

const resizeText = ({ element, elements, minSize = 10, maxSize = 512, step = 1, unit = 'px' }) => {
  (elements || [element]).forEach(el => {
    let i = minSize
    let overflow = false

        const parent = el.parentNode

    while (!overflow && i < maxSize) {
        el.style.fontSize = `${i}${unit}`
        overflow = isOverflown(parent)

      if (!overflow) i += step
    }

    // revert to last state where no overflow happened
    el.style.fontSize = `${i - step}${unit}`
  })
}

Let's call it for all of our .text elements and use a step of 0.5 for increased precision:



resizeText({
  elements: document.querySelectorAll('.text'),
  step: 0.5
})

It finally applies to both elements:

2. Container with fixed width and auto height

Consider the same html but a differnt CSS now:



body {
  background: #A33;
}

.parent {
  margin: 2%;
  width: 150px;
  height: auto;
  min-height: 50px;
  padding: 15px;
  background: grey;
  color: white;
  display: block;
}

.text-container {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.text {
  font-size: 12px;
  display: block;
}

The containers now have a fixed width, a minimal height but can grow dynamically (height: auto) if the content overflows. The yet untouched text looks like this:

Let's see how it looks if we manually increase the font size:



.text {
  font-size: 48px;
  display: block;
}

Add horizontal overflow checks

The height "grows" but we get an overflow for the width now.
Fortunately we can use our previous code with just a slight modification. It currently just checks for vertical overflow (using height values) and we just need add checks for horizontal overflow:



const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => (scrollWidth > clientWidth) || (scrollHeight > clientHeight)

This is it. The result will now look great, too:



resizeText({
  elements: document.querySelectorAll('.text'),
  step: 0.25
})

3. Container with fixed height and auto width

For this case we only need to change our CSS, the functions already do their work for use here.

The default looks like so:



body {
  background: #3A3;
}

.parent {
  margin: 2%;
  width: auto;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 15px;
  background: grey;
  color: white;
  display: inline-block;
}

.text-container {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.text {
  font-size: 12px;
  display: block;
}

Manually changing the font size results in this:



.text {
  font-size: 48px;
  display: block;
}

Using our function we finally get it right:



resizeText({
  elements: document.querySelectorAll('.text'),
  step: 0.25
})

There was no need for additional code here. 🎉

4. Container that can be resized by users

This is the trickiest part, but thanks to CSS3 and new web standards we can tackle it with just a few lines of extra code. Consider the following CSS:



body {
  background: #333;
}

.parent {
  margin: 2%;
  width: 150px;
  height: 150px;
  padding: 15px;
  background: grey;
  color: white;
  overflow: auto;
  resize: both;
}

.text-container {
  width: 100%;
  height: 100%;
  border: 1px solid;
  display: block;
}

.text {
  font-size: 12px;
  display: block;
}

The resize property allows us to resize the most upper-level parent containers:

The resize functionality is natively implemented by (most) modern browsers along with the displayed handle on the bottom right of the containers.

Users can now freely resize the containers and therefore, our logic changes a bit:

observe a change in the container, caused by the resize event
if the change happens, call a function, that resizes the text
optionally use a throttling mechanism to reduce the number of resize executions per second

Observe changes using `MutationObserver`

For the observation part we make use of the native Mutation Observer implementation that all modern browsers do support.

However, we can't observer a change in the .text but only in the most outer container, which is in our case .parent. Additionally, the MutationObserver requires a single node to observe, so we need to iterate over all .parent containers to support multiple elements:



const allParents = document.querySelectorAll('.parent')
allParents.forEach(parent => {
  // create a new observer for each parent container
  const observer = new MutationObserver(function (mutationList, observer) {
      mutationList.forEach( (mutation) => {
        // get the text element, see the html markup
        // at the top for reference
        const parent = mutation.target
        const textContainer = parent.firstElementChild
        const text = textContainer.firstElementChild

        // resize the text
        resizeText({ element: text, step: 0.5 })
    });
  })

  // let's observe only our required attributes
  observer.observe(parent, {
    attributeFilter: ['style']
  })
})

This plays out very nice most at the time:

Beware! There are still glitches when resizing:

We can actually fix 99.9% of them by applying different overflow CSS properties:



.parent {
  margin: 2%;
  width: 150px;
  height: 150px;
  padding: 15px;
  background: grey;
  color: white;
  overflow-x: auto;
  overflow-y: hidden;
  resize: both;
}

If anyone knows a better way to get 100% rid of the glitches, please comment :-)

Optional: add throttling

Finalizing the whole functionality we may add a throttle functionality to reduce the number of calls to the resizeText method:



const throttle = (func, timeFrame) => {
  let lastTime = 0
  return (...args) => {
      const now = new Date()
      if (now - lastTime >= timeFrame) {
          func(...args)
          lastTime = now
      }
  }
}

const throttledResize = throttle(resizeText, 25)

Use it in the observer instead of resizetText:



// ...

const parent = mutation.target

const textContainer = parent.firstElementChild

const text = textContainer.firstElementChild

throttledResize({ element: text, step: 0.5 })

// ...

Summary

I reflected my first experiences in resizing text dynamically and hope that it helps people to get into the topic and understand the mechanisms in order to evaluate existing libraries.

This is by far not a generic enough approach to become a one-for-all solution. However, there article shows, that it's achievable without the need for third-party code as modern browsers bring already enough functionality to build your own resize tool in ~50 lines of code.

Any suggestions for improvements are very welcomed and I hope you, the reader gained something out of this article.

Resources used by the author for this article

I regularly publish articles here on dev.to about Meteor and JavaScript. If you like what you are reading and want to support me, you can send me a tip via PayPal.

You can also find (and contact) me on GitHub, Twitter and LinkedIn.

Top comments (5)

Adrián Pauly • Nov 23 '22

This is awesome, thank you! I had to implement a slightly different system but this helped me grasp the concept easily, as my brain was starting to spiral down much more complicated paths. Thanks!