Why does “[x]y” display incorrectly in the RTL direction?

Answer 1

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.

Answer 2

one of the solutions is to add ‎ 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

Answer 3

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.

Answer 4

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.

Answer 5

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.