JSFiddle - React, Tailwind, and code Playground

by siddjain

HTML

<canvas id="canvas1" width="700" height="200"></canvas>

JavaScript

var text = 'हिन्दी में लिखना बहुत आसान है';
var font = '30pt Arial';
var metrics = getTextHeight(font, text);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.font = font;
ctx.textBaseline = 'top';
ctx.fillText(text, 10, 100);
ctx.strokeRect(10,100,ctx.measureText(text).width,metrics.height);
function getTextHeight(font, s) {
    debugger;
  s = s || 'Hg';
  var text = $('<span>'+s+'</span>').css({ 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;
};