Brackets Displays Wrongly for Right to Left Display Style

Strange behaviour with direction: rtl and closing braces at the end of the sentence

You can add LRM character after the last bracket:

#strange-behaviour {  direction: rtl;}

<div id="strange-behaviour">  Some text with (braces)‎</div>

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

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.

Strange brackets layout in RTL text direction region

dir="rtl" relates to the presentation of certain languages that go from right to left. According to this http://www.i18nguy.com/markup/right-to-left.html website you should use logical characters instead of visual characters if you are wanting the same visual effect seen in the LTR view.

In right-to-left language(like Arabic and Hebrew),bracket reversed

You don't need to wrap the bracketed text in a separate span.

Rather, to fix this problem add a RLM control character (‏) after the closing bracket. The RLM character acts as another Hebrew/Arabic character and so the bracket ( which is a weak character) changes its direction and moves to its correct place.

Like so:

<div>מחיר אחד(3)‏</div>

NB: If you set the attribute dir="rtl" on the element - then even the RLM control character is unnecessary.

Like so:

<div dir="rtl">מחיר אחד(3)</div>

CODEPEN (jsFiddle down by me)

This microsoft doc explains the RLM control character along with other similar control characters.

How to solve BiDi bracket issues?

There are many problems here. According to the unicode standard, brackets are neutral, meaning they are not inherently treated as LTR or RTL. They take the direction of their surrounding language. In the examples where it is being incorrectly rendered, the direction of the closing bracket is assumed to be the same as of English, ie LTR.

1st problem:
You tell the browser that the paragraph should be treated to be RTL. The browser finds English inside, which is LTR, so it thinks English is embedded inside an RTL paragraph, and the last character ")" is treated to be RTL. (the surrounding paragraph is RTL).

2nd problem:
There is no problem here, from a simple look at the source code you have provided, it appears you have provided the brackets properly. But in fact, the closing bracket which should be after the RTL text and before the closing </P> is actually before the starting RTL text. If you type it properly, it would look wrong (because the text editor you are using assumes the end bracket is LTR according to unicode). To verify this, copy the contents on to your editor, put your cursor at the end of "problem:", and press the right arrow repeatedly and observe the location of the last bracket.

Without giving much more explaination, here are some examples to get this working:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Bracket problems with BiDi</title>
</head>

<body>
  <p style="direction: rtl;"><span dir="ltr">Bracket problem no more: hello (world):</span></p>
  <p style="direction: rtl;"><span style="direction: ltr; unicode-bidi: embed">Bracket problem no more: hello (world):</span></p>
  <p style="direction: rtl;">Bracket problem no more: السلام (عليكم)</p>

  <!-- style for p tag below is ltr by default -->
  <p>Bracket problem no more: <span dir="rtl">السلام (عليكم)</span></p>
  <p>Bracket problem no more: <span style="direction: rtl; unicode-bidi: embed">السلام (عليكم)</span></p>
</body>
</html>

There are differences in how style="direction: ltr;" works and dir="ltr" works, so I've given examples of both. Also, because I assume you basically need to get your second problem solved, where you majorly have RTL text in an otherwise LTR document, I've provided the last two examples.

NOTE: If the last two examples are what you are looking for, and you are going to use CSS, the unicode-bidi property is required, and that makes all the difference between working and not working.

RTL Format numeric and symbols not align properly

Brackets act kind of strangely when using rtl. Look here for more info: brackets displays wrongly for right to left display style

But basically you need to add the LRM character after the last bracket ‎

<p class="rtl">(#ODiT27167979008)‎</p>

Where should my brackets be in relation to the text for Arabic languages?

The text in Arabic should be shown like:

ستاكوفيرفلوو(1.0) ‏

I added the html entity of RLM / Right-to-left Mark ‏ in order to fix the text. You should do so if your application doesn't support Bidi native-ly. You can add the RLM by these ways:

HTML Entity (decimal)   ‏
HTML Entity (hex)   ‏
HTML Entity (named) ‏
How to type in Microsoft Windows    Alt +200F
UTF-8 (hex) 0xE2 0x80 0x8F (e2808f)
UTF-8 (binary)  11100010:10000000:10001111
UTF-16 (hex)    0x200F (200f)
UTF-16 (decimal)    8,207
UTF-32 (hex)    0x0000200F (200f)
UTF-32 (decimal)    8,207
C/C++/Java source code  "\u200F"
Python source code  u"\u200F"

(note: StackOverflow right transliteration is ستاك-أوفرفلو)