A solution to your old reverse-ellipsis CSS riddle

[jaseg]

Hey there,

I stumbled upon your old reverse ellipsis CSS riddle. I've found a nice solution that (at lest now, in 2022) seems to work across browsers.

In your blog post, you noted that direction: rtl does not work properly. I think the reason for that is likely that direction: rtl instructs the browser to basically treat the content as arabic. For the english letters, the browser is smart enough to figure out that that's not arabic and not reverse them, but it gets confused with the punctuation at the end, which might be arabic and so gets eaten (chrome) or put at the front of the text (firefox). So "The cat is fluffy!" with direction: rtl I think gets interpreted as "The cat is fluffy!" and that messes things up.

I think I've found a reasonably clean workaround that looks right in both desktop firefox and chromium:

.reverse-ellipsis {
  direction: rtl;
}

.reverse-ellipsis::before {
  content: "\0202d";
}

What that does is it sets direction to right-to-left, but then inserts an unicode U+202D left-to-right override mark at the beginning of the element. So the element itself is treated "right to left", and the ellipsis is put at the left side. But the content with that gets interpreted as left to right, and the punctuation is left alone. It also works with just a plain ‭ at the start of the HTML tag's content instead of the ::before hack. Now, I'm a bit fuzzy as to why the override mark in the ::before affects the content of the tag (I think that's weird, because AFAICT ::before should be treated like its own tag, and the override mark shouldn't cross tag boundaries), but it works.

The same should also work for arabic content with direction: ltr using an U+202E right-to-left override mark.

Have a nice day,
jaseg

[KittyGiraudel]

Neat! Thank you for sharing. :)