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>