mozilla

Compare Revisions

Making sure your theme works with RTL locales

Change Revisions

Revision 131284:

Revision 131284 by Tsahi on

Revision 131285:

Revision 131285 by Kliu0x52 on

Title:
Making sure your theme works with RTL locales
Making sure your theme works with RTL locales
Slug:
Making_Sure_Your_Theme_Works_with_RTL_Locales
Making_Sure_Your_Theme_Works_with_RTL_Locales
Tags:
Add-ons, Themes, Right-to-left
Add-ons, Themes, Right-to-left
Content:

Revision 131284
Revision 131285
n11      Some languages are written from right to left. Of the langun11      Some languages are written from right to left. Of the langu
>ages Firefox and Thunderbird are shipped in, that includes Arabic>ages Firefox and Thunderbird are shipped in, that includes Arabic
> and Hebrew, with Persian <a class="external" href="http://www.mo> and Hebrew, with Persian <a class="external" href="http://www.mo
>zilla.com/en-US/firefox/all.html#beta_versions">avaialbe as beta<>zilla.com/en-US/firefox/all.html#beta_versions">available as beta
>/a>, for a total population in excess of 100 million potential us></a>, for a total population in excess of 100 million potential u
>ers. The important thing to understand about these locales, is th>sers. The important thing to understand about these locales, is t
>at the entire interface is mirrored right-to-left. That means tha>hat the entire interface is mirrored right-to-left. That means th
>t text that had a left margin will have a right margin instead (o>at text that had a left margin will have a right margin instead (
>r -moz-start margin), arrows that pointed right will have to poin>or -moz-start margin), arrows that pointed right will have to poi
>t left and vice versa, and so on.>nt left and vice versa, and so on.
n14      <img align="none" alt="A screenshot of Firefox 2 in Hebrew"n14      <img align="none" alt="A screenshot of Firefox 2 in Hebrew"
> src="File:en/Media_Gallery/Firefox_2_RTL-header.png">> fileid="214" src="File:en/Media_Gallery/Firefox_2_RTL-header.png
 >">
n20      At this stage you might ask yourself, "how would I know whan20      At this stage you might ask yourself, "How would I know wha
>t language is my theme installed on? Should i make a special them>t language is my theme installed on? Should I make a special them
>e for these locales?" The answer is simple. Firefox, Thunderbird >e for these locales?" Don't despair: making a theme RTL-compatibl
>and SeaMonkey expose a special class named <code>chromedir</code>>e is fairly easy!
>. All you have to do is add conditional CSS rules to your theme t 
>hat test for the value of this class, and put the RTL version of  
>the rule if the value is "rtl". That's how the default theme work 
>s, so you can open it up and take an example. 
21    </p>
22    <h4 name="The_chromedir_attribute">
23      The <code>chromedir</code> attribute
24    </h4>
25    <p>
26      Firefox, Thunderbird and SeaMonkey expose an attribute name
 >d <code>chromedir</code> on certain elements. All you have to do 
 >is add CSS rules to your theme that test for the value of this at
 >tribute, and use that to apply any RTL-specific rules that you ma
 >y have. That's how the default theme works, so you can use it as 
 >an example.
n32      This way, if <code>chromedir</code> is RTL, the second rulen38      This way, if <code>chromedir</code> is "rtl", the second ru
> will override the first, and the theme will work in RTL.>le will override the first, and the theme will work in RTL.
nn40    <p>
41      Note that not all elements will have the <code>chromedir</c
 >ode> attribute, so you may need to refer to an ancestor element t
 >hat does. For example:
42    </p>
43    <pre>
44/* We want to apply a RTL rule to #c; neither it nor its
45 * parent element #b has a chromedir attribute, but its
46 * grandparent element #a does.
47 */
48 
49#a &gt; #b &gt; #c {
50  /* normal rules */
51}
52 
53#a[chromedir="rtl"] &gt; #b &gt; #c {
54  /* RTL rules */
55}
56</pre>
nn60    <h4 name="Using_start.2Fend_rules_instead_of_left.2Fright_rul
 >es">
61      Using start/end rules instead of left/right rules
62    </h4>
n38      <b>Tip:</b> instead of using <code>margin-right</code> and n64      Directions are mirrored in RTL mode, so left becomes right 
><code>margin-left</code>, use the <code>-moz-margin-start</code> >and right becomes left. As a result, you almost never want to use
>selector. That will work on both orientations.> left/right rules for paddings, borders, and margins. Instead, yo
 >u should use the following start/end rules instead to ensure RTL 
 >compatibility:
nn66    <ul>
67      <li>{{ Cssxref("-moz-padding-start") }}
68      </li>
69      <li>{{ Cssxref("-moz-padding-end") }}
70      </li>
71      <li>{{ Cssxref("-moz-margin-start") }}
72      </li>
73      <li>{{ Cssxref("-moz-margin-end") }}
74      </li>
75      <li>{{ Cssxref("-moz-border-start") }}
76      </li>
77      <li>{{ Cssxref("-moz-border-start-color") }}
78      </li>
79      <li>{{ Cssxref("-moz-border-start-style") }}
80      </li>
81      <li>{{ Cssxref("-moz-border-start-width") }}
82      </li>
83      <li>{{ Cssxref("-moz-border-end") }}
84      </li>
85      <li>{{ Cssxref("-moz-border-end-color") }}
86      </li>
87      <li>{{ Cssxref("-moz-border-end-style") }}
88      </li>
89      <li>{{ Cssxref("-moz-border-end-width") }}
90      </li>
91    </ul>
n52      Testing your theme for RTL compatibility is easy, and you dn104      Testing your theme for RTL compatibility is easy, and you d
>o not even have to go through the hassle of downloading a RTL loc>o not even have to go through the hassle of downloading a RTL loc
>ale. The <a class="external" href="https://addons.mozilla.org/fir>ale. The <a class="link-https" href="https://addons.mozilla.org/f
>efox/7438">Force RTL</a> extension, when enabled, can make your L>irefox/7438">Force RTL</a> extension, when enabled, can make your
>TR locale behave as if it was a RTL locale.> LTR locale behave as if it was a RTL locale.
t54    <div class="noinclude"></div>{{ wiki.languages( { "ja": "ja/Mt106    <div class="noinclude"></div>{{ languages( { "ja": "ja/Making
>aking_Sure_Your_Theme_Works_with_RTL_Locales" } ) }}>_Sure_Your_Theme_Works_with_RTL_Locales" } ) }}

Back to History