Created

Sep 01, 2013

RTL with Adobe CQ5 / AEM

Posted by Feike Visser

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.

Page-template

When designing your page-component your <html> element should contain the "dir"-attribute with the value of rtl.

<html dir="rtl" ... >

Rich-Text-Editor

You have two options here:

1. Shortcut-key

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.

2. external-stylesheet

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)

rtl_1
static.css

Dialogs

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.

rtl_2

Used resources:

I used this article to point me into the right direction with the rich-text-editor.

 

@heervisscher