Zoom Text Content With CSS And JavaScript

<div class="container">
  <div id="textContent" contenteditable>
    <h1>Zoom in Zoom out implementation</h1>
    <p>Three different approaches:</p>
    <ul>
      <li>CSS Zoom attribute</li>
      <li>CSS transform: scale()</li>
      <li>Using font size</li>
    </ul>
  </div>
</div>

<button id="zoomIn">➕ Zoom In</button>
<button id="zoomOut">➖ Zoom Out</button>

import "./style.css";  

const textContent: HTMLElement = document.getElementById("textContent");
const btnZoomIn: HTMLElement = document.getElementById("zoomIn");
const btnZoomOut: HTMLElement = document.getElementById("zoomOut");

let zoomLevel = 1;

btnZoomIn.addEventListener("click", () => {
  if (zoomLevel < 2) {
    zoomLevel = zoomLevel + 0.1;
    textContent.style.zoom = `${zoomLevel}`;
  }
});

btnZoomOut.addEventListener("click", () => {
  if (zoomLevel > 1) {
    zoomLevel = zoomLevel - 0.1;
    textContent.style.zoom = `${zoomLevel}`;
  }
});

• It is a non-standard feature.
• Not supported by firefox.

Zoom the text content with CSS transform : scale() function

CSS transform: scale() property is supported by all browsers and can be used as an alternative to CSS zoom property, for zooming content.

import "./style.css";  

const textContent: HTMLElement = document.getElementById("textContent");
const btnZoomIn: HTMLElement = document.getElementById("zoomIn");
const btnZoomOut: HTMLElement = document.getElementById("zoomOut");

let zoomLevel = 1;

btnZoomIn.addEventListener("click", () => {
  if (zoomLevel < 2) {
    zoomLevel = zoomLevel + 0.1;
    textContent.style.transform = `scale(${zoomLevel})`;
    textContent.style.transformOrigin = `left top`;
  }
});

btnZoomOut.addEventListener("click", () => {
  if (zoomLevel > 1) {
    zoomLevel = zoomLevel - 0.1;
    textContent.style.transform = `scale(${zoomLevel})`;
    textContent.style.transformOrigin = `left top`;
  }
});

Check out the Live Stackblitz Example at "Zoom with CSS transform:scale() function".

Advantage

• Supported in all browsers.
• Easy to use.

Disadvantage

• It changes the container layout when you scale it.
• It does not wrap up the text.

Zoom with Relative Font Size of Text Content

This approach is a bit tricky, as here we need to set the font size of inner text content with relative length using em instead of px. With a click of the zoom-in button, we will increase the font size of the main text container, and based on that, the inner text content size will be changed.

As you can see below, #textContent is the main div that encloses all the text content, we will set the default size of the text in the container as 16px and its child text-content font-size will be relative to this parent which we have set with the em.

.container {
            border: 1px solid #2f3beb;
            padding: 20px;
            max-width: 400px;
            resize: both;
            background-color: rgb(122, 208, 248);
        }

        h1 {
            font-size: 1.5em;
        }

        p {
            font-size: 1em;
        }

        li {
            font-size: 1.25em;
        }

        button {
            margin: 10px 5px;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }

Now to zoom in and zoom out we will increase/decrease the font-size of the #textContent container, this will change the size of its inner text contents.

import "./style.css";  

const textContent: HTMLElement = document.getElementById("textContent");
const btnZoomIn: HTMLElement = document.getElementById("zoomIn");
const btnZoomOut: HTMLElement = document.getElementById("zoomOut");

let zoomLevel = 1;
let rootFontSize = 16;

btnZoomIn.addEventListener("click", () => {
  if (zoomLevel < 2) {
    zoomLevel = zoomLevel + 0.1;
    rootFontSize = rootFontSize + 2;
    textContent.style.fontSize = `${rootFontSize}px`;
  }
});

btnZoomOut.addEventListener("click", () => {
  if (zoomLevel > 1) {
    zoomLevel = zoomLevel - 0.1;
    rootFontSize = rootFontSize - 2;
    textContent.style.fontSize = `${rootFontSize}px`;
  }
});

Checkout the Live Stackblitz Example at "Zoom Text Content with Relative Font-Size"

Advantage

• Supported in all browsers.
• It doesn't change the container layout and wraps the text content if required.

Disadvantage

• It is a bit complex compared to the above implementation because all inner text content must have font-size in relative length like em instead of fixed length like px.

As this approach fulfills my requirement of zoom text content with fixed container size and text wrap, I have implemented this in my task. However, you can use any of the above approaches based on your requirements.

Summary

In this article, we have seen three different approaches to implementing the zoom feature.

I hope you like this article, please provide your valuable feedback and suggestions in below comment section 🙂.