TextBaseline does not reflect correctly per canvas spec
Reported by
timdr...@gmail.com,
Apr 27 2016
|
||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0 Example URL: https://bugzilla.mozilla.org/show_bug.cgi?id=737852 Steps to reproduce the problem: Please see https://bugzilla.mozilla.org/show_bug.cgi?id=737852 and https://bugzilla.mozilla.org/show_bug.cgi?id=737852#c20 The bug originally filed on Gecko was that Firefox reacts differently than other browsers, however in comment 20 :jfkthame argues that it is other browsers that are not following the spec. For the consistency of the Web platform, it is better if people agrees and fix the issues in browsers/spec accordingly. What is the expected behavior? What went wrong? The 'top' and 'bottom' textBaseline are not calculated with the height of the em square. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: Channel: n/a OS Version: OS X 10.11 Flash Version: Shockwave Flash 21.0 r0
,
Apr 29 2016
Related but not duplicate: issue 338908
,
Oct 3 2016
,
Mar 27 2017
I filed https://github.com/whatwg/html/issues/2470 to help sort this out. Input welcome, in particular with respect to web-platform-tests coverage and what this ideally does (and why).
,
Mar 30 2017
,
Mar 31 2017
By quickly reading the spec: https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-textbaseline Currently, our font engine does not expose what the spec requires, so while I don't know much about canvas, I suspect it's not easy to implement this. I'm working on some font metrics improvements for better text decoration. If the spec clarifies better, I can expose what canvas needs from our font engine.
,
Mar 31 2017
If you know what it should say that would help, I'm far from an expert on fonts. Part of the problem is probably that we don't have a low-level description of fonts that can be shared across CSS, SVG, and <canvas>. (Any other places?)
,
Mar 31 2017
Yeah, thanks Anne. I agree the problem is there, and wish not to spread the problem further in newer specs. One of the problems in the fonts world is that there's no single correct answer, so we need buy-ins from the feature area experts and vendors. I can join from Blink fonts if we can get other people. Let's see how things would go in the issue you filed. BTW, thank you for filing it and trying to get the attention for better interoperability in fonts.
,
Jun 19 2017
,
Jun 23 2017
Sorry for slow, but updates on my side FYI. Spec-wise, I don't think the current spec mandates the Gecko behavior. How to define font metrics specs in more interoperable way is undergoing, though slowly. I spoke in Blink team, and Edge/Gecko/WebKit very briefly, but we're not ready to put focus on it yet. Impl-wise, our font engine now provides: SimpleFontData::EmHeightAscent SimpleFontData::EmHeightDescent https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/fonts/SimpleFontData.h?type=cs&q=SimpleFontData::EmHeightAscent&l=123 These APIs (should) provide the metrics as described by the algorithm mentioned by jfkthame@: https://github.com/whatwg/html/issues/2470#issuecomment-291425136 and I'm hoping the font metrics API can standardize something based on this. https://drafts.css-houdini.org/font-metrics-api-1/#fontmetrics By "(should)" I mean, these APIs are not very heavily nor inteopreably tested, but we're shipping it in our text decoration code to gather more feedback. What to do with canvas spec and Blink canvas impl must involve canvas-specific issues and web-compat issues, I'd appreciate canvas experts to be on top of them.
,
Jun 25 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 26 2018
,
Jun 26 2018
,
Jul 10
,
Aug 30
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc commit e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc Author: David Quiroz Marin <davidqu@chromium.org> Date: Thu Aug 30 23:52:01 2018 Fix textBaseline alignment to match the spec for top/bottom/middle. Our current implementation of canvas textBaseline alignment for top middle and bottom doesn't do what the spec says it should, i.e. align with the EM square. https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-textbaseline This has been a bug on FF side for quite some years: https://bugzilla.mozilla.org/show_bug.cgi?id=737852 This change fixes this misalignment by using the EM square ascent and descent from SimpleFontData instead of the font's max ascent/descent. Also fixing the EM related metrics in canvas TextMetrics. Bug:607053,277215 Change-Id: Id6374e6fcd4e46fa989a7e23a80dc1f5bf961b94 Reviewed-on: https://chromium-review.googlesource.com/1194494 Commit-Queue: David Quiroz Marin <davidqu@chromium.org> Reviewed-by: Fernando Serboncini <fserb@chromium.org> Cr-Commit-Position: refs/heads/master@{#587855} [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.emHeights.html [rename] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/external/wpt/2dcontext/text-styles/2d.text.draw.baseline.alphabetic.html [delete] https://crrev.com/32c9ffb4811bc4e0bedfcd322b69aab5301352c1/third_party/WebKit/LayoutTests/external/wpt/2dcontext/text-styles/2d.text.draw.baseline.bottom-expected.txt [delete] https://crrev.com/32c9ffb4811bc4e0bedfcd322b69aab5301352c1/third_party/WebKit/LayoutTests/external/wpt/2dcontext/text-styles/2d.text.draw.baseline.middle-expected.txt [delete] https://crrev.com/32c9ffb4811bc4e0bedfcd322b69aab5301352c1/third_party/WebKit/LayoutTests/external/wpt/2dcontext/text-styles/2d.text.draw.baseline.top-expected.txt [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/external/wpt/2dcontext/tools/name2dir.yaml [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/external/wpt/2dcontext/tools/tests2dtext.yaml [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/fast/canvas-api/canvas-textMetrics-all.html [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/linux/fast/canvas/canvas-text-baseline-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/linux/fast/canvas/canvas-text-baseline-tiny-fonts-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/linux/fast/canvas/canvas-textMetrics-width-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu/fast/canvas/canvas-text-baseline-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu/fast/canvas/canvas-text-baseline-tiny-fonts-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu/fast/canvas/canvas-textMetrics-width-expected.png [add] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/mac-mac10.12/fast/canvas/canvas-textMetrics-width-expected.png [add] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/mac-mac10.12/virtual/gpu/fast/canvas/canvas-textMetrics-width-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/mac/fast/canvas/canvas-text-baseline-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/mac/fast/canvas/canvas-text-baseline-tiny-fonts-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/mac/fast/canvas/canvas-textMetrics-width-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/mac/virtual/gpu/fast/canvas/canvas-text-baseline-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/win/fast/canvas/canvas-text-baseline-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/win/fast/canvas/canvas-text-baseline-tiny-fonts-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/win/fast/canvas/canvas-textMetrics-width-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/WebKit/LayoutTests/platform/win/virtual/gpu/fast/canvas/canvas-text-baseline-expected.png [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/blink/renderer/core/html/canvas/text_metrics.cc [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/blink/renderer/core/html/canvas/text_metrics.h [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.cc [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.h [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d.cc [modify] https://crrev.com/e5d4d080a21f3ef9e6e3e30c8185f9d79f7c62dc/third_party/blink/renderer/modules/canvas/offscreencanvas2d/offscreen_canvas_rendering_context_2d.cc
,
Sep 4
This alignment discrepancy has been finally fixed. After this change top, bottom and middle textlAignment use the actual EM square to match the spec and what FireFox already does.
,
Dec 11
So, after this change -- how is one supposed to get a "maximum" bounding box of a text fragment drawn on canvas? TextMetrics does not return the spec's actualBoundingBoxDescent yet and textBaseline "top" can result in pixels being drawn above vertical shift passed to fillText. We need exact bounding box for text being drawn, I'm looking for a workaround but can't think of any. Pointers would be appreciated. |
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by yutak@chromium.org
, Apr 28 2016Status: Untriaged (was: Unconfirmed)