RESOLVED FIXED 164999
text-overflow: ellipsis truncates the text incorrectly in RTL
https://bugs.webkit.org/show_bug.cgi?id=164999
Summary text-overflow: ellipsis truncates the text incorrectly in RTL
Drew Gross
Reported 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"
Attachments
Repro of bug (750 bytes, text/html)
2016-11-20 12:10 PST, Drew Gross
no flags
another repro (312 bytes, text/html)
2018-02-02 22:53 PST, Tim Horton
no flags
Truncation with RTL on Chrome (77.81 KB, image/png)
2020-12-09 04:29 PST, prashant.chitti
no flags
Truncation with RTL on Firefox (78.18 KB, image/png)
2020-12-09 04:29 PST, prashant.chitti
no flags
Truncation with RTL on Safari (407.25 KB, image/png)
2020-12-09 04:30 PST, prashant.chitti
no flags
Patch (11.78 KB, patch)
2023-04-25 21:38 PDT, zalan
no flags
Patch (17.27 KB, patch)
2023-04-26 07:09 PDT, zalan
no flags
[fast-cq]Patch (17.31 KB, patch)
2023-04-26 08:29 PDT, zalan
no flags
Radar WebKit Bug Importer
Comment 1 2016-12-01 12:38:02 PST
Tim Horton
Comment 2 2018-02-02 22:53:49 PST
Created attachment 333028 [details] another repro
mitz
Comment 3 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.
Tim Horton
Comment 4 2018-02-02 22:59:10 PST
Possible the comment in InlineTextBox::paint indicates that this is intentional?
Giuseppe Caruso
Comment 5 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).
Michael Coker
Comment 6 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.
prashant.chitti
Comment 7 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?
prashant.chitti
Comment 8 2020-12-09 04:29:16 PST
Created attachment 415741 [details] Truncation with RTL on Chrome
prashant.chitti
Comment 9 2020-12-09 04:29:38 PST
Created attachment 415742 [details] Truncation with RTL on Firefox
prashant.chitti
Comment 10 2020-12-09 04:30:11 PST
Created attachment 415743 [details] Truncation with RTL on Safari
prashant.chitti
Comment 11 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
Karl Dubost
Comment 12 2022-06-02 23:51:16 PDT
Ahmad Saleem
Comment 13 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(); + }
Ahmad Saleem
Comment 14 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
zalan
Comment 15 2023-04-25 21:38:37 PDT
Ahmad Saleem
Comment 16 2023-04-25 21:49:34 PDT
(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.
zalan
Comment 17 2023-04-26 07:09:39 PDT
zalan
Comment 18 2023-04-26 08:29:35 PDT
Created attachment 466098 [details] [fast-cq]Patch
zalan
Comment 19 2023-04-26 08:36:42 PDT
(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
Comment 20 2023-04-26 10:04:57 PDT
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].
zalan
Comment 21 2023-04-27 13:22:56 PDT
(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. :|
Note You need to log in before you can comment on or make changes to this bug.