WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
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
Patch
(11.78 KB, patch)
2023-04-25 21:38 PDT
,
zalan
no flags
Details
Formatted Diff
Diff
Patch
(17.27 KB, patch)
2023-04-26 07:09 PDT
,
zalan
no flags
Details
Formatted Diff
Diff
[fast-cq]Patch
(17.31 KB, patch)
2023-04-26 08:29 PDT
,
zalan
no flags
Details
Formatted Diff
Diff
Show Obsolete
(2)
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2016-12-01 12:38:02 PST
<
rdar://problem/29464657
>
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
This affects
https://bugs.webkit.org/show_bug.cgi?id=168793
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
Created
attachment 466084
[details]
Patch
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
Created
attachment 466095
[details]
Patch
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.
Top of Page
Format For Printing
XML
Clone This Bug