Bug 208824 - WebKit uses Alphabetic Baseline when "-webkit-text-orientation" is "mixed" in Vertical Writing Mode
Summary: WebKit uses Alphabetic Baseline when "-webkit-text-orientation" is "mixed" in...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: frankhome61
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-03-09 10:59 PDT by frankhome61
Modified: 2020-03-25 10:03 PDT (History)
13 users (show)

See Also:


Attachments
Comparison between the correct text baseline alignment and incorrect baseline alignment (12.72 KB, image/png)
2020-03-09 10:59 PDT, frankhome61
no flags Details
Patch (190.58 KB, patch)
2020-03-09 13:25 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (192.48 KB, patch)
2020-03-09 14:15 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (189.79 KB, patch)
2020-03-09 15:46 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (190.74 KB, patch)
2020-03-09 17:17 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (190.81 KB, patch)
2020-03-09 18:16 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (362.95 KB, patch)
2020-03-11 14:11 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (362.16 KB, patch)
2020-03-12 15:09 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (362.25 KB, patch)
2020-03-12 15:14 PDT, frankhome61
mmaxfield: review+
Details | Formatted Diff | Diff
Patch (456.17 KB, patch)
2020-03-18 22:45 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (571.00 KB, patch)
2020-03-18 23:53 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (571.00 KB, patch)
2020-03-19 15:50 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (573.01 KB, patch)
2020-03-19 19:19 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (573.81 KB, patch)
2020-03-19 21:23 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (577.16 KB, patch)
2020-03-24 17:23 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (575.18 KB, patch)
2020-03-24 17:42 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (575.44 KB, patch)
2020-03-24 18:32 PDT, frankhome61
no flags Details | Formatted Diff | Diff
Patch (575.46 KB, patch)
2020-03-24 19:20 PDT, frankhome61
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch (575.40 KB, patch)
2020-03-25 09:35 PDT, frankhome61
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description frankhome61 2020-03-09 10:59:49 PDT
Created attachment 393055 [details]
Comparison between the correct text baseline alignment and incorrect baseline alignment

Webkit has the -webkit-text-orientation property, and ideally we want to have it match the spec mentioned in  https://drafts.csswg.org/css-writing-modes/#text-orientation and https://drafts.csswg.org/css-writing-modes/#text-baselines
Currently, the problem for -webkit-text-orientation is in the text baseline selection. According to the spec related to text baselines, "In vertical typographic mode, the central baseline is used as the dominant baseline when text-orientation is mixed or upright. Otherwise the alphabetic baseline is used." However in the case of Webkit, alphabetic baseline is used in both sideways and mixed, which is incorrect. 

One example is shown below: 

<style>
  div > div {
  font-size: 200%;
}
</style>
<div style="writing-mode: vertical-lr; -webkit-text-orientation: mixed">
  before
  <div style="display: inline-block; background: lime; height: 100px; width: 100px;">foobar</div>
  after
</div>

Current WebKit renders the text in a fashion shown in the attached image on the left, which is aligned on their alphabetic baseline, whereas according to the spec, they should be aligned using the ideographic baseline because we are in vertical writing mode and text orientation is mixed. The correct result is shown on the right.
Comment 1 Radar WebKit Bug Importer 2020-03-09 11:10:28 PDT
<rdar://problem/60231910>
Comment 2 frankhome61 2020-03-09 13:25:17 PDT
Created attachment 393065 [details]
Patch
Comment 3 frankhome61 2020-03-09 14:15:48 PDT
Created attachment 393072 [details]
Patch
Comment 4 frankhome61 2020-03-09 15:46:12 PDT
Created attachment 393087 [details]
Patch
Comment 5 Jon Lee 2020-03-09 16:43:31 PDT
Comment on attachment 393087 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393087&action=review

> Source/WebCore/ChangeLog:12
> +        (WebCore::InlineFlowBox::requiresIdeographicBaseline const):

