Scale text with parent or window width | refit

In this example below you will see how to do a Scale text with parent or window width | refit with some HTML / CSS and Javascript

I split the vertical viewport width by the count of chars appearing. After this is done i try matching the width of the element to its parent by increasing the font size in px.

Thumbnail
This awesome code was written by juicyarts, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright juicyarts ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Scale text with parent or window width | refit</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h2 id="fill-text-0" class="fill-text">A</h2>
<h2 id="fill-text-1" class="fill-text">AB</h2>
<h2 id="fill-text-2" class="fill-text">ABC</h2>
<h2 id="fill-text-3" class="fill-text">ABCD</h2>
<h2 id="fill-text-4" class="fill-text">ABCDE</h2>
<h2 id="fill-text-5" class="fill-text">ABCDEF</h2>
<h2 id="fill-text-6" class="fill-text">ABCDEFG</h2>
<h2 id="fill-text-7" class="fill-text">ABCDEFGH</h2>
<h2 id="fill-text-8" class="fill-text">ABCDEFGHI</h2>
<h2 id="fill-text-9" class="fill-text">ABCDEFGHIJ</h2>
<h2 id="fill-text-10" class="fill-text">ABCDEFGHIJK</h2>
<h2 id="fill-text-11" class="fill-text">ABCDEFGHIJKL</h2>
<h2 id="fill-text-12" class="fill-text">ABCDEFGHIJKLM</h2>
<h2 id="fill-text-13" class="fill-text">ABCDEFGHIJKLMN</h2>
<h2 id="fill-text-14" class="fill-text">ABCDEFGHIJKLMNO</h2>
<h2 id="fill-text-15" class="fill-text">ABCDEFGHIJKLMNOP</h2>
<h2 id="fill-text-16" class="fill-text">ABCDEFGHIJKLMNOPQ</h2>
<h2 id="fill-text-17" class="fill-text">ABCDEFGHIJKLMNOPQR</h2>
<h2 id="fill-text-18" class="fill-text">ABCDEFGHIJKLMNOPQRS</h2>
<h2 id="fill-text-19" class="fill-text">ABCDEFGHIJKLMNOPQRST</h2>
<h2 id="fill-text-20" class="fill-text">ABCDEFGHIJKLMNOPQRSTU</h2>
<h2 id="fill-text-21" class="fill-text">ABCDEFGHIJKLMNOPQRSTUV</h2>
<h2 id="fill-text-22" class="fill-text">ABCDEFGHIJKLMNOPQRSTUVW</h2>
<h2 id="fill-text-23" class="fill-text">ABCDEFGHIJKLMNOPQRSTUVWX</h2>
<h2 id="fill-text-24" class="fill-text">ABCDEFGHIJKLMNOPQRSTUVWXY</h2>
<h2 id="fill-text-25" class="fill-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/juicyarts/scale-text-with-parent-or-window-width-or-refit-aBByaw */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font-family: Helvetica;
}
#wrapper {
  width: 100%;
  position: relative;
  float: left;
  color: white;
  padding: 0;
}

.fill-text {
  position: relative;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  background: #ff812a;
  color: white;
  clear: both;
  display: inline-block;
}
.fill-text:nth-child(2n+1){
  background: #535353;
}

/*Downloaded from https://www.codeseek.co/juicyarts/scale-text-with-parent-or-window-width-or-refit-aBByaw */
function fillText(cfg) {
  var el, elL, pW, elW, poW, fs, vendor, newFs
  vendor = vendorPre()

  function setSize() {
    el = document.getElementById(cfg.element)
    elL = el.innerText.length
    pW = cfg.parent ? document.getElementById(cfg.parent).clientWidth : window.innerWidth
    elW = el.clientWidth
    poW = pW - elW
    fs = vendor.css + 'calc((100vw - ' + poW + 'px)/' + elL + ')'
    el.style.fontSize = fs

    if (el.clientWidth < pW) {
      newFs = Math.ceil(parseFloat(window.getComputedStyle(el, null).fontSize.replace('px', '')))
      while (el.clientWidth < pW) {
        newFs++
        el.style.fontSize = newFs + 'px'
      }
    }

    if (el.clientWidth > pW) {
      newFs = Math.ceil(parseFloat(window.getComputedStyle(el, null).fontSize.replace('px', '')))
      while (el.clientWidth > pW) {
        newFs--
        el.style.fontSize = newFs + 'px'
      }
    }

  }
  setSize()

  window.addEventListener('resize', debounce(setSize, 10))
}

function vendorPre() {
  var styles, pre, dom
  styles = window.getComputedStyle(document.documentElement, '')
  pre = (Array.prototype.slice
    .call(styles)
    .join('')
    .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1]
  dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
}

function debounce(fn, time) {
  var timeout, context, args, run
  return function() {
    context = this
    args = arguments
    run = function() {
      timeout = null
      fn.apply(context, args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(run, time)
  }
}

for (var i = 0; i < document.getElementsByTagName('h2').length; i++) {
  fillText({
    element: 'fill-text-' + i
  })
}

Comments