How to scale/zoom a QTextEdit area

In this tutorial, we will learn how to scale/zoom a QTextEdit area from a toolbar button click and/or ctrl + mouse wheel.

First, let’s create a simple QTextEdit area in our HTML file:

This is a QTextEdit area.

Next, we will add a toolbar button and set up an event listener for it to zoom in and out the text in the QTextEdit area:

Zoom In
Zoom Out

var textArea = document.getElementById(‘textArea’);
var zoomInButton = document.getElementById(‘zoomIn’);
var zoomOutButton = document.getElementById(‘zoomOut’);

zoomInButton.addEventListener(‘click’, function() {
var currentFontSize = parseInt(window.getComputedStyle(textArea, null).getPropertyValue(‘font-size’));
var newFontSize = currentFontSize + 2;
textArea.style.fontSize = newFontSize + ‘px’;
});

zoomOutButton.addEventListener(‘click’, function() {
var currentFontSize = parseInt(window.getComputedStyle(textArea, null).getPropertyValue(‘font-size’));
var newFontSize = currentFontSize – 2;
textArea.style.fontSize = newFontSize + ‘px’;
});

document.addEventListener(‘mousewheel’, function(event) {
if (event.ctrlKey) {
var currentFontSize = parseInt(window.getComputedStyle(textArea, null).getPropertyValue(‘font-size’));
if (event.deltaY > 0) {
var newFontSize = currentFontSize – 2;
textArea.style.fontSize = newFontSize + ‘px’;
} else {
var newFontSize = currentFontSize + 2;
textArea.style.fontSize = newFontSize + ‘px’;
}
event.preventDefault();
}
});

Now, when you click on the “Zoom In” button, the text in the QTextEdit area will increase in size. Clicking on the “Zoom Out” button will decrease the text size. Additionally, you can use the ctrl key along with the mouse wheel to zoom in and out.