RTL (Right-to-Left) Language Support

Overview

ShahiTranslate Pro provides comprehensive support for RTL (Right-to-Left) languages like Arabic, Hebrew, Persian, and Urdu. This includes automatic layout mirroring, text direction handling, and visual adjustments.

What is RTL?

RTL vs LTR

LTR (Left-to-Right):

1. English, Spanish, French, German, most European languages
2. Text flows left to right
3. UI elements align left

RTL (Right-to-Left):

4. Arabic, Hebrew, Persian, Urdu, Yiddish
5. Text flows right to left
6. UI elements align right
7. Entire layout mirrors

RTL Languages Supported


ShahiTranslate Pro automatically detects and handles:

| Language | Code | Native Name | Script |
|———-|——|————-|——–|
| Arabic | ar | العربية | Arabic |
| Hebrew | he | עברית | Hebrew |
| Persian | fa | فارسی | Persian |
| Urdu | ur | اردو | Arabic |
| Yiddish | yi | ייִדיש | Hebrew |
| Pashto | ps | پښتو | Arabic |
| Sindhi | sd | سنڌي | Arabic |
| Kurdish | ku | کوردی | Arabic |
| Uyghur | ug | ئۇيغۇرچە | Arabic |

Automatic RTL Detection


How It Works


Plugin automatically:

8. Detects RTL language selection
9. Adds dir="rtl" attribute to HTML
10. Loads RTL-specific CSS
11. Mirrors layout appropriately
12. Adjusts text alignment

No Manual Configuration Required

HTML Changes


LTR Language (English):
`html





`

RTL Language (Arabic):
`html





`

CSS Loading


Automatic CSS Injection:

13. Plugin loads assets/css/rtl.css for RTL languages
14. Provides layout mirroring
15. Adjusts text alignment
16. Fixes common RTL issues

Enabling RTL Support


Basic Setup


Location: ShahiTranslate Pro → Settings → Languages → RTL Settings

`
✅ Enable RTL Support
RTL Languages: Automatically detected (ar, he, fa, ur)
✅ Auto-detect RTL direction
✅ Load RTL stylesheet
Save Changes
`

Manual RTL Configuration


If Auto-detection Doesn’t Work:

`
Settings → Languages → RTL Settings
Manual RTL Languages:
✅ Arabic (ar)
✅ Hebrew (he)
✅ Persian (fa)
✅ Urdu (ur)
Add custom: [language code]
`

What Gets Mirrored


Layout Elements


Automatically Mirrored:

17. ✅ Text alignment (left → right)
18. ✅ Padding (left → right, right → left)
19. ✅ Margin (left → right, right → left)
20. ✅ Float (left → right, right → left)
21. ✅ Navigation menus
22. ✅ Sidebars
23. ✅ Form fields
24. ✅ Buttons
25. ✅ Icons with directional meaning

Not Mirrored:

26. ⬜ Images (unless explicitly mirrored)
27. ⬜ Videos
28. ⬜ Logos (usually kept as-is)
29. ⬜ Maps
30. ⬜ Graphs and charts

Text Direction


Text Alignment:
`css
/ LTR /
text-align: left;

/ RTL (automatically converted) /
text-align: right;
`

Reading Direction:
`css
/ LTR /
direction: ltr;

/ RTL /
direction: rtl;
`

Navigation


Menu Structure:

LTR Menu:
`
[Home] [About] [Services] [Contact]
`

RTL Menu (mirrored):
`
[Contact] [Services] [About] [Home]
`

Implementation: Automatic, no changes needed

Sidebar Position


LTR Layout:
`
+—————-+—–+
| | |
| Content | Bar |
| | |
+—————-+—–+
`

RTL Layout (mirrored):
`
+—–+—————-+
| | |
| Bar | Content |
| | |
+—–+—————-+
`

RTL CSS


Built-in RTL Styles


Plugin includes comprehensive RTL CSS (assets/css/rtl.css):

Example Styles:
`css
/ Body direction /
body.rtl {
direction: rtl;
text-align: right;
}

/ Float reversal /
.rtl .float-start {
float: right !important;
}

.rtl .float-end {
float: left !important;
}

/ Text alignment /
.rtl .text-start {
text-align: right !important;
}

.rtl .text-end {
text-align: left !important;
}

/ Margin and padding /
.rtl .ms-auto {
margin-right: auto !important;
margin-left: 0 !important;
}

.rtl .me-auto {
margin-left: auto !important;
margin-right: 0 !important;
}
`

Custom RTL CSS


Adding Your Own RTL Styles:

Location: ShahiTranslate Pro → Settings → Advanced → Custom RTL CSS

`css
/ Example: Fix header alignment /
.rtl #header .logo {
float: right;
margin-left: 20px;
margin-right: 0;
}

/ Example: Reverse icon direction /
.rtl .icon-arrow-right::before {
content: “←”;
}

.rtl .icon-arrow-left::before {
content: “→”;
}

/ Example: Breadcrumb separators /
.rtl .breadcrumb-separator::after {
content: “←”;
}
`

Theme-Specific RTL


If Theme Doesn’t Support RTL:

