Creating a fullscreen type
Tags: css, creativecode, ui
Published: 2020-06-13 20:36:36

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. 

```html
<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:

```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`.

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

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

```javascript
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`:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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! 


 












 

{% codepen https://codepen.io/immarcelo/pen/GRoJPZb %}