wrinting Right to Left Persian/Arabic texts in Atlassian Confluence

ConfluenceRLT.md

Confluence RLT

Adding RTL Macro

1. go to Confluence Administration
2. go to User Macros page under Configuration part
3. click on Create a User Macro to add a new macro
4. create RTL Section macro
   • use rtl-section as Macro Name
   • use RTL Section as Macro Title
   • you can use this picture as icon
   • reference: https://jira.atlassian.com/browse/CONFSERVER-1373
   • use Rendered Macro Body Processing type
   • use the following template:

## @noparamsa workaround for writing Right to Left texts
<div style="direction: rtl; unicode-bidi: inherit;">${body}</div>

Adding RTL Section to the Text

1. while editing the text, from Insert more content select Other macros
2. search for RTL Section and select it
3. click Insert
4. Add RTL Persian or Arabic texts

LTR Section inside RTL section

1. create LTR Section macro same as RTL Section
   • use ltr-section as Macro Name
   • use LTR Section as Macro Title
   • use Rendered Macro Body Processing type
   • you can use this picture as icon
   • use the following template:

## @noparamsa workaround for writing Right to Left texts
<div style="direction: ltr; unicode-bidi: inherit;">${body}</div>

Now insert a LTR Section macro inside your RTL Section macros whenever needed.

Fix Editing Environment

RTL will not work in editing environment. To fix this:

1. go to Confluence Administration
2. go to Stylesheet page under Look and Feel part
3. click on Edit to add new CSS rules
4. Add the following lines and click on Save

table.wysiwyg-macro[data-macro-name="rtl-section"] {
    direction: rtl;
    text-align: justify;
}

table.wysiwyg-macro[data-macro-name="ltr-section"] {
    direction: ltr;
    text-align: initial;
}

Use Better Fonts

Default fonts may not looks good in Persian or Arabic. You can use any font you want, e.g. Vazir font.

1. go to Confluence Administration
2. go to Stylesheet page under Look and Feel part
3. click on Edit to add new CSS rules
4. Add the following lines and click on Save

@font-face {
    font-family: Vazir;
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/Vazir.ttf') format('truetype');
}

@font-face {
    font-family: "Vazir Code";
    src: url('https://cdn.rawgit.com/rastikerdar/vazir-code-font/v1.1.2/dist/Vazir-Code.ttf') format('truetype');
}

#title-text, .wiki-content {
    font-family: Vazir;
}

.wiki-content {
    text-align: justify;
    text-indent: 1em;
}

code {
    font-family: "Vazir Code";
    background: rgba(0,0,0,0.03);
    border: 1px solid #dfe1e5;
    border-radius: 3px;
    padding: 1px 6px;
}

ltr.png

rtl-use-1.png

rtl-use-2.png

rtl.png