Bug 164999 - text-overflow: ellipsis truncates the text incorrectly in RTL
Summary: text-overflow: ellipsis truncates the text incorrectly in RTL
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-11-20 12:10 PST by Drew Gross
Modified: 2022-11-09 10:47 PST (History)
11 users (show)

See Also:


Attachments
Repro of bug (750 bytes, text/html)
2016-11-20 12:10 PST, Drew Gross
no flags Details
another repro (312 bytes, text/html)
2018-02-02 22:53 PST, Tim Horton
no flags Details
Truncation with RTL on Chrome (77.81 KB, image/png)
2020-12-09 04:29 PST, prashant.chitti
no flags Details
Truncation with RTL on Firefox (78.18 KB, image/png)
2020-12-09 04:29 PST, prashant.chitti
no flags Details
Truncation with RTL on Safari (407.25 KB, image/png)
2020-12-09 04:30 PST, prashant.chitti
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Drew Gross 2016-11-20 12:10:57 PST
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"
Comment 1 Radar WebKit Bug Importer 2016-12-01 12:38:02 PST
<rdar://problem/29464657>
Comment 2 Tim Horton 2018-02-02 22:53:49 PST
Created attachment 333028 [details]
another repro
Comment 3 mitz 2018-02-02 22:55:35 PST
(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.
Comment 4 Tim Horton 2018-02-02 22:59:10 PST
Possible the comment in InlineTextBox::paint indicates that this is intentional?
Comment 5 Giuseppe Caruso 2018-07-18 02:20:23 PDT
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).
Comment 6 Michael Coker 2020-06-10 15:56:02 PDT
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.
Comment 7 prashant.chitti 2020-12-09 04:27:50 PST
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?
Comment 8 prashant.chitti 2020-12-09 04:29:16 PST
Created attachment 415741 [details]
Truncation with RTL on Chrome
Comment 9 prashant.chitti 2020-12-09 04:29:38 PST
Created attachment 415742 [details]
Truncation with RTL on Firefox
Comment 10 prashant.chitti 2020-12-09 04:30:11 PST
Created attachment 415743 [details]
Truncation with RTL on Safari
Comment 11 prashant.chitti 2020-12-09 23:03:01 PST
Here is a link to the w3c issue which defines the expected behavior

https://github.com/w3c/csswg-drafts/issues/2125
Comment 12 Karl Dubost 2022-06-02 23:51:16 PDT
This affects https://bugs.webkit.org/show_bug.cgi?id=168793
Comment 13 Ahmad Saleem 2022-11-09 10:47:18 PST
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();
+        }
Comment 14 Ahmad Saleem 2022-11-09 10:47:36 PST
(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