Slash in right to left latin text - html

Question

I wanted to ellipse a latin text from lefthand side (It represents a path). Something like the following figure:
To making this I found the following css:
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
}
.red {
color: red;
}
and I use it like this:
<div class="ellipsis-left">
/Pollution/<span style="red">Air Pollution/</span>
</div>
But the problem is that slashes which separate parts of the path are not placed in the right position. In the following figure, the red slash must be shown at the end of the path. Is there any solution to solve this problem?
I want to reach something like this:
At the moment, as a solution I color the first slash with red as it places at the end of the string! Something like this:
<div class="ellipsis-left">
<span style="red">/</span>Pollution/<span style="red">Air Pollution</span>/
</div>
But this is not a good solution!

Answer 1

I had a similar problem and worked around it by stripping of the leading slashes in my paths. Slashes in the middle don't seem to be an issue.

Answer 2

Bit of a tricky situation you got there. The / aren’t normal letters, but rather fall under punctuation - and so they get treated differently by the LTR algorithm.
Tried different things - making the spans rtl again did not work, inserting the / as pseudo elements and trying to format them differently didn’t get me anywhere, and making the spans inline-block breaks the whole LTR thing of the parent …
Only thing I could come up with that seems to work, is to position those / absolutely. So they need wrapping into an element of their own, and the first path segment also needs to be wrapped in a span. You might wand to fiddle with the padding a bit, to get the spacing exactly right.
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
width:9em;
}
.ellipsis-left > span {
direction: ltr;
position: relative;
padding-right: .375em;
}
.ellipsis-left > span span {
position:absolute;
right: 0;
}
.red {
color: red;
}
<div class="ellipsis-left">
<span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
But wait, you want a leading slash in front of the whole thing as well … and that’s where it breaks again. Trying to add that into the “Pollution” span as well, I had it end up at the very end again, and putting it into its own “empty” path segment (<span><span>/</span></span>) did not work either. It does work, if that element contains an actual letter - but then I am having trouble “hiding” that again (plus, semantically really ugly) - wrapping the latter into another additional element, so that I could apply inline-block and a zero width to hide it, broke the whole thing again.
Using visibility to hide that extra letter worked, and a bit of negative margin helps hide the offset that leaves:
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
width:9em;
}
.ellipsis-left:nth-child(2) {
width: auto;
}
.ellipsis-left > span {
direction: ltr;
position: relative;
padding-right: .375em;
}
.ellipsis-left > span span {
position:absolute;
right: 0;
}
.ellipsis-left > span:first-child {
visibility:hidden;
margin-left: -.5em;
}
.ellipsis-left > span:first-child span {
visibility:visible;
}
.red {
color: red;
}
<div class="ellipsis-left">
<span>X<span>/</span></span><span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
<div class="ellipsis-left">
<span>X<span>/</span></span><span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
As I said, semantically rather ugly … but the best I managed to come up with so far.
Maybe someone can think of an alternative approach that works, something with flexbox and its order property or something.