Calculate text width with JavaScript

Javascript Web Development Front End Technology

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.