Please explain the intent of the change. What weren't we matching correctly?
Comment 6 frankhome61 2020-03-09 17:17:36 PDT
Created attachment 393094 [details]
Patch
Comment 7 Jonathan Bedard 2020-03-09 17:25:58 PDT
Comment on attachment 393094 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393094&action=review

> Source/WebCore/ChangeLog:8
> +	According to the CSS documentation, in vertical writing mode, ideographic baseline 

Use check-webkit-style before uploading patches.

You have tabs here (should be 8 spaces)
Comment 8 frankhome61 2020-03-09 18:16:04 PDT
Created attachment 393106 [details]
Patch
Comment 9 Myles C. Maxfield 2020-03-09 19:37:50 PDT
Comment on attachment 393106 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393106&action=review

Not done reviewing yet, more coming later tonight.

> Source/WebCore/ChangeLog:3
> +        -webkit-text-orientation Behavior Doesn't Match the Spec

(Almost) every bug causes us to not match the spec. Please be more specific.

> Source/WebCore/ChangeLog:8
> +        According to the CSS documentation, in vertical writing mode, ideographic baseline 

s/CSS documentation/CSS writing-mode specification/

Please quote the full sentence from the spec, and link to it.
Comment 10 Myles C. Maxfield 2020-03-09 22:12:59 PDT
Comment on attachment 393106 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393106&action=review

It's a little scary to add text-orientation: sideways in so many of our vertical-writing-mode tests, because it's not the common case. I believe this patch significantly diminishes our test coverage of the default case of "text-orientation: mixed". I think we should consider updating more -expected.txt files, rather than modifying so many test files themselves.

r=me because I think this is the right direction and this patch is a progression, but I still think there's some work to do before landing.

> Source/WebCore/ChangeLog:9
> +        should be the dominant baseline of the text when text-orientation is "mixed" or "upright", 

"Dominant baseline" is a term-of-art. I don't think you intend to invoke it here. Better to refer to the specific wording used in the spec.

> Source/WebCore/ChangeLog:10
> +        and use alphabetic baseline when text-orientation property is "sideways". However in 

s/However in/However,/

> Source/WebCore/ChangeLog:13
> +        "upright", meaning it applies the same baseline for mixed and sideways text orientation
> +        therefore, a new clause is added to check if text-orientation is "mixed" 

s/orientation therefore/orientation. Therefore/

> Source/WebCore/ChangeLog:15
> +        (A "mixed" text orientaition is when in vertical writing mode, which isHorizontal() == false and 

s/orientaition/orientation/

> Source/WebCore/ChangeLog:16
> +        that font orientation in FontDescription == vertical and NonCJKGlyphOrientation == Mixed) 

I don't understand this sentence. Perhaps consider breaking it up into bullets?

> Source/WebCore/rendering/InlineFlowBox.cpp:456
>      if (lineStyle.fontDescription().nonCJKGlyphOrientation() == NonCJKGlyphOrientation::Upright
> +        || (lineStyle.fontDescription().orientation() == FontOrientation::Vertical
> +            && lineStyle.fontDescription().nonCJKGlyphOrientation() == NonCJKGlyphOrientation::Mixed)

I think this can be simplified. According to RenderStyle::fontAndGlyphOrientation(),

text-orientation | FontOrientation | NonCJKGlyphOrientation
-----------------+-----------------+-----------------------
mixed            | vertical        | mixed
upright          | vertical        | upright
sideways         | horizontal      | mixed

I believe this patch is trying to make InlineFlowBox::requiresIdeographicBaseline() select the "font-orientation: mixed" or "font-orientation: upright" case. This patch's logic:

NonCJKGlyphOrientation == upright // This selects the "text-orientation: mixed" case
|| (FontOrientation == vertical // This selects "text-orientation: mixed" or "text-orientation: upright"
    && NonCJKGlyphOrientation == Mixed) // Among "text-orientation: mixed" or "text-orientation: upright", this filters it down to just "text-orientation: upright"

I think you can get the exact same behavior if you replace all 3 lines with simply "lineStyle.fontDescription().orientation() == FontOrientation::Vertical".

> LayoutTests/imported/w3c/ChangeLog:9
> +        Imported new tests from web platform tests in css-writing-mode that webkit was failing previously
> +        all of which are testing text baseline alignment.

Did you have to modify any of the tests? Were there any tests which should now be passing after fixing this bug, but are still failing?

What percentage of css/css-writing-modes/ are we passing now?

> LayoutTests/editing/selection/vertical-rl-rtl-extend-line-backward-br.html:9
> +<div id="test" style="font-family: monospace; font-size: 20px; height: 15ex; -webkit-writing-mode: vertical-rl; -webkit-text-orientation: sideways; outline: none;" contenteditable>

The reasoning for the addition of these should be stated in the ChangeLog.

> LayoutTests/fast/inline-block/baseline-vertical-01.html:8
> +   -webkit-text-orientation: sideways;

The test name indicates that the test is trying to test baseline behavior. It appears that, by adding this property/value, you are changing what the test is trying to test. Therefore, you should do one of:

A) Indicate in the ChangeLog why it's okay to change the test to test something it wasn't originally trying to test
B) Indicate in the ChangeLog that this test isn't trying to test baseline behavior, so it's okay to make this change
C) Not make this change, and make a different one instead

