mozilla
Your Search Results

    Making Sure Your Theme Works with RTL Locales

    いくつかの言語は右から左に書かれています。Firefox と Thunderbird でリリースされている言語にはアラビア語とヘブライ語があり、さらにペルシャ語のベータ版が利用可能です。これらの言語は 1 億人の潜在的な利用者がいます。これらのロケールについて理解するために重要なことは、すべてのインタフェースが右から左へ反対向きになっていることです。つまり左マージンを持つテキストは、代わりに右マージン (または -moz-start マージン) を持ち、右を指し示す矢印は左を指し示します。またその逆も反対向きになります。

    ヘブライ語の Firefox 2 のスクリーンショット
    ヘブライ語の Firefox 2 のスクリーンショット

    あなたがなすべきこと

    この段階であなたは自身に次のように問いかけるでしょう、「わたしのテーマがどの言語にインストールされるのか、どうやって知ることができる? これらのロケールのために特別なバージョンを作るべき?」 落ち込まないでください。RTL 互換のテーマはとても簡単に作成できます。

    Gecko 1.9.2 以降

    Gecko 1.9.2 では :-moz-locale-dir CSS 擬似クラスが導入されました。このクラスは、左から右または右から左のユーザインタフェースの描画される向きにマッチします:

    • :-moz-locale-dir(ltr) は、ユーザインタフェースが左から右向きに描画される場合にマッチします。
    • :-moz-locale-dir(rtl) は、ユーザインタフェースが右から左向きに描画される場合にマッチします。

    toolbar[iconsize="large"][mode="icons"] #back-button {
      -moz-image-region: rect(0px 396px 34px 360px);
    }
    
    toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) {
      -moz-image-region: rect(0px 516px 34px 480px);
    } 
    

    この例では、デフォルトで左から右向きのボタンを指定します。ユーザインタフェースが右から左向きに描画されるモードの場合は、下の CSS の指定 (:-moz-locale-dir(rtl)) で上書きされます。

    Gecko 1.9.1 (Firefox 3.5) とそれ以前

    chromedir 属性

    Firefox や Thunderbird, SeaMonkey はいくつかの要素に chromedir 属性を持っています。あなたがすべきことは、この属性の値をテストするテーマに CSS 規則を追加し、RTL 特有の規則を適用する部分に使用するだけです。以下はデフォルトテーマでの例です。この例のように使用してください。

    toolbar[iconsize="large"][mode="icons"] #back-button {
      -moz-image-region: rect(0px 398px 34px 360px);
    }
    
    toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] {
      -moz-image-region: rect(0px 516px 34px 478px);
    }
    

    この方法では、chromedir が "rtl" の場合、2 番目の規則が最初の規則を上書きし、テーマが RTL で動作します。

    すべての要素が chromedir 属性を持っているわけではないので注意してください。そのため、これを行う子孫要素が規則を継承する必要があります。例えば:

    /* ここでは #c に RTL 規則を適用しようとしています。
     * しかし、#c も親要素の #b も chromedir 属性を持っていませんが、
     * その親要素の #a にはこの属性があります。
     */
    
    #a > #b > #c {
      /* 通常の規則 */
    }
    
    #a[chromedir="rtl"] > #b > #c {
      /* RTL 規則 */
    }
    

    ヒント: 時々、戻る進む 矢印のように、画像の新しいバージョンを必要としないものがあります。代わりに、RTL のコンテキストでは反対向きの矢印を使用してください。

    left/right 規則の代わりに start/end 規則を使用する

    RTL モードでは方向が逆になるため、左のものが右に、右のものが左になります。結果的に、left/right 規則を padding,border, margin などに使用することがなくなります。代わりに、RTL 互換性を確保するため、以下の start/end 規則を使用してください:

    #urlbar-search-splitter {
      min-width: 8px;
      -moz-margin-start: -4px;
      border: none;
      background: transparent;
    }

    あなたのテーマをテストする

    あなたのテーマの RTL での互換性については簡単にテストできます。RTL ロケールをダウンロードして面倒なことする必要はありません。Force RTL 拡張を有効にすると、Firefox のインタフェースを LTR から RTL に切り替わります。メニュー項目から動的に切り替えることもできます。

    ドキュメントのタグと貢献者

    Contributors to this page: Marsf
    最終更新者: Marsf,