SMF Support > قوالب (Themes)

خطوات تعريب القوالب (النسخة الانكليزية) مهمة جدا

(1/1)

Croco:
Hello,
 
The main difference between left-right and right-left languages is using the attribute dir="RTL" which  change the direction of the page.
 
What should we do when creating a theme that supports both directions ??
 
1-Do not use alignment attributes like to left or right (using the center one is permitted)
     We can simply delete them if the alignment is same as original text direction left for left-right languages and right for right-left languages
     if we have to use the alignment attribute then we will have to make sure to use the opposite one for RTL languages
     for example:
    
--- Code: ---     ', $context['right_to_left'] ? ' align="left"' : 'align="right"', '
    
--- End code ---

    or
    
--- Code: ---     align="', $context['right_to_left'] ? 'left' : 'right', '"
    
--- End code ---

     same thing applies to text-align, float and other directional and alignment attributes.

2- Do not use dir="RTL" to resolve any directional problems it should be used only once at the head scope in the "index.template.php" file.
 
3- Images (most difficult part):
 
     If we are using one piece images the direction of the page won't make any problems.
     However if we are using more, then it depends on the image's edge, for example, in my silver theme I have this border of 5 images:
    
     as you can see the previous border was nice but if we used it in RTL language page we would get this:
    
     when we should get this:
    
      so we have 2 main issue: the image direction(if it is sensitive to direction) and actual direction of all images together in the page.
      The actual direction is resolved by RTL attribute.
      Therefore, what we need to do is to flip horizontally every image that has direction(direction sensitive) and we can do it by using image editors like photoshop.
      The order of the images will be the same but we need to use different images.
      For example, first part of the border i had top_left.gif(for right-left languages) and top_lefte.gif(for left-right languages).
      They are 2 images and the difference is the last letter so what i did is this:
     
--- Code: ---<img src="top_left', $context['right_to_left'] ? '' : 'e', '.gif" />
--- End code ---

      the technique doesn't matter we can use the language folders that are used for buttons so all the image names will be same but in different locations.
      However, this won't be effective because we actually have only 2 directions, so it is better to have different names like i did before.
      Or we could create 2 folders for directional images and use the same names with different locations which will be the best solution for this.
 
4- some themes has definition of left or right location when using the RTL attribute this definition will be changed so the left will become right and right will become left. Which probably will be a translation issue but every theme designer should be aware of this point.
 
If there is anything wrong or you have other suggestion please share them with me :)
 
Thank you for reading
Croco

في حال أراد أحدكم ترجمة الموضوع أرجو الرد ضمن موضوع جديد و إرسال الرابط إلي لكي أنقله لهذا القسم و شكرا لتعاونكم

في حال وجود تساؤلات أرجو الرد هنا

aljraif:
where do I put this code
to change the direction of my forum from english to arabic?

hardcore[twiva]:
i dunno

machinez12:
شكرا لك اخي

Navigation

[0] Message Index

Go to full version