1

I'm trying to figure out if I can measure a string height in javascript. I have this code in C#, but I would like to see if I can get this in Javascript as well. I've looked through past SO's and found this as an answer (don't have link): 

function get_tex_height(txt, font) {
    this.element = document.createElement('canvas');
    this.context = this.element.getContext('2d');
    this.context.font = font;
    return this.context.measureText(txt).height;
  }

For whatever reason, this isn't working. Why? you might ask. I have no idea. and I have no way of knowing either. I am rednering HTML in a mobile app in a UIWebView which the only method of any kind of debugging I have is alert(somethinghere). If the JS doesn't work, then it just doesn't continue executing code and I have no idea where it failed.

So I want to just see if I can pass it a font, font size, width constraint and get an accurate height of what this string will be when rendered. If this is possible, which I'm starting to conclude is not. I might just have to use my C# method for this.

jdmdevdotnet
  • 1
  • 2
  • 19
  • 50
  • Sorry, I'm a bit confused. In the start you say you need string length, then at the end you say string height. Do you mean you want to measure the height of the element when rendered in HTML? I may be misunderstanding the question. – rob Jun 16 '17 at 14:56
  • Well by definition length would include height, but you're right I'll change that. Yes, that is what I mean. – jdmdevdotnet Jun 16 '17 at 14:58
  • Sorry, I can see how you're confused now. `length` in js could also mean the number of chars, this is not what I want. Sorry for the confusion. – jdmdevdotnet Jun 16 '17 at 14:58
  • https://stackoverflow.com/questions/6508313/javascript-console-log-in-an-ios-uiwebview –  Jun 16 '17 at 14:59
  • @Amy Thanks for that. I'm developing in Xamarin, so not sure if that would work. It should though since I'm using native UIWebView, I'll try that out for debugging, thanks! – jdmdevdotnet Jun 16 '17 at 15:00
  • Have you looked into this? https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas – pid Jun 16 '17 at 15:17

1 Answers1

0

You must attach it to the DOM in order to be rendered and measured. You can do that without showing it on the page as shown below.

function getTextHeight(text, font)
{
  var cvs, ctx, body, h;

  cvs = document.createElement('canvas');
  ctx = cvs.getContext('2d');
  cvs.style.display = "none";
  body = document.getElementsByTagName("BODY")[0];
  body.appendChild(cvs);

  ctx.font = font;
  h = ctx.measureText(text).height;
  body.removeChild(cvs);

  return h;
}

Tell me if it works, there may still be a bug. Obviously, this has NOTHING to do with the text height if it is inserted directly into the DOM. The height you get is just that of the text rendered on a canvas. For the height in the DOM you have to do something different that takes wrapping into account based on the width of the container...

pid
  • 11,472
  • 6
  • 34
  • 63