Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Calculate text width with JavaScript
To calculate text width, we can use the measureText() method in JavaScript. In canvas, the measureText() method is used to measure width of the text content. This means we can pass text to this canvas method and then call that method to measure the text. It will return an object that contains information about the measured text.
Sometimes, width may be a float value; hence the Math.ceil() method is used to round the value and returns an integer.
Syntax
Following is the syntax of the method used to calculate the text width -
const text = "Hello World!";
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
let text = ctx.measureText(text);
console.log(text.width);
Steps to Calculate Text Width
STEP 1 – Declare the text for that we want to calculate the width. Optionally we can display the text on the screen using the innerHTML property for better user understanding.
STEP 2 – Create a canvas element using the document.createElement() method.
STEP 3 – Get the context of the above-created canvas using canvas.getContext("2d").
STEP 4 – Measure the text width using context.measureText(text).width property.
STEP 5 – Calculate the final width using the Math.ceil(width).
STEP 6 – Finally display the final width of the text.
Example
Calculating the width of the text
In the example below, we calculate the width of the text. The text content is " Hello World!". You can change the text content and see the difference in the output.
<!DOCTYPE html>
<html>
<body>
<h2>Calculating width of the text using canvas</h2>
<p id="text" style="font-size : 20px"></p>
<p>Width of the text is:
<span class="output"></span>
</p>
<script>
const text = "Hello World!";
document.getElementById("text").innerHTML = text;
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const width = context.measureText(text).width;
const finalWidth = Math.ceil(width) + "px";
document.querySelector('.output').textContent = finalWidth;
</script>
</body>
</html>
In the above, we have created a canvas element and passed text to the canvas.measureText() method and that returns an object. From that we get the width of the selected text. Math.ceil() returns rounded value from the float value. The returned value is in pixels.
Example
Calculating the width of the HTML element containing text
We use the clientWidth and clientHeight properties to calculate the width of <p> element.
<!DOCTYPE html>
<html>
<body>
<h1>Calculating width of the text</h1>
<p id='text' style = "font-size:30px">
Text to calculate : "Hello World!"
</p>
<p>Width of the text is:
<span class="output"></span>
</p>
<script>
const text = document.getElementById("text");
const height = text.clientHeight
const width = text.clientWidth
document.querySelector('.output').textContent = width + " px";
</script>
</body>
</html>
Here, clientWidth property will give width of the text. We are getting text from p tag with an id "text".
In above, we saw how to calculate the width of the text using clientWidth and canvas.measureText() methods. Hope this article gives clarification on calculating the width of the text.
7K+ Views
