RTL with Adobe CQ5 / AEM
When you have to implement RTL (right-to-left) functionality in your website it is not only the front-end that has to work in a RTL-way. Also the author-interface should work as much as possible RTL, because that is what the author expects.
In this article I will highlight some options you within your AEM-toolset.
When designing your page-component your <html> element should contain the "dir"-attribute with the value of rtl.
<html dir="rtl" ... >
You have two options here:
When you are in your rich text editor you can press Command + Shift + x on Mac (Ctrl+Shift+x on windows). This puts your editor in RTL-mode.
If you want to enable your editor by default in RTL-mode, you can also point to an external stylesheet
In the example below I added the externalStyleSheets-property of the default text-component (/libs/foundation/components/text/dialog/items/tab1/items/text)
Next up are the fields inside the dialogs, I added the following styles inside the <head>-element of the page used by the author.
With these changes the fields inside the component-dialogs and dialogs like 'Page Properties' are now also aligned with rtl.