Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 textMetrics = ctx.measureText(text);
console.log(textMetrics.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.
Method 1: Using Canvas measureText()
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>
Width of the text is: 63px
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.
Method 2: Using clientWidth Property
We use the clientWidth and clientHeight properties to calculate the width of HTML elements containing text.
<!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>
Width of the text is: 445 px
Here, clientWidth property will give width of the entire HTML element containing the text. We are getting text from p tag with an id "text".
Comparison
| Method | Measures | Use Case |
|---|---|---|
measureText() |
Exact text width only | Precise text measurements |
clientWidth |
Element width including padding | Layout calculations |
Conclusion
Use canvas.measureText() for precise text width calculations and clientWidth for measuring HTML elements containing text. Choose based on whether you need exact text dimensions or element layout measurements.
10K+ Views
