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>
