Post
Ask Question

Zoom Text Content With CSS And JavaScript

Recently, I was working on one task where I had to implement a zoom-in / zoom-out feature for text content in one div container.

At the initial stage, this looked easy to implement, but later on, I found that this is a bit tricky, as I had to implement this feature with some additional conditions like when we zoom in - the text content should not go outside the container and text should wrap in next line instead of showing the horizontal scroll bar in div. Also, it should work in all browsers.

Considering the problem statement, I have found various approaches to zoom in / zoom out text content with pros and cons. So in this article, we will see all the approaches to implement the zoom text content with CSS and JavaScript.

Initial App Setup

Initial HTML snippet for which we will implement the zoom feature. We have one textContent div which contains the texts, and two button one for the zoom in and one for the zoom out. On the click of the zoom in / zoom out button, we will zoom in or zoom out the text content.

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

Various Approach to Implement Zoom Feature with CSS and JavaScript

  • Zoom with CSS Zoom Property
  • Zoom with CSS transform : scale() function
  • Zoom with Relative Font Size of Text Content.

So, let's get started with the first approach.

Zoom the Text Content with CSS Zoom Property

This approach is easy to use. We just need to dynamically set the CSS zoom property of the container with JavaScript based on the Zoom In and Zoom Out button click.

As shown below, on click of zoom in, we will increase the zoom level by 0.1, and on click of zoom out, we will decrease it by 0.1

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}`;
  }
});

Check out the Live Stackblitz Example at "Zoom with CSS Zoom Property".

You can set the zoom property with a number or percentage.

For example,

  • zoom: 1 or zoom:100% is for the normal size.
  • zoom: 1.1 or zoom: 110% for increasing the zoom level
  • zoom: 0.9 or zoom: 90% for decreasing the zoom level.

Advantage

  • It is easy to use.
  • It does not change the layout size. Wrap the text content when required.
  • Supported by Chrome, Edge, IE, and Safari.

Disadvantage

  • 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 🙂.


Similar Articles