Get font character bounding box using opentype.js

By | 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

Vishal Monpara is a full stack Solution Developer/Architect with 13 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1's and 0's from geographically dispersed hard disks to geographically dispersed user leveraging geographically dispersed team members.