Problem with Arabic in Joomla

[the_new_mr]

Hello to all!

Sorry for not typing in Arabic.  I'm really slow in typing Arabic

First of all, nice to meet you all.  I've got a feeling I'm going to be here for a while

I'm thinking of setting up a website in Arabic with Joomla.  I just did a test in the Joomla demo but I'm not sure if it's going to work.  Take a look at the following images.

I wrote a test as follows:


But, after clicking on Link to Menu, I got the following:


Which gives this result:


Does anyone know how to solve these problems?  Any help would be greatly appreciated.  Thanks in advance!

[mostafa hassaan]

جيد يا أخي
ولكن عليك أن تقوم بتعريب التمبيلت أولا
وهذه أداة سهلة للتعريب
http://www.ahmadh.com/tools/cssmirror/

اذهب هناك
واضغط على browse
وارفع التمبليت الانجليزي
وانتظر قليلا فسوف يطلب منك تحميل التمبليت بعد أن تم تعريبه
ثم ركب التمبليت

مع ملاحظة أنك قد تحتاج إلى بعض التعديلات في ملف css

وفقك الله 
والسلام عليكم ورحمة الله وبركاته

[blackcat2006]

you need Arabic Lang.
thats all?

[nadornet]

إخواني لدي نفس المشكلة

المشكلة ليست في تعريب التمبلت
بل في جملة
إنتبهو في الصورة لتغير النص إلى حروف و أشكال غريبة و أرقام

المرجو المساعدة في المشكلة
أنا صرلي ثلاثة أيام

http://www.huissiers-justice-nador.net/ahjn

[Mohammed]

اخى ,أنت تحتاج لملف لغة عربى

http://extensions.joomla.org/component/ ... Itemid,35/

قم بتثبيت الملف و تفعيل اللغة و ستنتهى المشكلة

[the_new_mr]

Thanks everybody for your replies.  In order to try your suggestions, I'll first have to download Joomla and run it on my machine.  I don't have the time to do that at the moment but when I do, I'll let you know how I get on

[emakki]

لحل مشاكل اللغة تأكد من العناصر التالية
أولاً: تثبيت اللغة العربية وتفعيلها سواء ويندوز1256 أو يو تي اف
ثانياً: التأكد من أن الأيزو في ملف اللغة مطابق للترميز في القالب المستخدم
ثالثاً: في ملف السي اس اس استخدام خطوط عربية مثل تاهوما وأريال
وأخيراً: إن كنت قد قمت بتركيب ملف اللغة بترميز يو تي اف على قاعدة بيانات ترميزها يو تي اف تأكد من تعديل ملف الداتابيس في مجلد إنكلود

وبالتوفيق

[the_new_mr]

ٍShokran lakom 3l rudookom. 

Wa alaan, 3zurooney an aktib bil engaleezy tany. 

I finally was able to download Joomla to my computer the other day and I have it running now al hamdlilAlah.  I installed 1.0.13 and also downloaded an Arabic language file from this site:
http://joomlacode.org/gf/project/arabic/frs/

I got the regular one (not UTF-8) and it seems to be working fine on my computer on both Firefox and IE.  (character encoding is windows-1256).

I couldn't really understand what steps 2 and 3 were about from the last post.

Will the file I downloaded be enough or should do something more to make sure it's fine?

Thanks very much for all your help.

[HH]

the_new_mr
In case you've a problem with Arabic on your computer, here is the reply in English.

As for step 2
Every template has its own Cascading Style Sheet file (CSS) which simply define the parameters of colours, fonts, of the template to render within the browser.

This file is found within the path of the template .../templates/templatename/template.css

So Step 2 means using Tahoma or Arial fonts in the CSS file of the template, which is normaly found within the body tag, for example

Code: Select all

body {
   margin: 15px;
   height: 100%;
   padding: 0px;
   font-family: Arial, Helvetica, Sans Serif;
   line-height: 120%;
   font-size: 10px;
   color: #333333;
   background: #DDDAD5;
}

As for step 3
Check this sticky thread over this forum regarding Database + Arabic Support.

[the_new_mr]

Thanks for your reply HH.  I'm actually now very close to getting site up and running.  The last step is getting the brackets to face the right way so that category links work properly.  I tried the CSS mirror link from earlier but, unfortunately, it completely messes everything up.  I think I know how to fix it.  I'll post on here if I find the reply.

[the_new_mr]

I meant to say "I'll post on here if I find the solution" in my last post.  That's what happens when you write posts after 4 hours sleep I guess 

Anyway, I managed to fix the problem (swapped column locations (left to right and right to left)) but I created another.  I added dir="rtl" to the index.php file and the brackets now face the right way which means the category links now work in firefox.  Now, there is a new problem.  The menu_bg file goes too far left in firefox and (stangely) looks okay in IE.

Also, in IE, the topmenu is all messed up but it looks fine in firefox.

// Edit:  I've fixed the problem with the bursting menu_bg image by using the following modified code:

