Bug 164999 – text-overflow: ellipsis truncates the text incorrectly in RTL

• Component: CSS
• Status: RESOLVED FIXED

[Drew Gross]

Created attachment 295280 [details]
Repro of bug

1) Open attached file
2) Shrink browser window to minimum size
3) Left div should contain "...ttonWithAReallyLongName", instead it contains "...ButtonWithAReallyLongNa"

[Radar WebKit Bug Importer]

<rdar://problem/29464657>

[Tim Horton]

Created attachment 333028 [details]
another repro

(In reply to Drew Gross from comment #0)
> Created attachment 295280 [details]
> Repro of bug
> 
> 1) Open attached file
> 2) Shrink browser window to minimum size
> 3) Left div should contain "...ttonWithAReallyLongName", instead it contains
> "...ButtonWithAReallyLongNa"

I don’t understand why that is the expected result, or how it generalizes to bidirectional text or how it may generalize to multiline text.

[Tim Horton]

Possible the comment in InlineTextBox::paint indicates that this is intentional?

[Giuseppe Caruso]

I am having the exact same issue on Mobile Safari (I didn't check it out on Safari on Desktop).

You can check the example pen I created here:

https://codepen.io/carusog/pen/MBeeZM

This kind of "workaround" is commonly used on the web to show latest portion of a string (normally IDs or numbers) whose most pertinent values are at the end of the string (imagine epoch time like numbers).

[Michael Coker]

Also seeing this in trying to produce an element like Giuseppe Caruso described. Is this something that will be addressed? It behaves as expected in Chrome/Edge and Firefox.

Hi Team,

https://bugs.chromium.org/p/chromium/issues/detail?id=155836

Above is the reference to a similar bug, which was present in Chromium and was fixed. It referred to a fiddle - http://jsfiddle.net/hd55T/1/ which after the fix works as expected in Chrome and Firefox. Basically it sums up to say, when using `direction: rtl` or `dir= "rtl"`, truncation should happen from the left side and ellipsis should appear on the left. Currently in Safari the ellipsis appear on left, but truncation still happens from right.

I have attached screenshots of the same for all three browsers, which will give you a clearer picture as to what is going on. Can you please confirm if this is the expected behavior? If not, is it going to be fixed in upcoming versions?

Created attachment 415741 [details]
Truncation with RTL on Chrome

Created attachment 415742 [details]
Truncation with RTL on Firefox

Created attachment 415743 [details]
Truncation with RTL on Safari

Here is a link to the w3c issue which defines the expected behavior

https://github.com/w3c/csswg-drafts/issues/2125

[Karl Dubost]

This affects https://bugs.webkit.org/show_bug.cgi?id=168793

[Ahmad Saleem]

Blink Commit - 

____

Remove this:

https://github.com/WebKit/WebKit/blob/762de66f4784b558929d769b76e810175347f9b4/Source/WebCore/rendering/TextBoxPainter.cpp#L741

Fix this:

https://github.com/WebKit/WebKit/blob/7fb461c6b698958bae8581ca2a7817f6f4d3772c/Source/WebCore/rendering/LegacyInlineTextBox.cpp#L265

https://github.com/WebKit/WebKit/blob/7fb461c6b698958bae8581ca2a7817f6f4d3772c/Source/WebCore/rendering/LegacyInlineTextBox.cpp#L282

Don't know where to add this:

+        // Where the text and its flow have opposite directions then our offset into the text given by |truncation| is at
+        // the start of the part that will be visible.
+        if (m_inlineTextBox.truncation() != cNoTruncation && m_inlineTextBox.getLineLayoutItem().containingBlock().style()->isLeftToRightDirection() != m_inlineTextBox.isLeftToRightDirection()) {
+            startOffset = m_inlineTextBox.truncation();
+            endOffset = textRun.length();
+        }

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #13)
> Blink Commit - 
> 
> ____
> 
> Remove this:
> 
> https://github.com/WebKit/WebKit/blob/
> 762de66f4784b558929d769b76e810175347f9b4/Source/WebCore/rendering/
> TextBoxPainter.cpp#L741
> 
> Fix this:
> 
> https://github.com/WebKit/WebKit/blob/
> 7fb461c6b698958bae8581ca2a7817f6f4d3772c/Source/WebCore/rendering/
> LegacyInlineTextBox.cpp#L265
> 
> https://github.com/WebKit/WebKit/blob/
> 7fb461c6b698958bae8581ca2a7817f6f4d3772c/Source/WebCore/rendering/
> LegacyInlineTextBox.cpp#L282
> 
> Don't know where to add this:
> 
> +        // Where the text and its flow have opposite directions then our
> offset into the text given by |truncation| is at
> +        // the start of the part that will be visible.
> +        if (m_inlineTextBox.truncation() != cNoTruncation &&
> m_inlineTextBox.getLineLayoutItem().containingBlock().style()-
> >isLeftToRightDirection() != m_inlineTextBox.isLeftToRightDirection()) {
> +            startOffset = m_inlineTextBox.truncation();
> +            endOffset = textRun.length();
> +        }

https://chromium.googlesource.com/chromium/src.git/+/e168de8aa7dd678277ca1e8df6cc8fe6b418acdf

[alan]

Created attachment 466084 [details]
Patch

[Ahmad Saleem]

(In reply to Karl Dubost from comment #12)
> This affects https://bugs.webkit.org/show_bug.cgi?id=168793

@Alan - your patch might fix this as well as mentioned by Karl.

[alan]

Created attachment 466095 [details]
Patch

[alan]

Created attachment 466098 [details]
[fast-cq]Patch

[alan]

(In reply to Ahmad Saleem from comment #16)
> (In reply to Karl Dubost from comment #12)
> > This affects https://bugs.webkit.org/show_bug.cgi?id=168793
> 
> @Alan - your patch might fix this as well as mentioned by Karl.
Good point. Will confirm once this gets landed.

[EWS]

Committed 263418@main (3001e5dd0235): <https://commits.webkit.org/263418@main>

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

[alan]

(In reply to zalan from comment #19)
> (In reply to Ahmad Saleem from comment #16)
> > (In reply to Karl Dubost from comment #12)
> > > This affects https://bugs.webkit.org/show_bug.cgi?id=168793
> > 
> > @Alan - your patch might fix this as well as mentioned by Karl.
> Good point. Will confirm once this gets landed.
Can't make spade's web inspector use RTL. :|