Bug 283765 – bdo element uses bidi-override instead of isolate-override

• Component: New Bugs
• Status: RESOLVED FIXED

[Devon Govett]

The HTML spec says that the bdo element should use `unicode-bidi: isolate-override` (https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering), but WebKit currently applies `unicode-bidi: bidi-override` in its user agent stylesheet.

This appears to have changed in the spec around 2013: https://github.com/whatwg/html/commit/d9223afc57f2029eb49f05a1ca555e8036493227#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d. Original spec issue: https://www.w3.org/Bugs/Public/show_bug.cgi?id=23260

Chrome and Firefox appear to match the current spec, whereas Safari does not.

This results in different rendering in some cases. See this example: https://codepen.io/devongovett/pen/XJrWxgz. In Chrome and Firefox, the order is different than in Safari.

[Devon Govett]

For more context, here's the closed Chrome issue from 2016: https://issues.chromium.org/issues/40373362 and Firefox issue https://bugzilla.mozilla.org/show_bug.cgi?id=1249497

[Ahmad Saleem]

Blink Commit - https://chromium.googlesource.com/chromium/src.git/+/549f017c96ad0e70bfce3b6a2248cbf747dde26c

^ Although this is something, we can merge but I think WebKit is actually doing better on WPT here - https://wpt.fyi/results/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters?label=master&label=experimental&aligned&q=isolation

Safari Technology Preview 208 is passing all, we might need to do just do HTMLElement.cpp change and then update `html.css` here: https://searchfox.org/wubkat/rev/795fdaece398b18bdefcd3954e0da2312ca92ee9/Source/WebCore/css/html.css#1433 aligned with web specification: https://html.spec.whatwg.org/#bidi-rendering

bdo, bdo[dir] { unicode-bidi: isolate-override; } 

rather than

bdo {
    unicode-bidi: bidi-override;
}

[Ahmad Saleem]

Actually HTMLElement.cpp change from Blink is already done. So it might be just updating `html.css` only.

[Devon Govett]

That seems right to me. Adding that css snippet into the codepen example above makes the Safari result match Chrome and Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/140662417>

[Ahmad Saleem]

Pull request: https://github.com/WebKit/WebKit/pull/37228

[EWS]

Committed 287175@main (1bf83c07887e): <https://commits.webkit.org/287175@main>

Reviewed commits have been landed. Closing PR #37228 and removing active labels.