Photoshop Question posted in
The official user guide can be found here.

Javascript – Get real letter width and height (without line-height) – Photoshop

In Adobe Illustrator (or Photoshop)

Letter A
Font-family: Arial
Font-Size: 396.55pt
Measures:
– Width: 93.8mm (266px)
– Height: 100.2mm (284px)

Measuring in Javascript:
– Width: 265px (matches, is correct)
– Height: 456px (NOT match, grabs the line height, and it is wrong)

How I can get the EXACT height of the letter?

// 6pt ---------------- 8px
// 96px --------------- 25.4mm

var arial_A_upper_pt = jQuery("#arial_A_upper_pt").html();
jQuery("#arial_A_upper").html("A");
jQuery("#arial_A_upper").css("font-size", arial_A_upper_pt + "px");

var arial_A_upper_width_on_px = jQuery("#arial_A_upper").width(); // on PX
//  var arial_A_upper_width_on_mm = ((arial_A_upper_width_on_px * 25.4) / 96);
//  arial_A_upper_width_on_mm = arial_A_upper_width_on_mm.toFixed(2);
jQuery("#arial_A_upper_width").html(arial_A_upper_width_on_px + "px");

var arial_A_upper_height_on_px = jQuery("#arial_A_upper").height(); // on PX
//  var arial_A_upper_height_on_mm = ((arial_A_upper_height_on_px * 25.4) / 96);
//  arial_A_upper_height_on_mm = arial_A_upper_height_on_mm.toFixed(2);
jQuery("#arial_A_upper_height").html(arial_A_upper_height_on_px + "px");

Example: http://jsfiddle.net/7Cunp/6/

I need this: http://www.javiscript.es/desarrollo/letrascortadas/img/letter_size.jpg

Tags:

2

Answers


  1. 0

    That is a question, that is not easily answered. I can pretty much guarantee that there isn’t a property you can call to get the value.

    First off, the data is embedded in the font-file, and is probably not accessible by JS (please correct me if i’m wrong). Second the value differs in just about every font-file.

    However, you can use a little math to get a close approximation on the size.

    The size of a letter is measured from the ascenders top to the descenders bottom. Also called the EM. This is both used horizontally and vertically. The size of the uppercase letters are sometimes generalized as being 2/3 of the EM.

    So, since jQuery returns the height wrongly, but the width correctly.(the EM-size, not the actual width of the letter, if you measure it :D) I would do something like this:

    var EM_height = jQuery("#arial_A_upper").width()
var uppercase_height = Math.floor(EM_height / 3 * 2)

    JS isn’t my strong side, so someone can probably tell, if there is a better way.

    You can get a better value, if you know it will only be used on a specific font such as Arial.

    For example. 72pt Arial measures 51.37pt on the uppercase A on my computer.

    51,37/72 = 0,713472222 so that is the ratio you need to come up with. so 7/10 is probably a good suggestion.

    Hope that helps a bit.

    Login or Signup to reply.
  2. 0

    Actually you’ll never get the exact results in browser as in Photoshop or Illustrator.

    Every browser renders fonts in its own way. (http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari).

    In your case the most closer variant will be to put the line height the same as the font size.

    jQuery("#arial_A_upper").css("line-height", arial_A_upper_pt + "px");

    Because browser sets by default “normal” line height that is bigger than the font size so the height is much more bigger than it should be. But even if you’ll put the line-height the same as font size you’ll get the bigger result then it should be. (397px)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search