DEV Community

Cover image for Creating a fullscreen type
immarcelo
immarcelo

Posted on

Creating a fullscreen type

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> 
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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");
  });  
Enter fullscreen mode Exit fullscreen mode

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;
} 
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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 + ")";
}
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)