Code: Select all

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 16px;
	font-weight: bold;
	color: #2A2673;
	text-align: right;
	padding-top: 5px;
	padding-right: 0px;
	height: 20px !important;
	height: 25px;
	width: 90%;
	text-decoration: none;

Changed padding-right from 18px to 0px and changed the width from 100% to 90%.  Just the top menu problem in IE now.

Here are some screenshots:

Firefox:


IE:


Any suggestions?

Don't worry about the images.  I'll fix them if I can get this problem fixed.

[emakki]

Salaam,

You seem to have a problem with the css since some code works fine in IE but does not in FF and vise versa. I will be glad to help if I can see a working live site so I can see the problem clearly.

Generally, try to see the code of the table for the top menu and the css code used. If you can post it here this may also help solving the issue.

Good luck

Eyad Makki

[the_new_mr]

Wa Alaykom Al Salam wa Rahmat Allah wa Barakatu

Thanks for your reply.  And sorry for making the Arabic section go English 

I've been staring at the code for a long time but I still don't fully understand CSS.  Unfortunately, I can't send you a link to the site itself since the person responsible for the domain didn't renew it in time.  He should be to renew it any day now.

In the meantime, I'm working on the template on my machine at home using XAMPP.

I'll gladly put up the CSS.  Of course, everything has gone backwards since putting in the dir=rtl in the index.php so left is right and right is left.

The code:

Code: Select all

/* CSS Document */

html {
	height: 100%;
}

body {
	height: 100%;
	margin-bottom: 1px;
}

.clr {
	clear: both;
}

.outline {
  border: 1px solid #2A2673;
  background: #F8D39F; /* background inner */
	padding: 2px;
}

#buttons_outer {
	width: 635px;
  	margin-bottom: 2px;
	margin-left: 2px;
	float: right;

}

#buttons_inner {
	border: 1px solid #2A2673;
	height: 21px !important;
	height: 23px;
}

#pathway_text {
  overflow: hidden;
	display: block;
	height: 25px;
	line-height: 25px !important;
	line-height: 22px;
	padding-right: 4px;
	border: 1px solid #2A2673;
	margin-bottom: 2px;
}

#pathway_text img {
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 6px;
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

ul#mainlevel-nav li
{
	background-image: none;
	padding-right: 0px;
	padding-left: 0px;
	float: right;
	margin: 0;
	font-size: 21px;
	line-height: 21px;
	white-space: nowrap;
	border-left: 1px solid #2A2673;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-right: 15px;
	padding-left: 15px;
	text-decoration: none;
	color: #2A2673; /* background menu buttons non-highlight colour */
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #FFFFFF; /* top menu buttons highlight text colour */
	background: #E8A724; /* top menu buttons highlight colour */
}


#search_outer {
	float: right;
	width: 165px;
}

#search_inner {
  border: 1px solid #2A2673;
	padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 5px 3px 3px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #000000; /* search textfield text colour */
}

#header_outer {
	text-align: right;
	border: 0px;
	margin: 0px;
}

#header {
	float: right;
	padding: 0px;
	margin-left: 2px;
	width: 635px;
	height: 150px;
	background: url(../images/header_short.png) no-repeat;
}

#top_outer{
	float: right;
	width: 165px;
}

#top_inner {
  border: 1px solid #2A2673;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: right;
}

#left_outer {
  float: right;
	margin-top: 2px;
	width: 155px;
}

#left_inner {
  border: 1px solid #2A2673;
	padding: 2px;
  float: none !important;
  float: right;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-right: 2px;
	/** border: 1px solid #2A2673; **/
	float: right;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: right;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: right;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: left;
	padding: 0px;
	margin-right: 0px;
	height: 70px;
}

#right_outer {
	margin-right: 2px;
	width: 115px;
}

#right_inner {
  float: none !important;
  float: right;
  border: 1px solid #2A2673;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #2A2673;
  float: none !important;
  float: right;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #2A2673;
  float: none !important;
  float: right;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #2A2673;
}

.maintitle {
	color: #ffffff;
	font-size: 20px;
	padding-right: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #2A2673;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: right;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #2A2673;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 0px double #2A2673;
  width: auto;
  /*background: url(../images/button_bg.png) repeat-x;*/
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-left: 20px;
	float: left;
}

#footer {
	text-align: center;
	padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-right: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	text-align: right;
	font-size: 12px;
}



body {
	margin: 15px;
	height: 100%;
	padding: 0px;
	font-family: Arial, Tahoma;
	line-height: 120%;
	font-size: 11px;
	color: #333333;
	background: #F6A33B; /* outside border */
}

/* Joomla core stuff */
a:link a:visited {
	color: #2A2673; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #900;	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpaneopen td {
   padding-left: 5px;
}

table.contentpaneopen td.componentheading {
	padding-right: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-right: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
  color: #2A2673;
  font-family: Arial, Tahoma;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #2A2673;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #2A2673;
	background-color: #ffffff;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: right;
	padding-top: 4px;
	padding-right: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-left: 5px;
}

