2010717 - Implement alignment-baseline: alphabetic/ideographic/central/mathematical/hanging

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, enhancement)

Description

[Sajid Anwar [:sajidanwar]]

The alignment-baseline: alphabetic keyword is new in css-inline-3 compared to vertical-align in CSS 2.1.

Comment 1

[Sajid Anwar [:sajidanwar]]

Updating this to be a single bug for implementation of alphabetic/ideographic/central/mathematical/hanging since their implementations are identical, other than the font baseline metric they're pulling from. The other existing bugs will be closed as duplicates of this one.

Comment 6

[Sajid Anwar [:sajidanwar]]

Attachment: Bug 2010717 - Implement alignment-baseline: alphabetic/ideographic/central/mathematical/hanging. r=#layout-reviewers

Comment 7

[Sebastian Zartner [:sebo]]

This change seems to get implemented without being guarded behind a pref. Therefore, it should be documented on the right places once the patch for it lands.

Also, it seems introduction of baseline-shift and the related "shorthandification" of vertical-align got missed in the general 149 release notes. So I thought it's worth mentioning it now.

[Why is this notable]: New keywords for CSS property
[Affects Firefox for Android]: yes
[Suggested wording]: The alignment-baseline property got introduced in Firefox 149. Now it got some new keywords alphabetic, ideographic, central, mathematical, and hanging, extending the variaty of baselines to choose for alignment.
[Links (documentation, blog post, etc)]:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/149#css

Comment 8

[Sajid Anwar [:sajidanwar]]

Thanks Sebastian for providing that! Is that format sourced from a template somewhere?

Comment 9

[Sebastian Zartner [:sebo]]

Hi Sajid! The template for the comment is automatically added when you select the question mark from the relnote-firefox field (when editing the meta data of a bug).

Sebastian

Comment 10

[Sajid Anwar [:sajidanwar]]

Ah got it, good to know, thanks!

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/482c9f881b6a
https://hg.mozilla.org/integration/autoland/rev/c1fe9407a011
Implement alignment-baseline: alphabetic/ideographic/central/mathematical/hanging. r=layout-reviewers,firefox-style-system-reviewers,dshin

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e2f7575a37b1
https://hg.mozilla.org/integration/autoland/rev/89e720089ba3
Revert "Bug 2010717, Bug 2029869 - Implement alignment-baseline: alphabetic/ideographic/central/mathematical/hanging. r=layout-reviewers,firefox-style-system-reviewers,dshin" for causing wr and reftest failures

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/59796 for changes under testing/web-platform/tests

Comment 14

[Silaghi Andreea]

Backed out for causing wr failures
Backout Link
Push with failures
Failure Log's
Failure Log's
Failure Log's
Failure Log's
Failure Log TWv
Failure lines:
TEST-UNEXPECTED-FAIL | /css/css-writing-modes/text-combine-upright-gen-con-001.html | Testing http://web-platform.test:8000/css/css-writing-modes/text-combine-upright-gen-con-001.html == http://web-platform.test:8000/css/css-writing-modes/text-combine-upright-gen-con-001-ref.html
TEST-UNEXPECTED-PASS | /css/css-values/ch-unit-012.html | Testing http://web-platform.test:8000/css/css-values/ch-unit-012.html == http://web-platform.test:8000/css/css-values/reference/ch-unit-009-ref.html

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 16

[Sajid Anwar [:sajidanwar]]

Published new patches to address these test failures:

• https://phabricator.services.mozilla.com/D292135
• https://phabricator.services.mozilla.com/D292136

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a3e1d680bbbb
https://hg.mozilla.org/integration/autoland/rev/935e54490a48
Implement alignment-baseline: alphabetic/ideographic/central/mathematical/hanging. r=layout-reviewers,firefox-style-system-reviewers,dshin

Comment 18

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/935e54490a48

Comment 19

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 20

[Pascal Chevrel (relman team) -> :pascalc]

Note added to our 153 nightly release notes in the Web Platform section with this wording:

The alignment-baseline property got introduced in Firefox 149. Now it got some new keywords alphabetic, ideographic, central, mathematical, and hanging, extending the variety of baselines to choose for alignment.

I am keeping the relnote-firefox? flag set until we include this note in our final 153 release notes, thanks.

Comment 21

