Why Auto Rename?

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, which means markup elements will be rendered starting from the right side of the screen.

For example, let's say we want to render a fragment that look like this: < content >, Using a UI framework such as Semantic UI, we'll be using the frameworks icons to represent the left and right angle brackets:

JSFiddle

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:

JSFiddle

Clearly, this is not the intended result! and for a RTL only page, the markup need to be reveresed, such as:

JSFiddle

Great! 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.

With RTLCSS auto rename enabled, any selector having directional keywords but with no directional declarations, such as:

i.icon.angle.left:before { content: "\f104"; }
i.icon.angle.right:before { content: "\f105"; }

Will be:

i.icon.angle.right:before { content: "\f104"; }
i.icon.angle.left:before { content: "\f105"; }

The auto rename option can be enabled globally or at selector level by using /*rtl:rename*/ directive.