Many themes lack RTL support. Add fixes:

`css
/ Container adjustments /
.rtl .container {
direction: rtl;
}

/ Grid system fixes /
.rtl .row {
direction: rtl;
}

.rtl [class*=”col-“] {
float: right;
}

/ Navigation menu /
.rtl .menu {
text-align: right;
}

.rtl .menu-item {
float: right;
}

/ Forms /
.rtl input,
.rtl textarea,
.rtl select {
text-align: right;
}

/ Buttons /
.rtl .button-with-icon {
padding-right: 30px;
padding-left: 15px;
}

.rtl .button-with-icon .icon {
right: auto;
left: 10px;
}
`

Mixed Content Handling


LTR Text in RTL Context


The Problem:

31. English words in Arabic sentences
32. Numbers in RTL text
33. URLs and emails

Solution: Unicode Bidirectional Algorithm

Automatic Handling:
Plugin uses Unicode BiDi to correctly display mixed content:

Example:
`
Arabic text: مرحبا بكم في WordPress
Renders correctly with “WordPress” LTR within RTL text
`

Numbers and Dates


Numbers:

34. Arabic numerals (0-9) maintain LTR direction
35. Arabic-Indic numerals (٠-٩) flow RTL
36. Plugin preserves number direction

Dates:
`
LTR: January 15, 2024
RTL: ١٥ يناير ٢٠٢٤
`

Implementation:
`php
// Automatic date localization
Settings → Languages → Date Format
✅ Use localized date format
✅ Use native numerals for RTL languages
`

Quotes and Punctuation


English Quotes (LTR):

37. Opening: ”
38. Closing: ”

Arabic Quotes (RTL):

39. Opening: «
40. Closing: »

Plugin Handling:
`
Settings → Languages → RTL → Punctuation
✅ Localize quote marks
✅ Adjust punctuation spacing
`

Language Switcher in RTL


Switcher Position


RTL Considerations:

41. Default “top-right” becomes “top-left” in RTL
42. Plugin automatically adjusts
43. Can override if needed

Configuration:
`
Settings → Switcher → Position
LTR Position: Top-right
RTL Position: Automatic mirror (top-left)
Or: Manual override → Top-right (if want same corner)
`

Flag Direction


Flags Don’t Mirror:

44. Flag images remain as-is
45. Don’t flip flag graphics
46. Position adjusts, image doesn’t

Dropdown Direction


Dropdown Opening:

47. LTR: Opens downward-right
48. RTL: Opens downward-left (automatic)

Form Handling


Form Fields


Automatic Adjustments:
`html





`

Labels


Label Position:

49. LTR: Label left of field
50. RTL: Label right of field

Automatic Alignment

Placeholders


Placeholder Text:
`html





`

Text aligns automatically based on language

Checkboxes and Radio Buttons


Position Reversal:
`
LTR:
☐ Option 1
☐ Option 2

RTL:
Option 1 ☐
Option 2 ☐
`

CSS:
`css
.rtl input[type=”checkbox”],
.rtl input[type=”radio”] {
float: right;
margin-left: 10px;
margin-right: 0;
}
`

WooCommerce RTL


Product Pages


Automatic Adjustments:

51. Product image gallery (left → right)
52. Product info sidebar
53. Add to Cart button
54. Price alignment

CSS Provided:
`css
.rtl .woocommerce-product-gallery {
float: right;
}

.rtl .summary {
float: left;
}

.rtl .price {
text-align: right;
}
`

Cart and Checkout


Table Alignment:
`
LTR:
Product | Price | Quantity | Total

RTL:
Total | Quantity | Price | Product
`

Currency Symbol:

55. LTR: $100
56. RTL (varies by locale): 100 ریال or ريال 100

Configuration:
`
WooCommerce → Settings → General → Currency Options
Currency Position: Right (for RTL) or Left (for LTR)
Plugin adjusts automatically per language
`

Page Builder Support


Elementor


RTL Support:

57. Elementor has built-in RTL support
58. Plugin works seamlessly with Elementor
59. Columns reverse automatically
60. Text widgets align properly

Manual Adjustments:
`
Elementor → Section Settings → Advanced → Custom CSS
Add RTL-specific styles if needed
`

Beaver Builder


RTL Support:

61. Good built-in RTL support
62. Minor adjustments may be needed

Custom Module CSS:
`
Settings → Advanced → Custom RTL CSS for modules
`

Divi


RTL Support:

63. Divi has RTL support
64. May need theme RTL stylesheet

Configuration:
`
Divi → Theme Options → General → Enable Right to Left Language Support
✅ Enable
`

WPBakery


RTL Support:

65. Limited built-in RTL support
66. Requires custom CSS

Solution:
`css
/ WPBakery RTL fixes /
.rtl .vc_row {
direction: rtl;
}

.rtl .vccolumncontainer {
float: right;
}

.rtl .wpb_wrapper {
text-align: right;
}
`

Testing RTL Layout


Visual Inspection


Checklist:

