Creating a fullscreen type

#css #creativecode #ui

Have you ever find yourself in a situation you need your copy to fill the whole width of a screen? You probably not, but that's what creative code is all about.

Let's start this example by our HTML structure.

<h1 class="fullscreenType">
  <span class="fullscreenType-sizer">
    such a large title
  </span>
</h1>

We need to wrap our text content inside a sizer element. We are going to set its display do inline-block, this way we can define exactly how large our text is in pixels.

Now, the CSS:

.fullscreenType {
  text-align: center;
}
.fullscreenType-sizer {
  display: inline-block; 
}

That's all. We need our sizer to be display:inline-block, as I mentioned before, and also our parent should align our content centrally.

Now the thing happens: Javascript

let's start by defining our function and selecting our element via querySelector.

  function fullScreenType() {
     const fullType = document.querySelector(".fullscreenType-sizer");
  });

Now, let's get our element dimensions using the getBoundingClientRect() function.

function fullScreenType() {
  const fullType = document.querySelector(".fullscreenType-sizer"); 
  let fullTypeWidth = fullType.getBoundingClientRect().width;
  let fullTypeHeight = fullType.getBoundingClientRect().height;
}

Now we come to the core of this functionality. We need to find a ratio between the width of our type and the available screen width, so we can apply our transform:

function fullScreenType() {
  const fullType = document.querySelector(".fullscreenType-sizer"); 
  let fullTypeWidth = fullType.getBoundingClientRect().width;
  let fullTypeHeight = fullType.getBoundingClientRect().height;
  let fullTypeWidthRatio = window.innerWidth / parseInt(fullTypeWidth);
}

Now that we got our ratio, we need to pass it to our text wrapper, so it knows how much it should enlarge (or shrink) to fit our screen. Like this:

function fullScreenType() {
  const fullType = document.querySelector(".fullscreenType-sizer"); 
  let fullTypeWidth = fullType.getBoundingClientRect().width;
  let fullTypeHeight = fullType.getBoundingClientRect().height;
  let fullTypeWidthRatio = window.innerWidth / parseInt(fullTypeWidth); 
  fullType.style.transform = "scale(" + fullTypeWidthRatio + ")";
}

But we have a problem: CSS transformations do not affect element's real dimensions, so our scaled type would overlap any content below or create empty space if made smaller. We need to correct this behaviour making use again of our ratio, now setting a new height based on the pre-transform value we defined before:

function fullScreenType() {
  const fullType = document.querySelector(".fullscreenType-sizer");
  let fullTypeWidth = fullType.getBoundingClientRect().width;
  let fullTypeHeight = fullType.getBoundingClientRect().height;
  let fullTypeWidthRatio = window.innerWidth / parseInt(fullTypeWidth); 
  fullType.style.transform = "scale(" + fullTypeWidthRatio + ")";
  fullType.parentNode.style.height = fullTypeHeight * fullTypeWidthRatio + "px";
}

Great, now our element has proper dimensions! Let's call our function now and make a few tweaks:

function fullScreenType() {
  const fullType = document.querySelector(".fullscreenType-sizer");
  fullType.style.transform = "scale(1)";
  let fullTypeWidth = fullType.getBoundingClientRect().width;
  let fullTypeHeight = fullType.getBoundingClientRect().height;
  let fullTypeWidthRatio = window.innerWidth / parseInt(fullTypeWidth); 
  fullType.style.transform = "scale(" + fullTypeWidthRatio + ")";
  fullType.parentNode.style.height = fullTypeHeight * fullTypeWidthRatio + "px";
}

fullScreenType();

window.addEventListener("resize", fullScreenType);

All together now. We called our function and add a resize listener so our full screen type is updated when screen dimensions change. Note that we also added, at the beginning of our function, a reset for our element scale to avoid weird behaviour during resize.

That's all. Hope it works for you!