53

demonstration of rtl characters disrupting badge/rep display

In the picture above, it appears that the user has 43 reputation, 10 bronze, and 3005 silver badges. At first sight, I thought, "How is it possible?" Then I noticed that the user actually has 3005 reputation, 10 silver, and 43 bronze badges!

The formatting is because the display name has some Arabic characters. RTL characters should not reverse the badge/rep display.

3
  • 1
    Could we get a link to their name? This is quite curious. Perhaps on that line, a LTR character is forced so that it appears that there's left-to-right text in the "middle" of a right-to-left name.
    – Makoto
    Commented Jul 15, 2015 at 4:48
  • 17
    Since no one else has: compulsory xkcd link
    – Jon Clements Mod
    Commented Jul 15, 2015 at 5:46
  • This is the link of his profile. @Makoto Commented Jul 15, 2015 at 9:15

2 Answers 2

19

Here's what's going on, for the curious. (No, I'm not an SE developer, I'm a (slightly) bored full stack web developer on vacation who decided to inspect the source.)

Here's the culprit code snippet.

<div class="user-details">
  <a href="/users/4730/seyyed-ali-%d8%a7%d9%84%d8%b3%db%8c%d8%af-%d8%b9%d9%84%db%8c">SEYYED___ALI   السید____علی</a><br>
  <span class="reputation-score" title="reputation score " dir="ltr">3,005</span>
  <span title="10 silver badges">
    <span class="badge2"></span>
    <span class="badgecount">10</span>
  </span>
  <span title="43 bronze badges">
    <span class="badge3"></span>
    <span class="badgecount">43</span>
  </span>
</div>

The only span to have dir set is the reputation score. All of the others...don't. Firefox seems to be just fine with this, as it renders everything "alright":

enter image description here

...which leads me to believe it's a Chrome (or Webkit) bug.

The fix might be as simple as adding the dir attributes to the other two spans, or doing a bit of enforcement on user-supplied text to ensure that the string ends in an LTR marker if it detects an RTL marker. Personally, I think that the former is a simpler/more straightforward approach, but the latter is more fun/challenging to attempt.

0
11

There's a similar bug affecting comments reported on meta.SE. In both cases, the proper fix would be the same: apply the unicode-bidi: isolate CSS3 style (with appropriate vendor prefixes, until browser support stabilizes) to any text-level elements that may contain arbitrary user input, like this:

.comment-copy, .comment-user, .user-details a {
    unicode-bidi: embed;  /* fallback for browsers that don't support isolate at all */
    unicode-bidi: -moz-isolate;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: isolate;
}

Unfortunately, using this CSS feature seems to break Safari in a really weird way, so, until somebody comes up with a workaround for this Safari bug (or until Safari fixes their CSS support), we'll need to rely on other hacks solutions.

One such solution could be to automatically append a Unicode Left-to-Right Mark (&lrm;) after the username link. This won't protect against malicious attacks using BiDi override characters, but those could be prevented simply by disallowing such characters in usernames, if they aren't already.

In this particular case, though, an even better solution might be to style the username link as an inline-block; this should stop any BiDi formatting from leaking out of it:

.user-details a { display: inline-block }

At least based on my quick testing in Firefox and Chrome, this change doesn't seem to have any adverse visual effects, and it does stop this bug from occurring.

(In any case, I've added the unicode-bidi: isolate fix to the devel branch of SOUP, or rather, extended the existing fix that only applied to comments; since SOUP does not currently support Safari anyway, due to its lack of working user script support and my lack of access to Safari for testing, I don't really have to worry about working around Safari bugs.)

You must log in to answer this question.

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