0

It was previously explained here (http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393) how to compute a text string length in pixels, with a solid reference to http://jsfiddle.net/eNzjZ/34/.

In the jsFiddle example a font parameter string is passed to getTextWidth. This parameter string includes the font size in pixels. The returned result in pixels is logged to the console.

Assuming that I want to convert the result into another units (em, pt…), I need retrieve from the parameter string the original font size in pixels in order to make a conversion. Is there a way to do it from within getTextWidth using a Canvas property ?

In other words, how can I straightforwardly retrieve or extract the font size from the context.font property?

EDITING : MORE CLUES

typeof (context.font) returnq a string including the correct font-size value. The topic of parsing a CSS string in shorthand format has been dealt with here (How to parse CSS font shorthand format). But I am so far unable to extract a specific value from the string without implementing a parse algorithm of my own… There must be a fast lane.

Brice Coustillas
  • 2,363
  • 2
  • 13
  • 18
  • JS is always returning measurements in px. Is that what you want? – Justinas Oct 11 '17 at 06:57
  • @Justinas -- Take a look at the jsFiddle example: you will see that the font parameter gets stored in the context.font property, and then that the metrics method is applied to the context. What I am aiming at is specifically retrieving the font-size of the font parameter from within the getTextWidth function, i.e. from the context. Please note the said font-size (12pt) is part of the second parameter string in the example call — console.log(…) – Brice Coustillas Oct 11 '17 at 13:42
  • Beware all UAs don't agree on what should return `context.font`. FF does return the authored value (e.g with `"12pt sans-serif"` it will return `"12pt sans-serif"`) while Chrome does return a partially computed value (with same example it will return `"16px sans-serif"`). The serialization part of CSS specs is somehow unclear on that point, but you would be better using directly the `font` variable instead of `context.font` anyway if you want to get back `"12pt"`. – Kaiido Oct 12 '17 at 08:20
  • (Ps: I don't know of a good way to get this `"12pt"` from the shorthand btw. I think your question would win by asking only this, since at the end, canvas part is unrelated to your root problem). – Kaiido Oct 12 '17 at 08:21
  • @Kaiido — Please refer to my editing of the post. – Brice Coustillas Oct 12 '17 at 08:29
  • Yes that's what I did, can you enlighten me in how I misread this edit? It still not clear if you want the `"12pt"` value or the `"16px"` one. For the later, it's easy and has already been answered in the Q/A you linked to. For the former, that would make a good question, if there weren't the unrelated canvas noise. – Kaiido Oct 12 '17 at 08:31
  • @Kaiido — I will get back to you later, for I am to go out. Thanks for your kind support. – Brice Coustillas Oct 12 '17 at 08:37
  • @Kaiido — Now, the problem is not about retrieving the _unit_ of the font size, but any part of the string — which could be fontStyle, fontVariant. I have sorted it out. Please my own answer. Thank you. – Brice Coustillas Oct 12 '17 at 16:58

1 Answers1

0

ere: How to parse CSS font shorthand format thirtydot cleared the way.

Actually, I have not found a direct access to context.font, but thirtydot's algorithm does the trick simply and efficiently.

// (…)
context.font = myOwnCSSString;
metrics = context.measureText (texte);

var $test = $('<span />');
$test.css('font', context.font);

console.log ($test.css('fontWeight'));
console.log($test.css('fontStyle'));
console.log($test.css('fontVariant'));
console.log($test.css('fontSize'));
// etc…

The second argument to .css() is a classic css shorthand string. Parsing returns the expected result.

Please note that with both Firefox and Chrome the result is returned in pixels and might be converted into points if need be..

Brice Coustillas
  • 2,363
  • 2
  • 13
  • 18
  • Seriously? So you just wanted what was already in the Q/A you linked to? Why shouldn't this be made a duplicate? Why don't you use directly `myOwnCSSString` instead of going through `context.font`? – Kaiido Oct 13 '17 at 06:02
  • @Kaiido. _Seriously_ I do not use the string directly because my question is only part of a more complex algorithm: it is another function that initializes the said string whose outcome I cannot forecast. Actually it took me some time to understand that `context.font` returns a shorthand CSS string and to find the right link to it: [link] (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font). Thus this could help other users. – Brice Coustillas Oct 15 '17 at 16:55