Scale text with parent or window width | refit

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.

<!DOCTYPE html>
<html >
<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/ */
*{
  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/ */
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
  })
}

This awesome code ( Scale text with parent or window width | refit ) is write by juicyarts, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © juicyarts