[Sajid Anwar [:sajidanwar]]

Thanks Pascal! I have a suggested update to the wording to clarify its relationship to vertical-align:

The vertical-align property was converted into a shorthand for baseline-source, alignment-baseline, and baseline-shift in Firefox 149. Now, alignment-baseline supports the new keywords alphabetic, ideographic, central, mathematical, and hanging, extending the variety of baselines to choose for alignment.

Sebastian, what do you think of the above?

Comment 22

[Sebastian Zartner [:sebo]]

Sounds good to me! So authors get to know about the bigger picture here, as well.

Sebastian

Comment 23

[Pascal Chevrel (relman team) -> :pascalc]

Release note updated with comment #21 wording.

Comment 24

[Pascal Chevrel (relman team) -> :pascalc]

I am keeping the relnote-firefox? flag set until we include this note in our final 153 release notes, thanks.

(Change of internal process)

Comment 25

[Dave Letorey]

Attachment: alignment-baseline example safari 26.5 screenshot

Comment 26

[Dave Letorey]

Attachment: alignment-baseline example chrome 150 screenshot

Comment 27

[Dave Letorey]

Attachment: alignment-baseline example Firefox Nightly 154 screenshot

Comment 28

[Dave Letorey]

Looking at the example on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/alignment-baseline#example

this does not match what the other Browsers are doing. See attached screenshots.

I could not find an associated flag for this either

Comment 29

[Sajid Anwar [:sajidanwar]]

This is covered by Bug 2010721 which is still open (and good reminder for me to get back to that). The example on MDN uses SVG which has only historically supported dominant-baseline in Firefox leading to the mismatch.

Comment 30

[Dave Letorey]

I have tried to get this to work with:

• inline-level boxes e.g. <span> - https://codepen.io/CodeRedDigital/pen/RNKyJmB?editors=1100
• Table cells e.g. <td> - https://codepen.io/CodeRedDigital/pen/VYPxBMV?editors=1100
• flex items - https://codepen.io/CodeRedDigital/pen/EaZLpzp
• <textPath> - https://codepen.io/CodeRedDigital/pen/wBgjxma?editors=1100

I can not seem to make this work in any way, only the SVG <textPath> is working

Comment 31

[Sajid Anwar [:sajidanwar]]

The specification says that aligning inline-level boxes aligns the alignment-baseline with the same baseline choice on the parent. So in your first sample, since the spans have the same font as their parents, their positions don't change since the baseline values are identical. If you did something like increase the font size of the spans or change the font family, you should observe the alignment differences.

Table cells are a bit peculiar because it's essentially a legacy mapping for the original vertical-align longhand. Previously, vertical-align: top/bottom/middle would change cell alignment; since it was converted to a shorthand, only the corresponding longhand values baseline-shift: top/bottom and alignment-baseline: middle have any effect on table cells. In your sample, if you add more lines to the cells in the first column, you should observe the middle cell with the modified alignment.

Flex items indeed have no behavior change with my implementation. I'll need to file some follow ups to determine what the right behavior here is. I actually don't see an effect on the <textPath> one right now but I'll make sure to cover it in the SVG implementation bug as I wasn't familiar with this element.

Comment 32

[Dave Letorey]

Thank you for this, the <textPath> example works in Safari & Chrome.

I have updated the <span> example - https://codepen.io/CodeRedDigital/pen/RNKyJmB?editors=1100

Comment 33

[Sajid Anwar [:sajidanwar]]

Ah, gotcha, that makes sense. Oh, an additional complication for the MDN docs: Chrome and Safari are listed as supporting alignment-baseline and many of the keyword values (and same for baseline-shift). But they only actually support these properties for SVG elements, as they're SVG presentation attributes that can be set with CSS. They don't support these properties for HTML elements, and Firefox is the first browser that implemented them (and did the conversion of vertical-align into a shorthand). The WPT suites show this divergence on the HTML side: https://wpt.fyi/css/css-inline/alignment-baseline and https://wpt.fyi/css/css-inline/baseline-shift

(Leaving the needinfo to remind myself to file bugs for the flex part of the specification)

Comment 34

[Sajid Anwar [:sajidanwar]]

Filed Bug 2062121 about alignment-baseline for flex items, and about the distinction between the alignment baseline and baseline sets more generally.