> LayoutTests/fast/inline-block/baseline-vertical-02-expected.html:8
> -   text-orientation: sideways;
> +   -webkit-text-orientation: sideways;

Similar to above. This one is a little less obvious, because it appears the test is trying to test sideways orientation, but, in fact, it is actually testing mixed orientation.

Perhaps a better solution would be to make a copy of the test, so that we have one copy that tests mixed orientation and one copy that tests upright orientation. Unless we already have both versions?
Comment 11 frankhome61 2020-03-11 14:11:12 PDT
Created attachment 393286 [details]
Patch
Comment 12 Daniel Bates 2020-03-11 23:12:02 PDT
Comment on attachment 393286 [details]
Patch

This patch look good with respect to standard compliance. This patch will lead to a BAD user experience because:

1. This patch changes the behavior of a WebKit-prefixed CSS property, which was NEVER guaranteed to match the spec.
2. Because of (1) this change will break content, including Apple-produced iBooks and iTunes content that people may HAVE PAID FOR. This content will NEVER be updated. So, this change will negatively impact the customer experience.
3. Because of (1) this change will break content in third-party apps.

The optimal solution is to implement the unprefixed CSS property THEN do this fix for it leaving the prefixed one behaving like it is.
Comment 13 Daniel Bates 2020-03-11 23:17:59 PDT
Comment on attachment 393286 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393286&action=review

> Source/WebCore/WebCore.xcodeproj/xcshareddata/xcschemes/WebCore.xcscheme:45
> +         FilePath = "/Users/framiere/projects/build/Debug/MiniBrowser.app">

This change needs to be removed.

> LayoutTests/ChangeLog:10
> +        WebKit, which is 1) webkit cannot parse "text-orientation" since it's not supported yet, and 2) Webkit doesn't distinguish 

This is ok as-is. No change is needed. webkit, Webkit => WebKit <--- that,# the official marketing name.

