11

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

comment

6

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.

  • Well I take it since Jeff removed the bug tag, that is not going to happen :P – Brandon Mar 23 '11 at 5:09
6

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:

Screenshot without fix

One way to fix this issue would be to forbid RTL text (or at least RTL control characters1) 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:

Screenshot after fix

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."

  • 1
    Thanks for doing all the legwork... This will be live in the next build. :) – Adam Lear Oct 13 '14 at 23:16
  • 1
    Unfortunately I had to revert this change since it introduced a number of problems in Safari and the "win" achieved here by trying to get it working is fairly minor. – Adam Lear Nov 22 '14 at 17:24
  • Your link to the sandbox thread has been broken. Here is the updated link meta.stackexchange.com/questions/296077/sandbox-archive/… – Ferrybig Oct 9 '17 at 11:45
  • @Ferrybig: Thanks, fixed. – Ilmari Karonen Oct 9 '17 at 12:01
  • @AdamLear: Could this be reconsidered? Based on my testing, unicode-bidi: isolate (without vendor prefixes!) works correctly Safari 11. – Ilmari Karonen Apr 10 '18 at 13:57
0

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

  • The entire line? Not in the screenshot. – Arjan Mar 22 '11 at 18:58
  • @Arjan, I mean the time is displayed first, then user, then dash, then comment as opposed the reverse which is normal. The screenshot seems to be from something other than Chrome, which I am using to view the comment. – jzd Mar 22 '11 at 19:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .