34

<div style="direction: rtl">
[x]y
</div>

You can see HTML text [x]y displays as x]y].

What is the reason of that result?

PS: I get that result in Chrome 56.0.2924.87 (64-bit).

Sayakiss
  • 6,878
  • 8
  • 61
  • 107

5 Answers5

34

I cannot tell you the reason but I can tell you how to fix it: add unicode-bidi: bidi-override;. See more about it

<div style="direction: rtl; unicode-bidi: bidi-override;">
[x]y
</div>

The description

The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.

is not clear enough to explain the behaviour. However, it works.

EDIT

The MDN article brings some light here, bidi-override actually disables the browser standard smart behaviour and everything works as is / as expected.

smnbbrv
  • 23,502
  • 9
  • 78
  • 109
  • 1
    unicode-bidi on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) – Sander_P May 15 '17 at 15:52
  • 1
    Honestly, the "why" is secondary to getting the perceived problem fixed (in this stack). Another answer tells the why, but this should be the proper answer IMHO. I get that the question is a poor fit to the site, but +1 to this answer. – Mindwin Remember Monica May 15 '17 at 17:59
27

It is rendered correctly, i.e. according to specifications. You have asked for right-to-left layout. The rendering first takes the [ character. It is directionally neutral and therefore rendered in a RTL run rightmost and mirrored (so it looks like ]). Next, to the left of it comes x]y in that order, since the Latin letters x and y have inherent left-to-right directionality and the neutral ] gets its directionality from them.
The conclusions to be drawn depends on the rendering you want and your reasons for using right-to-left directionality.

Michael H.
  • 3,323
  • 2
  • 23
  • 31
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Nice explanation, but why `[x]` rendered as `[x]` (which is not `x]]`) according to your answer? Check that result by this [JSFiddle](https://jsfiddle.net/vhfcrjr8/). – Sayakiss May 15 '17 at 08:45
  • 1
    Sayakiss, in “[x]” there is nothing that prevents the brackets from deviating RTL layout, so it is rendered all right to left, with the bracket glyphs mirrored. You can see this if you set e.g. `[`. It's the rightmost character that turns red; it is mirrored so that it looks like “]”. Similarly, the leftmost character is “]” rendered with a “[” glyph. – Jukka K. Korpela May 15 '17 at 10:15
  • 1
    "Next, to the left of it, comes “x]y”, in that order, since the Latin letters “x” and “y” have inherent left-to-right directionality and the neutral “]” gets its directionality from them." My question is, why "x]y" have inherent left-to-right directionality, but "x]" does not? – Sayakiss May 15 '17 at 10:23
  • 5
    Because in the former case the "neutral" character is *between* LTR characters. So it gets treated as LTR. In the latter case this doesn't apply. – plugwash May 15 '17 at 11:35
  • 6
    Was `so it looks like “[”` supposed to say `so it looks like “]”`? – user2357112 May 15 '17 at 17:14
  • Yes, ‘so it looks like “[”’ was meant to refer to “]”; I’ll fix it. – Jukka K. Korpela May 16 '17 at 13:10
17

After some research, I found the following info: Right-To-Left text direction

Parentheses and square brackets do not have an inherent direction. The open parenthesis is between LTR and RTL text runs and so cannot "inherit" the direction of the surrounding text. It therefore defaults to the RTL base direction of the paragraph and is placed to the left of the Hebrew word shalom. Note the closing square bracket is embedded in a single run of left-to-right text. It therefore adopts the direction of its surrounding text and is placed to the right of the English word shalom.

Community
  • 1
  • 1
kevin b.
  • 1,494
  • 1
  • 13
  • 23
2

one of the solutions is to add &#x200e; after the bracket

thanks to @freeworlder for the solution on brackets displays wrongly for right to left display style

even you can use other char, follow this link http://www.codetable.net/hex/200e

Juber Qureshi
  • 21
  • 3
0

Try using an open square bracket "[" where you need a closed square bracket, and vice versa. I had a font with a letter mapped to "[" and it would not display. I changed the letter in the database to "]" and it worked.

Timothy Whittaker
  • 9
  • 3
  • Having an issue using the > bracket in this html rtl document https://ilmlc.sourceforge.io/books/multilinear_torah/html/multilinear_torah_3rd_edition_4_fonts.html The Aramaic font estrangelo_cursive (the second line from the top) uses the > keystroke for letter equal to the hebrew letter kaf. The last letter of the last word in line one shows up fine, but on line three, the eighth word from the right the > ends up at the end of the word. Tried >, <, ‹. The html sees the > and flips the order of words that begin with >. My try remapping the font keystroke – Timothy Whittaker Jul 17 '17 at 18:15
  • changing the > angle to <‎ in the mysql database corrected the problem – Timothy Whittaker Jul 18 '17 at 15:04