direction: rtl and text-align: left causes symbols to shift around
So I know this is definitely an edge case but I think my issue is very valid. I need to show a bunch of file paths in a list where the beginning of the path isn't so important so I want the overflow ellipsis to be at the beginning to show the file name in full
I tried to do this with setting
direction: rtl and text-align: left and it works great
However, for file paths start start with _, that underscore gets reordered and shifted to the very right. Is there a way I can keep the string intact?
If there's a better way to solve this issue without needing to get the client rect in javascript and modifying the string then that's also great! 🙏
https://codepen.io/stefanh-at/pen/GgpjpBp
20 Replies
https://developer.mozilla.org/en-US/docs/Web/CSS/direction <-- have you read the warning and checked if it works?
Yeah same behavior :/
I also tried
<pre> and all values of unicode-bidihave you tried to insert a direction character before and after the _?
Hmm some kind of 0 width character? Which do you have in mind?
Why did i have to prefix all my file paths with _...
🤣
it's an utf8 character that sets the direction of the text
also, have you tried to wrap the _ in a span with a direction?
I'll try a few more things tomorrow cause it's time to have a zzz but thanks for the suggestion! That might just work
lets hope it does
If it doesnt i'll have to just cut off sharp :/
or replace with a friendly character
Okay i found it! Random 10 year old stack overflow comment to the rescue! Adding
‎ to the beginning of the string works
So your hunch was right!it's the left to right direction mark character?
and you just added it to the beginning and everything works?
Yup
i thought you would have to add it to the _
but hey, it's good to know this works
https://stackoverflow.com/questions/27957443/strange-special-characters-issue-in-left-side-ellipsis
Well i added it in front of the_
In front of that whole string
is it updated in the codepen?
Nope sry
can you update it then?
Yeah i updated it now
yeah, i expected the character to be needed, but not there
it's good that it is at the beginning of the text
also, use the
dir attribute instead, as per mdn's recommendationsyou then can do something like this