Also, again ok as-is, no change needed, the lines in the changelog should be wrapped at 100 columns
Comment 14 Myles C. Maxfield 2020-03-12 10:44:47 PDT
(In reply to Daniel Bates from comment #12)
> Comment on attachment 393286 [details]
> Patch
> 
> This patch look good with respect to standard compliance. This patch will
> lead to a BAD user experience because:
> 
> 1. This patch changes the behavior of a WebKit-prefixed CSS property, which
> was NEVER guaranteed to match the spec.
> 2. Because of (1) this change will break content, including Apple-produced
> iBooks and iTunes content that people may HAVE PAID FOR. This content will
> NEVER be updated. So, this change will negatively impact the customer
> experience.
> 3. Because of (1) this change will break content in third-party apps.
> 
> The optimal solution is to implement the unprefixed CSS property THEN do
> this fix for it leaving the prefixed one behaving like it is.

Using the ideographic baseline in vertical text is a progression, not a regression. this patch improves typography for all those users who have paid for their books.

It's a calculated risk:
- The new behavior matches all the other browsers
- The new behavior matches the spec
- Typographically it's the right behavior
- As you can see from the updated layout test render tree dumps, the behavior change is generally quite small, moving text only a few in the block direction. The risk is not very high.

I don't think our policy should be to never try to improve anything that might possibly be used in paid content.
Comment 15 Myles C. Maxfield 2020-03-12 10:46:33 PDT
* only a few pixels
Comment 16 Myles C. Maxfield 2020-03-12 11:29:41 PDT
I shouldn’t say “might possibly be used.” Vertical writing mode is used in paid content.

The current behavior, before this patch, is to use the ideographic baseline if any of the used or primary fonts in the line have the VORG table or the vhea table, which is the common case for vertical writing mode content. So this behavior change is already more finely scoped than I mentioned in my previous comment.

I also don’t know if it’s really possible to only have the behavior change affect the unprefixed property, because the behavior change occurs when text-orientation is mixed, which is the initial value. If content sets vertical writing mode but doesn’t set any text-orientation, the computed style will be that both text-orientation and -webkit-text-orientation will be set to mixed. At this point, there’s no way to differentiate between the two cases.
Comment 17 frankhome61 2020-03-12 15:09:57 PDT
Created attachment 393418 [details]
Patch
Comment 18 frankhome61 2020-03-12 15:14:07 PDT
Created attachment 393420 [details]
Patch
Comment 19 Myles C. Maxfield 2020-03-12 18:17:26 PDT
Comment on attachment 393420 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393420&action=review

This looks good.

> LayoutTests/editing/selection/vertical-rl-rtl-extend-line-forward-br-mixed.html:9
> +<div id="test" style="font-family: monospace; font-size: 20px; height: 15ex; -webkit-writing-mode: vertical-rl; -webkit-text-orientation: mixed; outline: none;" contenteditable>

It's kind of surprising that you made a new test with the same content as the old test, and then modified the old test, instead of not modifying the old test and adding a new one with the modifications .... but I guess it's fine. Not really worth changing at this point, but just surprising.
Comment 20 Myles C. Maxfield 2020-03-18 15:28:53 PDT
Comment on attachment 393420 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=393420&action=review

> LayoutTests/editing/selection/vertical-rl-rtl-extend-line-backward-br-mixed-expected.txt:1
> +layer at (0,0) size 800x600

Render tree dumps are platform-dependent, so these should go in platform/mac instead.
Comment 21 frankhome61 2020-03-18 22:45:22 PDT
Created attachment 393951 [details]
Patch
Comment 22 frankhome61 2020-03-18 23:53:43 PDT
Created attachment 393954 [details]
Patch
Comment 23 frankhome61 2020-03-19 15:50:35 PDT
Created attachment 394040 [details]
Patch
Comment 24 frankhome61 2020-03-19 19:19:31 PDT
Created attachment 394056 [details]
Patch
Comment 25 frankhome61 2020-03-19 21:23:24 PDT
Created attachment 394065 [details]
Patch
Comment 26 frankhome61 2020-03-24 17:23:04 PDT
Created attachment 394448 [details]
Patch
Comment 27 frankhome61 2020-03-24 17:42:51 PDT
Created attachment 394451 [details]
Patch
Comment 28 frankhome61 2020-03-24 18:32:54 PDT
Created attachment 394454 [details]
Patch
Comment 29 frankhome61 2020-03-24 19:20:07 PDT
Created attachment 394460 [details]
Patch
Comment 30 EWS 2020-03-25 09:31:34 PDT
Attachment 394460 [details] does not apply
Comment 31 frankhome61 2020-03-25 09:35:34 PDT
Created attachment 394505 [details]
Patch
Comment 32 EWS 2020-03-25 10:03:56 PDT
Committed r258990: <https://trac.webkit.org/changeset/258990>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 394505 [details].