When you have to imple­ment RTL (right-to-left) func­tion­al­ity in your web­site it is not only the front-end that has to work in a RTL-way. Also the author-interface should work as much as pos­si­ble RTL, because that is what the author expects.

In this arti­cle I will high­light some options you within your AEM-toolset.

Page-template

When design­ing your page-component your <html> ele­ment should con­tain 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 edi­tor you can press Com­mand + Shift + x on Mac (Ctrl+Shift+x on win­dows). This puts your edi­tor in RTL-mode.

2. external-stylesheet

If you want to enable your edi­tor by default in RTL-mode, you can also point to an exter­nal stylesheet

In the exam­ple below I added the externalStyleSheets-property of the default text-component (/libs/foundation/components/text/dialog/items/tab1/items/text)

static.css
<style>
#CQ {
text-align:right;
direction:rtl;
}
#CQrte {
text-align:right;
direction:rtl;
}
</style>

Dialogs

Next up are the fields inside the dialogs, I added the fol­low­ing styles inside the <head>-element of the page used by the author.

<style>
#CQ .x-form-element {
text-align:right;
direction:rtl;
}
#CQ .x-form-text {
text-align:right;
direction:rtl;
}
#CQ .x-form-field {
text-align:right;
direction:rtl;
}
#CQ .x-form-item {
text-align:right;
direction:rtl;
}
#CQ .x-window-tl {
text-align:right;
direction:rtl;
}
#CQ .x-tab-panel .x-tab-panel-noborder  {
text-align:right;
direction:rtl;
}
#CQ .x-fieldset-body  {
text-align:right;
direction:rtl;
}
#CQ .x-fieldset-body-noheader  {
text-align:right;
direction:rtl;
}
#CQ .x-form-label-left label.x-form-item-label {
text-align:right;
direction:rtl;
}
</style>

With these changes the fields inside the component-dialogs and dialogs like ‘Page Prop­er­ties’ are now also aligned with rtl.

Used resources:

I used this arti­cle to point me into the right direc­tion with the rich-text-editor.

@heervisscher