DEV Community

Cover image for Creating a fullscreen type
immarcelo
immarcelo

Posted on

2

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!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay