How do I get the position of text top line using JavaScript

Question

I am looking at a Daniel Earwicker's answer to "How can you find the height of text on an HTML canvas?".
It provides me with a way to get certain metrics on text height.

However what I am interested in is getting the metric for a black line below:
ABCD metrics

Is it possible to get it using this approach?
See http://jsfiddle.net/BL5nP (hardcoded black line).

HTML:

<canvas width="500" height="500"></canvas>

JavaScript:

// function from https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas/9847841#answer-9847841
var getTextHeight = function(font) 
{
    var text = $('<span>Ag</span>');
    text[0].style.font = font;

    var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

    var div = $('<div></div>');
    div.append(text, block);

    var body = $('body');
    body.append(div);

    try 
    {
        var result = {};

        block.css({ verticalAlign: 'baseline' });
        result.ascent = block.offset().top - text.offset().top;

        block.css({ verticalAlign: 'bottom' });
        result.height = block.offset().top - text.offset().top;

        result.descent = result.height - result.ascent;
    } 
    finally 
    {
        div.remove();
    }
    return result;
};

var testLine = function(ctx, x, y, len, style) 
{
    ctx.strokeStyle = style; 
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + len, y);
    ctx.closePath();
    ctx.stroke();
};

var ctx = $('canvas')[0].getContext('2d');
var x = 10;
var y = 10;

var font = '36pt Times';
var message = 'ABCD';

ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.font = font;
ctx.fillText(message, x, y);

var w = ctx.measureText(message).width;
var h = getTextHeight(font);

testLine(ctx, x, y, w, 'red');
testLine(ctx, x, y + h.ascent, w, 'green');
testLine(ctx, x, y + h.height, w, 'blue');
testLine(ctx, x, y + 10, w, 'black'); // this line is what I am interested in

In future, please add your code to your question. Links to code are not necessarily future proof and other people may gain from your Q/A — Lee Taylor, Dec 31 '13 at 00:36

Alex Pakka · Accepted Answer · 2013-12-31T03:57:20.493

1

There is this small fontmetrics library that does the trick https://github.com/Pomax/fontmetrics.js

The only reliable method to get the ascent (top of letter l) is to simply draw the text on the canvas and count white lines until top boundary is visible (this is what the library above does).

There are couple of approximations by aligning inline spans and divs, but none of them gives reliable cross-browser results. E.g. this one relies on getBoundingClientRect() and can be made to work in certain limited cases, but not in general: http://jsfiddle.net/Exceeder/rP7Jj/

edited Dec 31 '13 at 03:57

answered Dec 31 '13 at 01:14

Alex Pakka

9,466
3
45
69

Cool, I only wish I read this answer before I did my own implementation of the same algorithm at http://codepen.io/ashmind/pen/IFAxo :) – Andrey Shchekin Dec 31 '13 at 10:56

How do I get the position of text top line using JavaScript

1 Answers1