RTL text can mess up comment timestamps

Question

On this answer, it looks like the user entered some Arabic text, and it caused the comment text and the timestamp to switch places:

Answer 1

Getting mixed LTR and RTL text to play together nicely is difficult. The comment is in Arabic, and the numbers then stay in RTL (because there's no way for the renderer to know if they're part of the RTL text or not) until the renderer sees text that must be LTR. It might work better if SO emitted a Unicode LTR shift before its boilerplate.

Answer 2

While this bug has been partially fixed by adding the dir="ltr" attribute to the comment timestamps, so that the timestamp is no longer broken up, using RTL text (and especially the Unicode BiDi override characters) in comments can still mess up the placement of the username and the timestamp with respect to the comment text, as the sandbox thread linked by balpha above well demonstrates:

One way to fix this issue would be to forbid RTL text (or at least RTL control characters¹) in comments. However, that would be throwing the baby out with the bathwater — there are legitimate reasons for writing, say, Hebrew or Arabic text in comments, and indeed there are some SE sites (like, say, Mi Yodeya or Islam) where such comments may even be fairly common.

Instead, the proper way to fix this issue is to isolate the directionality comment text (and the username) from the surrounding elements using the unicode-bidi: isolate CSS property. That way, users can write their comments in any language and text directionality they want, and it won't mess up the surrounding content.

Since I first wrote this answer, browser support for this feature has significantly improved. Even Safari 11 (and possibly earlier versions) supports it without a vendor prefix, despite what MDN still claims. (In fact, as noted on MDN, using vendor prefixes with this property is not recommended, since it can trigger weird bugs in old versions of some WebKit-based browsers.)

I thus propose that the following CSS rule should be added to the SE style sheet:

.comment-copy, .comment-user {
    unicode-bidi: isolate;
}

With this CSS rule, the comments shown above look like this:

This rule is included in the current version (1.52) of my Stack Overflow Unofficial Patch user script. In fact, the rule currently in SOUP covers a few more spots where RTL text can leak out and mess up layout in unwanted ways:

.comment-copy, .comment-user,              /* comments */
.user-details a, a[href^="/users/"],       /* user cards and links */
#chat-body .user-name, #chat-body .text {  /* chat user names and messages */
    unicode-bidi: isolate;
}

SOUP also contains a related fix that automatically fixes any unclosed Unicode BiDi control sequences in new comments. That way, comments entered by SOUP users cannot accidentally mess up the interface for other people.

---

^{1) I would, in fact, support the blocking / filtering of the Explicit Directional Override characters LRO (U+202D) and RLO (U+202E) in comments, since they have very few if any legitimate uses and a high abuse potential. Even the Unicode consortium nowadays says that "they are to be avoided wherever possible, because of security concerns."}

Answer 3

The entire line is right to left instead of left to right.