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

Question

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

Answer 1

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.

Answer 2

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.