Get font character bounding box using opentype.js

By Vishal Monpara | October 8, 2019 | 0 Comment

Category: Javascript

If you would like to get the bounding box details of any font character using opentype.js, here is a working example.

Dependency:

JQuery
Opentype.js
FORTE.ttf font (or you can use any font)

Make sure you make appropriate change to Url to load above mentioned resources from the following example.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Opentype.js Bounding Box Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script type="text/javascript" src="jquery-1.9.1.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
      <style type="text/css">
         body { background: #fff; }
         body { font-family:arial; }
         canvas, .example { border:1px solid #ddd; display:inline-block;vertical-align:top;  }
         html, body, #drawing{ width:100%; height:100%; }
      </style>
   </head>
   <body>
      <div id="output"></div>
      <canvas id="drawing3" width="300" height="350"></canvas>
      <script>
         opentype.load('FORTE.ttf', function(err, font) {
             if (err) {
                 alert('Font could not be loaded: ' + err);
             } else {
                 // Now let's display it on a canvas with id "canvas"
                 var ctx = document.getElementById('drawing3').getContext('2d');
         
         		var input = 'Hello, World!';
         
        		var paths = font.getPaths(input, 10, 100, 30);
         		var output = [];
         		$.each(font.stringToGlyphs(input), function(i, gl) {
         			var bbox = paths[i].getBoundingBox();
         			output.push('unicode:' + gl.unicode + ', index:' + gl.index + ', advanceWidth' + gl.advanceWidth + ', xmin,max, ymin,max: ' + gl.xMin + '-' + gl.xMax + '|' + gl.yMin + '|' + gl.yMax + ', path bounding box: ' + bbox.x1 + '|' + bbox.y1 + '|' + bbox.x2 + '|' + bbox.y2 );
         			paths[i].draw(ctx);
         			ctx.beginPath();
         			ctx.rect(bbox.x1, bbox.y1, bbox.x2-bbox.x1, bbox.y2-bbox.y1);
         			ctx.stroke();
         		});
         		document.getElementById('output').innerHTML = output.join('<br />');
         		
         		
             }
         });
      </script>
   </body>
</html>

About Vishal Monpara