Post
Ask Question

Zoom Text Content With CSS And JavaScript

Recently I was working on one task where I have to implement zoom in / zoom out feature for text content in one div container.
 
At the initial stage, this looks easy to implement but later on, I found that this is a bit tricky, as I have 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 click of zoom in / zoom out button we will zoom in or zoom out the text content.  
  1. <div class="container">    
  2.   <div id="textContent" contenteditable>    
  3.     <h1>Zoom in Zoom out implementation</h1>    
  4.     <p>Three different approach</p>    
  5.     <ul>    
  6.       <li>CSS Zoom attribute</li>    
  7.       <li>CSS transform : scale()</li>    
  8.       <li>Using font size</li>    
  9.     </ul>    
  10.   </div>    
  11. </div>    
  12.     
  13. <button id="zoomIn">➕ Zoom In</button>    
  14. <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 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 
  1. import "./style.css";  
  2.   
  3. const textContent: HTMLElement = document.getElementById("textContent");  
  4. const btnZoomIn: HTMLElement = document.getElementById("zoomIn");  
  5. const btnZoomOut: HTMLElement = document.getElementById("zoomOut");  
  6.   
  7. let zoomLevel = 1;  
  8.   
  9. btnZoomIn.addEventListener("click", () => {  
  10.   if (zoomLevel < 2) {  
  11.     zoomLevel = zoomLevel + 0.1;  
  12.     textContent.style.zoom = `${zoomLevel}`;  
  13.   }  
  14. });  
  15. btnZoomOut.addEventListener("click", () => {  
  16.   if (zoomLevel > 1) {  
  17.     zoomLevel = zoomLevel - 0.1;  
  18.     textContent.style.zoom = `${zoomLevel}`;  
  19.   }  
  20. });  
Checkout 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, 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.
  1. // Import stylesheets  
  2. import "./style.css";  
  3.   
  4. const textContent: HTMLElement = document.getElementById("textContent");  
  5. const btnZoomIn: HTMLElement = document.getElementById("zoomIn");  
  6. const btnZoomOut: HTMLElement = document.getElementById("zoomOut");  
  7.   
  8. let zoomLevel = 1;  
  9.   
  10. btnZoomIn.addEventListener("click", () => {  
  11.   if (zoomLevel < 2) {  
  12.     zoomLevel = zoomLevel + 0.1;  
  13.     textContent.style.transform = `scale(${zoomLevel})`;  
  14.     textContent.style.transformOrigin = `left top`;  
  15.   }  
  16. });  
  17. btnZoomOut.addEventListener("click", () => {  
  18.   if (zoomLevel > 1) {  
  19.     zoomLevel = zoomLevel - 0.1;  
  20.     textContent.style.transform = `scale(${zoomLevel})`;  
  21.     textContent.style.transformOrigin = `left top`;  
  22.   }  
  23. });  
Checkout 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 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. On click of the zoom-in button, we will increase the font size of the main text container, based on that inner text content size will get 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.
  1. // style.css  
  2.   
  3. #textContent {  
  4.   // ....  
  5.   font-size: 16px;  
  6. }  
  7.   
  8. h1 {  
  9.   font-size: 1.5em;  
  10. }  
  11.   
  12. p {  
  13.   font-size: 1em;  
  14. }  
  15.   
  16. li {  
  17.   font-size: 1.25em;  
  18. }  
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.
  1. // Import stylesheets  
  2. import "./style.css";  
  3.   
  4. const textContent: HTMLElement = document.getElementById("textContent");  
  5. const btnZoomIn: HTMLElement = document.getElementById("zoomIn");  
  6. const btnZoomOut: HTMLElement = document.getElementById("zoomOut");  
  7.   
  8. let zoomLevel = 1;  
  9. let rootFontSize = 16;  
  10.   
  11. btnZoomIn.addEventListener("click", () => {  
  12.   if (zoomLevel < 2) {  
  13.     zoomLevel = zoomLevel + 0.1;  
  14.     rootFontSize = rootFontSize + 2;  
  15.     textContent.style.fontSize = `${rootFontSize}px`;  
  16.   }  
  17. });  
  18. btnZoomOut.addEventListener("click", () => {  
  19.   if (zoomLevel > 1) {  
  20.     zoomLevel = zoomLevel - 0.1;  
  21.     rootFontSize = rootFontSize - 2;  
  22.     textContent.style.fontSize = `${rootFontSize}px`;  
  23.   }  
  24. });  
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 wrap 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. but you can use any of the above approaches based on your requirement. 


Summary


In this article, we have seen three different approaches to implement the zoom feature.
 
I hope you like this article, please provide your valuable feedback and suggestions in below comment section 🙂. 


Similar Articles