Setting up basic RTL text in our Joomla templates
Middle eastern languages such as Hebrew and Arabic are written predominantly right-to-left. Unfortunately, by default our Joomla templates do not have the option to switch direction and they can only use left-to-right text. But there are some tips that could help you customize/change the templates language settings to fit your needs. Converting a LTR layout to RTL is fairly straightforward, but it requires some extra work and of course good CSS knowledge, as well as some experience of using Firebug or a similar tool.
Remember in this guide we included only a few tips, not a complete solution.
Note: Before you start editing any template php or css files please read this manual about how to use custom CSS.
Direction changes
We use the direction property in CSS which sets the direction of of content flow within a block-level element. The following example CSS code lets you change the direction style properties on the Joomla template from left-to-right (LTR) to right-to-left (RTL):
body {
direction: rtl; /* Right to Left */
}
This CSS property should cascade the direction to all elements : text and other elements go from right to left on the whole website. Remember that sometimes you will additionally have to override some selected elements manually, because there can be a few exceptions to the right to left rule; for example: telephone numbers when there are spaces between the numbers:
<span style="direction:ltr;unicode-bidi:embed;"> +123 (07) 000-007 </span>
As numbers should always read from left to right even in Hebrew or Arabic.
Mirroring the layout
In most cases, all you have to remember about mirror mode is that “left is right and right is left”. Many properties, like float or absolute positioning with left and right values, are unaffected and must be handled manually. Almost all elements (such as: logo, menu) that were floated left must now be floated right instead. Left margins and paddings must now move to the right and the right margins and paddings must now move to the left. Example:
.abc {
float: left;
text-align: left;
margin: 0 10px 0 20px;
padding-right: 10px;
}
Example of CSS for LTR.
.abc {
float: right;
text-align: right;
margin: 0 20px 0 10px;
padding-left: 10px;
}
Example of the same CSS updated for RTL.
RTL for Menu, Logo, images in NSP and position of social icons
Simple example changes for some popular layout elements:
#gkLogo { float: right; }
#gkMainMenu { float: right; }
.gkMenu > ul > li { float: right;}
.nspArt img.nspImage { margin-left: 5px; }
#gkSocial { float: left;margin-left: 10px;}
If you are using an old template from around 2012 or older – you can try using the following CSS code instead:
h1#gkLogo { float: right; }
div.gk-menu > ul.level0 > li {float: right; }
#gkSubmenuMod ul li {float: right; }
#gkLogin { float: left; margin-right: 32px;}
Some of our templates have extra classes (fright and tright) which may also be of use; use them instead of default left.
NOTE: Remember to translate GK template language file into your native language (Arabic, Hebrew, Persian, Urdu and many other languages): How to translate all phrases from template
Also in language template file for example: en-GB.tpl_gk_news2.ini – you will find also date format used in template:
TPL_GK_LANG_UPDATE_DATE="updated" TPL_GK_LANG_UPDATE_DATE_FORMAT="g:i A T, M j, Y"
For more details how to change it – please read general PHP manual about function date: http://php.net/manual/en/function.date.php But be careful some other date format located on your site might be inside translations of used additional components like K2 etc.
Other useful links
- www.ostraining.com/blog/joomla/add-rtl-support-to-joomla-templates/
- rtl-this.com/tutorial/rtling-hello-world-webpage-rtling
- code.google.com/p/cssjanus/
This article was first published
