CODEWITHSUNDEEP
javascript
Andrey Shchekin
Andrey Shchekin

Reputation: 21599

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

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

Upvotes: 3

Views: 1264

Answers (1)

Alex Pakka
Alex Pakka

Reputation: 9706

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/

Upvotes: 1

Related Questions