Welcome Visitor, Please Login or Register Now Tuesday, March 19, 2024 03:50 AM 
Forums Index > Mewsoft > FAQ > Arabic Translation and Display - Right to Left Display
New Topic   New Reply
Search for:
Author Message
mewsoft mewsoft's personal page
Administrator Team Member
Posts: 5381 Display member's posts
Joined: 03-19-24 03:50 AM
Location: knxoville, TN, USA
Member Offline
View Member's Profile Visit member's website Mewsoft Corporation Send private message ICQ Messenger: ICQ AIM Messenger: AIM YIM Messenger: Yahoo MSN Messenger: MSN
 
Back to top
Arabic Translation and Display - Right to Left Display Edit Delete Reply with quote Quote
First Post Posted on: 03-10-15 12:57 PM last post first post

This topic to show you how to translate your website and show it in Arabic. Arabic and some other languages like Persian

and Hebrew are displayed from Right to Left.


1)-go to your admin center, click on Class Editor, select the class Header, then replace all the code before the line

that says:


Code: HTML    Select All    Expand All
<title>< !--CLASS::Meta_Title--></title>


with this code:


Code: HTML    Select All    Expand All
<HTML dir="rtl" lang="ar">

<html>
<head>
<meta http-equiv="Content-Language" content="ar-eg">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>< !--CLASS::Meta_Title--></title>


See the attached image below in this topic.

as you see the first line has lang="ar" which means Arabic general, the line that has

content="ar-eg" means arabic egypt, you can change this to your country arabic language code
for example for saudi arabia it would be ar-sa instead of ar-eg etc.

the line that has charset=windows-1256 this is windows arabic code page.

This will force all the browsers to automatically display any Arabic in your pages in the correct Arabic shap.

Now for the display from the Right to Left for the Arabic, go to the admin center, click on Language Manger,
under the Edit Language select the file "General / Homepage" then click the button "Edit" search on this
page for the variable named:

language_direction


You will find it set to ltr (which means left to right):

dir="ltr"

Change it to rtl (which means right to left):

dir="rtl"

That's all you need.

Of course you may need to internally in your html code use the tag dir="rtl" to display specific table div or pragraph etc.

Of course these information is helpful in other languages also like Spanish, etc.
For the top navigation to be from right to left, The top navigation class in the class editor, change things that say float:left to float:right, so the top navigation class should be like this:

Code: HTML    Select All    Expand All
<style type="text/css">
.mainmenu{
   position: relative;
   padding: 0 0 0 0;
   margin: 0 0 0 0;
   background: url('<!--CLASS::Theme_Images_URL-->/menup_bg.gif') repeat-x; /*tab background image path*/
   height: 46px;
   list-style: none;
}
.mainmenu ul{
   float: right;
   width: 100%; /*width of menu*/
   border: 1px solid #564c66; /*dark purple border*/
}
.mainmenu li{
   float: right;
}
.mainmenu li a{
   float: left;
   display: block;
   color:#000000;
   text-decoration: none;
   font-size: 12px;
   font-weight: bold;
   font-family: sans-serif;
   padding: 0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
   height: 46px;
   line-height: 46px;
   text-align: center;
   cursor: pointer;   
}
.mainmenu li a b{
   font-size: 12px;
   font-weight: bold;
   font-family: sans-serif;
   float: left;
   display: block;
   padding: 0 16px 0 0px; /*Padding of menu items 0 24px 0 8px*/
}
.mainmenu li.current a, .mainmenu li a:hover{
   font-size: 12px;
   font-weight: bold;
   font-family: sans-serif;
   color: #ffffff;
   background: url('<!--CLASS::Theme_Images_URL-->/menup_hover_left.gif') no-repeat; /*left tab image path*/
   background-position: left;
   text-decoration: underline;
}
.mainmenu li.current a b, .mainmenu li a:hover b{
   font-size: 12px;
   font-weight: bold;
   font-family: sans-serif;
   color: #ffffff;
   background: url('<!--CLASS::Theme_Images_URL-->/menup_hover_right.gif') no-repeat right top; /*right tab image path*/
}
</style>




Thank you



Mewsoft Support
www.mewsoft.com

Page 1 of 1
Go to page:

New Topic   New Reply Mark Unread
Jump to:  
Delete   Move     Lock   +Favorits   +Notify   Print