.contentheading {
	height: 30px;

	color: #2A2673;
	font-weight: bold;
	font-size: 20px;
	white-space: nowrap;
}



.contentpagetitle {
	font-size: 16px;
	font-weight: bold;
	color: #2A2673;
	text-align:right;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: right;
	padding-right: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #F8D39F; /* poll table colour 1 */
}

.sectiontableentry2 {
	background-color : #EEC58A; /* poll table colour 2 */
}

.small {
	color: #000000;
	font-size: 15px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #000000;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #000000;
	font-size: 11px;
}

table.contenttoc {
  border: 1px solid #2A2673;
  padding: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #000000;
	text-align: right;
	padding-top: 2px;
	padding-right: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
        vertical-align: middle;
        font-size: 16px;
        font-weight: bold;
        color: #2A2673;
        text-align: right;
        padding-top: 5px;
        padding-right: 0px;
        height: 20px !important;
        height: 25px;
        width: 90%;
        text-decoration: none;
        background-image: url(../images/menu_bg.png);
        background-repeat: no-repeat;
        background-position: left;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}

a.mainlevel#active_menu {
	color:#fff;
	font-weight: bold;
}

a.mainlevel#active_menu:hover {
	color: #fff;
}

a.sublevel:link, a.sublevel:visited {
	padding-right: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #2A2673;
	text-align: right;
}

a.sublevel:hover {
	color: #900;
	text-decoration: none;
}

a.sublevel#active_menu {
	color: #333;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #2A2673;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #2A2673;
}

span.article_seperator {
	display: block;
	height: 1.5em;
}

Thanks for all your help!

[emakki]

Thanks for your post but I don't know which part of the CSS is responsible for the top menu. You should post the code for the top menu where classes are caled from the CSS.

Good luck

[the_new_mr]

The topmenu code is ul#mainlevel-nav.  Sorry, I should have made that clearer.  I only left some comments in the code there.

AlhamdlilAlah, I finally managed to get something sorted for the topmenu.  It's not ideal but I changed float to "left" instead of "right" under ul#mainlevel-nav li.  It's now put the top menu to the left but at least it can be seen from both Firefox and Internet Explorer.

Now, to try and the Islamic Finder prayer times onto the right column without messing up the site's template...

Thanks everyone for all your help

[vraijarod]

الصراحة يحصل لي نفس الشيء الذي حصل للاخ ، قارنت الموقعين عبر الفايرفوكس و الاكسبلورر و الغريب تظهر لي نفس المشكلة التي ظهرت للاخ ، اكيد انه مشكل في Css و لكن الحل صعب نوعاً ما

[emakki]

قد يفيدك السائل عن الموضوع حيث أنه أفادنا بحل المشكلة فيمكنه طرحها هنا

بالتوفيق

[vraijarod]

اخي الحل بالانجليزي و هذا منتدى عربي و لو اردنا الحل بالانجليزي لما تصفحت العربي
او ليس كلامي صحيح ؟!!

[Mrs Saqib]

Asslamua'lykum

i have a web site in English but would like to be able to view arabic in my articles too.

sadly, when i type arabic and save the article, the English can be seen properly but not the arabic. the arabic is shown as ?

any help and suggestions would be greatly appreciated. May Allah reward you. please help.

[emakki]

Check your encoding. It should be UTF-8 or make sure it is arabic compatible like windows-1256

Now, if you get question marks in diamond, this means utf problems. Make sure your site encoding and joomla is utf for both.

Good luck insha allah

[Mrs Saqib]

wa a'lykumusslam

i dont know much about encoding. i will appreciate it greatly if you can give me a step to step guide on how to change my joomla to windows-1256 and UTF-8 output encoding. This will help me alot and i will be very very greatful.

once this problem is resloved will all people be able to read the Arabic from my site [if they have arabic fonts etc downloaded]

JazakAllah

[emakki]

The idea of using UTF-8 is that everybody can read any language of a site. So, for you to set your website, while it should be utf-8 by default, make sure that your databse is in utf as well. I assume you have Joomla 1.5. It should be set to go. There are several detailed posts here that explains how to do it for the website, as well as for other forums in joomla.org

Sorry for not explaining due to lack of time. Anyone else, please help.

Good luck

[sherif]

Mrs Saqib

if you can understand Arabic put can't type Arabic here for some reason , then PLEASE let us know so at least we can answer in Arabic

if you are using joomla version 1.5.x then please go to the right forum
start a new thread there by clicking here


and if you are using the older joomla version 1.0.x then please go to the right forum
start a new thread there by clicking here

in both case PLEASE give as much details as you can about your website and a link to it
i'm sure we all would like to help

[NeedArabicSite]

Salaams,

i would like to view and type arabic on my site but question marks appear. I want my whole admin to be in Arabic, i just want to be type some arabic in my articles.
I am using joomla 1.5.14.
Is there any simple way i can do this?
Your help will really be appreciated.
please reply in english.