Dojo Text aligns all special characters to the right if dir:'rtl' is used

Question

I want to keep the text of a button in the center followed by an icon.

The following code works fine till I add some special charaters infront of the button text. In such case, It puts all special characters after the text followed by the icon.

Now I have traced that this issue may be related to the dir:'rtl' im using. But I need that to put my icon on the right of the text.

I will really appriciate any help/opinion on this-

Here's what My code and css Looks like.

<button data-dojo-type="dijit.form.Button" type="button" data-dojo-attach- point="OpenButton" data-dojo-props="'class':'ButtonStandard',dir:'rtl', iconClass:'ButtonArrowRight'">None</button>

Where my css looks like this

.ButtonStandard {
  width: auto;
  margin-bottom: 2px;
  padding: 0px;
}


.ButtonArrowRight {
  background-image: url("images/ArrowRight.png");
  background-position: 0 53%;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
}

Thank you

Answer 1

Setting writing direction to rtl means that the overall writing direction is right to left, and this may indeed cause some directionally neutral special characters to be placed on the right or some left-to-right characters after them. This one reason why such direction should only be used when the dominant text content is in right-to-left language such as Arabic or Hebrew.

You can place an image to the right of some text in different ways. The simplest way is to include an image with an img element after the text. You can also use a background image placed on the right side of an element. In any case, this is a completely different issue, and setting writing direction is just an unnecessarily complicated and risky approach to it.