NEW 285149
line-clamp in direction: rtl is hiding text.
https://bugs.webkit.org/show_bug.cgi?id=285149
Summary line-clamp in direction: rtl is hiding text.
Karl Dubost
Reported 2024-12-25 06:41:56 PST
1. Go to https://codepen.io/webcompat/pen/pvzwGNm 2. Look at the 4th example. The words "rest of" have disappeared covered by the block-ellipsis characters. <h4><code>line-clamp: 3 '…(next)'</code></h4><div style="width:300px;line-clamp: 3 '…(next)'">If you are lucky enough to have lived in Paris as a young man, then wherever you go for the rest of your life, it stays with you, for Paris is a moveable feast.</div> <h4><code>max-lines:3;block-ellipsis:'…(next)'</code></h4> <div style="width:300px;max-lines:3;block-ellipsis:'…(next)'">If you are lucky enough to have lived in Paris as a young man, then wherever you go for the rest of your life, it stays with you, for Paris is a moveable feast.</div> <h4><code>max-lines:3;block-ellipsis:'…(next)';continue:discard</code></h4> <div style="width:300px;block-ellipsis:'…(next)';continue:discard;max-lines:3;">If you are lucky enough to have lived in Paris as a young man, then wherever you go for the rest of your life, it stays with you, for Paris is a moveable feast.</div> <h4><code>max-lines:3;block-ellipsis:'…(next)';continue:discard;direction:rtl</code></h4> <div style="width:300px;block-ellipsis:'…(next)';continue:discard;max-lines:3;direction:rtl">If you are lucky enough to have lived in Paris as a young man, then wherever you go for the rest of your life, it stays with you, for Paris is a moveable feast.</div> Same thing is happening with simple "line-clamp"
Attachments
WebKit ToT (Reference) (387.03 KB, image/png)
2024-12-25 14:41 PST, Ahmad Saleem
no flags
rendering in safari, firefox, chrome (392.35 KB, image/png)
2025-01-05 21:09 PST, Karl Dubost
no flags
rendering in safari, firefox, chrome (Japanese) (438.87 KB, image/png)
2025-01-05 21:25 PST, Karl Dubost
no flags
Ahmad Saleem
Comment 1 2024-12-25 14:41:29 PST
Created attachment 473671 [details] WebKit ToT (Reference)
Radar WebKit Bug Importer
Comment 2 2025-01-01 06:42:14 PST
alan
Comment 3 2025-01-05 20:03:59 PST
Comment on attachment 473671 [details] WebKit ToT (Reference) obsoleting this screenshot as it looks like it taken with the feature disabled (it is not on by default in shipping Safari)
alan
Comment 4 2025-01-05 20:05:04 PST
Karl, could you provide the expected rendering with the rtl content, please?
Karl Dubost
Comment 5 2025-01-05 21:09:52 PST
Created attachment 473789 [details] rendering in safari, firefox, chrome As rendered in Safari Technology Preview 209 20621.1.6 Firefox Nightly 135.0a1 13524.12.25 Google Chrome Canary 133.0.6940.0 6940.0
Karl Dubost
Comment 6 2025-01-05 21:11:52 PST
Should the next be after the ellipsis and have a space in between the last RTL word and the ellipsis, like we see on LTR.
Karl Dubost
Comment 7 2025-01-05 21:25:15 PST
Created attachment 473790 [details] rendering in safari, firefox, chrome (Japanese) Houla this is even worse in Japanese when using vertical writing. https://codepen.io/webcompat/full/emOyNEP
alan
Comment 8 2025-01-09 16:33:44 PST
those writing-modes are not supported yet (and they never were in the non-standards version of line-clamp)
Note You need to log in before you can comment on or make changes to this bug.