Re: make font metrics visible to user

There is also a Font Metrics API proposed as part of the CSS Houdini specs,
which would make the same values available generally, without any
dependency on Canvas2D:
https://drafts.css-houdini.org/font-metrics-api/

I suspect that the Canvas2D implementation in browsers won't happen until
after the Houdini methods and interfaces are stabilized, at which time the
Canvas methods would be synchronized.  The main difference is that the
Houdini methods compute the font styles either from an Element in the DOM
or from a passed-in CSSOM style object, while the Canvas methods take their
styles from the current Canvas drawing settings.

I also think there has been some (informal) discussion about exposing font
metrics to declarative CSS (as additional units, like ex and ch, or as a
function), but that is unlikely to happen until after the JavaScript APIs
have been implemented and tested.

So, yes: people are working on this.  It would make so many aspects of SVG
text layout easier.  (Of course, so would proper support for
baseline-alignment properties!)

~ABR


On 25 April 2017 at 08:42, Ulrich-Matthias Schäfer <ulima.ums@gmail.com>
wrote:

> Well thats interesting. I wonder if that might be available one day on svg
> elements, too.
> I think that would provide everything we need for our purposes. Thanks!
>
> 2017-04-25 13:10 GMT+02:00 Paul LeBeau <paul.lebeau@gmail.com>:
>
>> Actually, there is already an API in the browser for accessing font
>> metrics: CanvasRenderingContext2D.measureText() which returns a
>> TextMetrics object containing all the values you'd want.
>>
>> https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
>>
>> The bad news is that it isn't properly supported yet. The only value that
>> the browsers currently return is width.
>>
>> If it was better supported, you could use that for better metrics. For
>> example: https://jsfiddle.net/f8nfyvp4/2/
>>
>> Paul
>>
>> On 25 April 2017 at 22:20, Ulrich-Matthias Schäfer <ulima.ums@gmail.com>
>> wrote:
>>
>>> Yes. Having a tightest box of certain text or glyph is a useful feature,
>>> too.
>>> Somewhat like: text.getTightestBox()
>>>
>>> For my case I would like to have a function `text.getFontMetrics()`
>>> which tells me the exact metrics of the font of this text element (maybe
>>> including bboxes and glyphs) taking all font properties into account.
>>>
>>> 2017-04-25 12:14 GMT+02:00 Francis Hemsher <fhemsher@gmail.com>:
>>>
>>>> Just to add something to your suggestions...
>>>> Also, what would be just dandy, is to have the actual bounding box
>>>> dimensions for the unicode svg drawing of each font character. Otherwise it
>>>> is tedious to accurately place font icons, and other individual characters.
>>>> Francis
>>>>
>>>> On Sat, Apr 22, 2017 at 8:21 AM, Ulrich-Matthias Schäfer <
>>>> ulima.ums@gmail.com> wrote:
>>>>
>>>>> Hey everyone,
>>>>> I am one of the maintainers of the svg.js library and one thing we
>>>>> stumpled over was svg text which is really hard to tame. The text is
>>>>> positioned relative to the baseline which makes sense in one case but is
>>>>> bad in others. We tried to position text based on the upper left edge and
>>>>> currently we use browsers bounding box implementation to achieve that.
>>>>> However - this differs around browsers and I was looking for a more stable
>>>>> way to do that.
>>>>> One possibility which came into my mind was to add a method to get the
>>>>> metrics of the font which is used. Most importingly the values of
>>>>> unitsPerEm and the baseline position. That alone would allow us to move the
>>>>> text in a consistent manner.
>>>>> Is there any effort I dont know of to put something like this into the
>>>>> specs?
>>>>>
>>>>> Thanks for reading! Cheers,
>>>>> Fuzzy
>>>>>
>>>>
>>>>
>>>
>>
>