Intent to ship: Canvas2d TextMetrics.fontBoundingBox* attributes

62 views
Skip to first unread message

Jonathan Kew

unread,
Jun 19, 2023, 7:52:27 AM6/19/23
to dev-pl...@mozilla.org
As of Firefox 116, I intend to turn the fontBoundingBox{Ascent,Descent}
attributes of the Canvas2D TextMetrics interface on by default.

This was developed behind the dom.textMetrics.fontBoundingBox.enabled
preference.

Status in other browsers is:
Chrome - shipping
Safari - shipping

Bug to turn on by default:
https://bugzilla.mozilla.org/show_bug.cgi?id=1801198

Standard: https://html.spec.whatwg.org/multipage/canvas.html#textmetrics

Note that the standard also lists some more TextMetrics attributes that
we have implemented behind additional (default-disabled) prefs; I'm not
proposing to ship these at this stage as there are still some
outstanding concerns around interoperability. Shipping the
fontBoundingBox* attributes will match what Chrome currently exposes on
their release channel, and AFAICT is the most-requested of these.

JK


- - -
Original "Intent to Prototype" email, from 2020-01-17 (as I can't find
it in the Google Groups archive to link to...)
- - -

The TextMetrics interface represents the dimensions of a piece of text
in the canvas, as created by the CanvasRenderingContext2D.measureText()
method.

Currently, Gecko only supports the .width attribute, but authors would
also like to determine the actual dimensions that the rendered text
would have in both x- and y-directions, as well as overall font metrics
to assist with line spacing, etc.

Safari supports the full set of TextMetrics attributes as currently
documented in the HTML spec. Chrome has recently shipped support for the
actualBoundingBox attributes; it has support for additional font-metrics
attributes behind the "experimental web features" flag.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1102584

Standard: https://html.spec.whatwg.org/multipage/canvas.html#textmetrics

Note that there are a number of open issues regarding the spec (see
https://github.com/w3ctag/design-reviews/issues/302#issuecomment-427996200).
For this reason, I propose to implement these attributes behind several
prefs, and initially enable only the actualBoundingBox* attributes by
default (matching what Chrome has shipped); the others will be
preffed-off, but can be selectively enabled by authors who want to
experiment with them.

Testing: Some (limited) tests are in
web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.*

Platform coverage: All

Restricted to secure contexts: No. The existing TextMetrics interface is
not restricted, and other browsers support the extended attributes in
all contexts.

Target Release: 74

Preferences behind which this will be implemented:
dom.textMetrics.actualBoundingBox.enabled (default: true)
dom.textMetrics.baselines.enabled (default: false)
dom.textMetrics.emHeight.enabled (default: false)
dom.textMetrics.fontBoundingBox.enabled (default: false)

Ashley Gullen

unread,
Jun 19, 2023, 12:38:04 PM6/19/23
to Jonathan Kew, dev-pl...@mozilla.org
It'd be great to see support for this in Firefox but note that Chrome and Safari currently do not implement fontBoundingBox* attributes interoperably, as they return different values depending on the current textBaseline. See this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1183752
I think it comes down to a spec issue as something in the spec is not well defined enough. It would be great to see a push to get this implemented consistently across all major browsers.


--
You received this message because you are subscribed to the Google Groups "dev-pl...@mozilla.org" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dev-platform...@mozilla.org.
To view this discussion on the web visit https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/c54e4f87-3961-d076-4606-63aec9c4c4dd%40gmail.com.

Jonathan Kew

unread,
Jun 19, 2023, 1:19:20 PM6/19/23
to Ashley Gullen, dev-pl...@mozilla.org
On 19/06/2023 17:37, Ashley Gullen wrote:
> It'd be great to see support for this in Firefox but note that Chrome
> and Safari currently do not implement fontBoundingBox* attributes
> interoperably, as they return different values depending on the current
> textBaseline. See this issue:
> https://bugs.chromium.org/p/chromium/issues/detail?id=1183752
> <https://bugs.chromium.org/p/chromium/issues/detail?id=1183752>
> I think it comes down to a spec issue as something in the spec is not
> well defined enough. It would be great to see a push to get this
> implemented consistently across all major browsers.
>

You're right, there are discrepancies between how browsers deal with
font metrics; canvas textBaseline is certainly one place that shows up.
I think some spec clarifications are needed before real progress will
happen here.

This is why I've been hesitant to expose more of these attributes, but
with both Chrome and Safari supporting fontBoundingBox, enabling it in
Firefox as well seems like a useful step forward. It should be useful to
some authors, at least, even if results with non-default textBaseline
may be less reliable. (If nothing else, perhaps it'll stir interest in
solving the outstanding metrics-interoperability issues.)

jk
> https://github.com/w3ctag/design-reviews/issues/302#issuecomment-427996200 <https://github.com/w3ctag/design-reviews/issues/302#issuecomment-427996200>).
> For this reason, I propose to implement these attributes behind several
> prefs, and initially enable only the actualBoundingBox* attributes by
> default (matching what Chrome has shipped); the others will be
> preffed-off, but can be selectively enabled by authors who want to
> experiment with them.
>
> Testing: Some (limited) tests are in
> web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.*
>
> Platform coverage: All
>
> Restricted to secure contexts: No. The existing TextMetrics
> interface is
> not restricted, and other browsers support the extended attributes in
> all contexts.
>
> Target Release: 74
>
> Preferences behind which this will be implemented:
>    dom.textMetrics.actualBoundingBox.enabled  (default: true)
>    dom.textMetrics.baselines.enabled          (default: false)
>    dom.textMetrics.emHeight.enabled           (default: false)
>    dom.textMetrics.fontBoundingBox.enabled    (default: false)
>
> --
> You received this message because you are subscribed to the Google
> Groups "dev-pl...@mozilla.org <mailto:dev-pl...@mozilla.org>"
> group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to dev-platform...@mozilla.org
> <mailto:dev-platform%2Bunsu...@mozilla.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/c54e4f87-3961-d076-4606-63aec9c4c4dd%40gmail.com <https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/c54e4f87-3961-d076-4606-63aec9c4c4dd%40gmail.com>.
>

Reply all
Reply to author
Forward
0 new messages