Bug 231668 - CJK ligatures are totally broken because computePreferredLogicalWidths() is totally busted
Summary: CJK ligatures are totally broken because computePreferredLogicalWidths() is t...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 15
Hardware: Mac (Intel) Other
: P2 Normal
Assignee: Myles C. Maxfield
Keywords: InRadar
Depends on:
Reported: 2021-10-13 05:17 PDT by Toto Minai
Modified: 2021-10-25 22:51 PDT (History)
2 users (show)

See Also:

An example in Safari, Firefox and Chrome (373.89 KB, image/png)
2021-10-13 05:17 PDT, Toto Minai
no flags Details
Test html file (346 bytes, text/html)
2021-10-25 18:37 PDT, Myles C. Maxfield
no flags Details
macOS Monterey (412.15 KB, image/png)
2021-10-25 18:38 PDT, Myles C. Maxfield
no flags Details
Repro (393 bytes, text/html)
2021-10-25 20:01 PDT, Myles C. Maxfield
no flags Details
Reduction (213 bytes, text/html)
2021-10-25 20:07 PDT, Myles C. Maxfield
no flags Details
Enable `dlig` in parent scope vs. in specific <span> (28.41 KB, image/png)
2021-10-25 22:08 PDT, Toto Minai
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Toto Minai 2021-10-13 05:17:11 PDT
Created attachment 441059 [details]
An example in Safari, Firefox and Chrome

Source code, in CSS:

.dlig {
    font-feature-settings: "dlig";

In <body>:

<p>中心気圧九四〇<span class="dlig">メリ</span>バール・瞬間最大風速五〇<span class="dlig">メートル</span>・暴風雨半径二五<span class="dlig">〇キロ</span>……</p>

<span> won't shrink for ligatures inside, which left extra spacing after.
Comment 1 Myles C. Maxfield 2021-10-13 07:25:29 PDT
I believe this is https://bugs.webkit.org/show_bug.cgi?id=6148.
Comment 2 Radar WebKit Bug Importer 2021-10-20 05:18:18 PDT
Comment 3 Myles C. Maxfield 2021-10-25 18:27:16 PDT

*** This bug has been marked as a duplicate of bug 6148 ***
Comment 4 Myles C. Maxfield 2021-10-25 18:34:18 PDT
I no longer think this is https://bugs.webkit.org/show_bug.cgi?id=6148
Comment 5 Myles C. Maxfield 2021-10-25 18:37:28 PDT
Created attachment 442443 [details]
Test html file
Comment 6 Myles C. Maxfield 2021-10-25 18:38:41 PDT
Created attachment 442444 [details]
macOS Monterey

I'm not seeing the bug on macOS Monterey using the attached .html file. Do you think you could tell me if the attached .html file shows the bug on your machine? If not, do you think you could provide a test file that shows the bug?

Comment 7 Toto Minai 2021-10-25 18:50:16 PDT
I also don't think the bug's the same as https://bugs.webkit.org/show_bug.cgi?id=6148, as I might not try to style anything.

https://bug-231668-attachments.webkit.org/attachment.cgi?id=442443 is not using `dlig` feature because the default font is not supported. `font-family` should be set to 'Hiragino Mincho ProN', etc. to render the ligatures.
Comment 8 Myles C. Maxfield 2021-10-25 20:01:11 PDT
Created attachment 442457 [details]
Comment 9 Myles C. Maxfield 2021-10-25 20:01:18 PDT
I can reproduce it now.
Comment 10 Myles C. Maxfield 2021-10-25 20:07:06 PDT
Created attachment 442458 [details]
Comment 11 Myles C. Maxfield 2021-10-25 20:09:04 PDT
We're not using LFC.
Comment 12 Myles C. Maxfield 2021-10-25 20:17:59 PDT
Wait a minute, we are using LFC.
Comment 13 Myles C. Maxfield 2021-10-25 20:19:21 PDT
Oh, no we're not. We're just using the iterators, which are in layout/integration. The iterators point to a LegacyInlineBox.
Comment 14 Myles C. Maxfield 2021-10-25 20:29:06 PDT
RenderText::width is using the result of computePreferredLogicalWidths() to determine the width.
Comment 15 Myles C. Maxfield 2021-10-25 20:29:45 PDT
Comment 16 Myles C. Maxfield 2021-10-25 20:36:08 PDT
Because the text is Japanese, there are line breaking opportunities around each character, so computePreferredLogicalWidths() is measuring each character individually - ignoring the fact that there is a ligatures that crosses 4 characters.
Comment 17 Toto Minai 2021-10-25 22:08:30 PDT
Created attachment 442463 [details]
Enable `dlig` in parent scope vs. in specific <span>

<p><span class="dlig">株式会社</span>カブシキ</p> <!-- Error -->
<p class="dlig">株式会社カブシキ</p> <!-- Worked, see attachment -->

Enabling `dlig` in parent scope works just fine. But sometimes you just want certain characters to have the effect.
Comment 18 Myles C. Maxfield 2021-10-25 22:51:30 PDT
This should be fixed by IFC. We'll stop calling computePreferredLogicalWidths().