RE: make font metrics visible to user

Being able to determine geometries of fonts was a persistent user request of the SVG WG following Mozilla’s declaration (circa 2010) that they didn’t want to follow the SVG spec vis a vis fonts. If you can’t do SVG fonts (as Mozilla said we shouldn’t be able to) then being able to interrogate the geometry of fonts is the only other logical way for progress on accessibility (of deformed text) to happen.

 

It’s not so much a matter of standards (which don’t exist) as of international law (which does).

 

Cheers

D

 

From: Amelia Bellamy-Royds [mailto:amelia.bellamy.royds@gmail.com] 
Sent: Tuesday, April 25, 2017 11:13 AM
To: Ulrich-Matthias Schäfer
Cc: Paul LeBeau; Francis Hemsher; www-svg
Subject: 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