67. ✅ Text aligns right
68. ✅ Layout mirrors correctly
69. ✅ Navigation menu reversed
70. ✅ Sidebar on correct side
71. ✅ Forms align properly
72. ✅ Buttons positioned correctly
73. ✅ Images don’t overlap text
74. ✅ Icons face correct direction

Browser DevTools


Testing in Chrome:

75. Open DevTools (F12)
76. Go to Elements tab
77. Find tag
78. Verify dir="rtl" attribute
79. Check applied CSS rules

Force RTL for Testing:
`javascript
// In browser console
document.documentElement.setAttribute(‘dir’, ‘rtl’);
document.body.classList.add(‘rtl’);
`

Real Device Testing


Important:

80. Test on actual devices if possible
81. Phones may render differently
82. Tablets have unique considerations
83. Check on various screen sizes

Test Devices:

84. iOS (Safari)
85. Android (Chrome)
86. Desktop browsers (Chrome, Firefox, Safari, Edge)

Common RTL Issues


Issue: Layout Doesn’t Mirror


Symptom: RTL language selected but layout stays LTR

Causes:

87. RTL support not enabled
88. Theme forces LTR direction
89. Conflicting CSS

Solutions:
`

90. Enable RTL in settings
91. Check theme supports RTL:

– Look for rtl.css in theme
– May need to create one

92. Add to functions.php:

addthemesupport(‘rtl’);

93. Clear all caches

`

Issue: Text Aligns Left


Symptom: Text in RTL language aligns left instead of right

Causes:

94. Theme CSS has high specificity
95. Inline styles overriding

Solutions:
`css
/ Force text alignment /
.rtl * {
text-align: right !important;
}

/ Or more specific /
.rtl p,
.rtl li,
.rtl div {
text-align: right !important;
}
`

Issue: Sidebar Wrong Side


Symptom: Sidebar stays on right in RTL layout

Causes:

96. Theme hardcodes sidebar position
97. Flexbox/Grid not mirroring

Solutions:
`css
/ Float-based layouts /
.rtl #sidebar {
float: left;
}

.rtl #content {
float: right;
}

/ Flexbox layouts /
.rtl .container {
flex-direction: row-reverse;
}

/ Grid layouts /
.rtl .grid-container {
direction: rtl;
}
`

Issue: Icons Wrong Direction


Symptom: Arrows and directional icons don’t flip

Causes:

98. Icons are images (don’t auto-flip)
99. Font icons need manual reversal

Solutions:
`css
/ Flip directional icons /
.rtl .icon-arrow-right {
transform: scaleX(-1);
}

/ Or use different icon /
.rtl .icon-arrow-right::before {
content: “\f053”; / fa-arrow-left /
}
`

Issue: Numbers Display Incorrectly


Symptom: Phone numbers, dates show reversed

Causes:

100. BiDi algorithm confusion
101. Formatting issues

Solutions:
`html

+1-555-1234

`

Advanced RTL Features


Logical Properties


Modern CSS (works automatically):
`css
/ Instead of /
margin-left: 10px;
margin-right: 20px;

/ Use logical properties /
margin-inline-start: 10px;
margin-inline-end: 20px;
/ Automatically adjusts for RTL /
`

Browser Support: Modern browsers (IE11 not supported)

BiDi Override


When Needed:

102. Code snippets in RTL page
103. Technical content
104. URLs and emails

Implementation:
`html

هذا نص عربي

code@example.com

نص عربي يستمر

`

Custom Fonts for RTL


Arabic Font Recommendations:

105. Amiri
106. Cairo
107. Tajawal
108. Almarai
109. Noto Sans Arabic

Loading Fonts:
`css
@import url(‘https://fonts.googleapis.com/css2?family=Tajawal&display=swap’);

.rtl body {
font-family: ‘Tajawal’, sans-serif;
}
`

Configuration:
`
Settings → Languages → RTL → Typography
Custom Font Family: Tajawal
Load Google Font: ✅ Yes
`

Best Practices


1. Test Early and Often


110. Don’t wait until launch to test RTL
111. Test with actual RTL speakers
112. Check on multiple devices

2. Use Logical CSS Properties


113. Prefer start/end over left/right
114. Use modern CSS when possible
115. Plan for future RTL support

3. Don’t Over-Mirror


116. Not everything should flip
117. Logos stay as-is
118. Photos don’t mirror
119. Data visualizations may not mirror

4. Consider Typography


120. Use appropriate fonts for RTL
121. Ensure good readability
122. Test font sizes

5. Cultural Localization


123. Don’t just mirror layout
124. Adapt content culturally
125. Use local examples
126. Respect cultural norms

RTL Resources


Tools


127. RTL Tester: Browser extensions to force RTL
128. BiDi Checker: Validate BiDi implementation
129. CSS Analyzer: Check RTL-ready CSS

Documentation


130. W3C BiDi Guidelines
131. Unicode Bidirectional Algorithm
132. CSS Writing Modes Specification

Communities


133. RTL.CSS on GitHub
134. Stack Overflow RTL tag
135. WordPress RTL Forum

Next Steps


136. Language Switcher Options
137. Translation Methods
138. Custom CSS Styling
139. Theme Compatibility