Why reversing icons with horizontal direction?
HTML documents developed for Right-to-Left languages such as Arabic, require setting document direction to rtl , this will cause the browser to render its contents from right to left, meaning: markup elements will be rendered starting from the right side of the screen.
For example, let's say we want to render < content >, the markup might be:
As you can see, the ui icon left angle was rendered to the left of the content, and ui icon right angle icon rendered to the right.
But if we set the document direction to rtl, keeping the markup intact, the browser will render the ui icon left angle icon to the right of the content, and the ui icon right angle icon to the left:
Not what would we expect! To solve this we need to reverse some of the markup, such as:
Ok, But what about bilingual sites, do we need to have separate markup to support both LTR and RTL languages ?
The answer is No! We simply reverse the classes, making the same markup work for both.
It might be confusing when developing RTL only sites, unless you look at it from content perspective.