4

多言語 Web サイトで rtl 方向をサポートするためのヒントを教えてください。

テキストの方向とは別に、たとえばメニューのマークアップなどに何か変更が必要ですか? rtl CSS を別のファイル (「layout-rtl.css」など) に含めるか、「rtl」クラスを body タグに追加する必要がありますか? みたいなことを知りたいです。

ここでいくつかのヒントを見つけましたが、直接誰かのアドバイスをいただければ幸いです (すでに rtl 言語で Web サイトを立ち上げている人)。

4

4 に答える 4

4

私は双方向の Web サイトで多くの作業を行っているので、これで (私の観点から) ベスト プラクティスを説明し@Haim Evgiます。

だから私はこのことを容易にするために次のツールを作りました.あなたはそこに詳細を見つけることができます..

Sass プリプロセッサとツールを使用してこれを行う方法を説明しbi-app-sassますが、Less バージョンについては前のリンクを参照してください。

単純に、3 つのファイルを作成するというアイデアです (基本的に、ファイルは必要に応じて拡張できます..)

app-ltr.scss    // ltr interface to be compiled
app-rtl.scss    // rtl interface
_app.scss       // private file where you will write your styles (won't be compiled)

以下をapp-rtl.scss含める

@import 'bi-app-rtl';
@import 'app';

についても同じapp-ltr.scss

@import 'bi-app-ltr';
@import 'app';

今あなたがしなければならないのはあなたのスタイル_app.scssをright/left.

.foo {
  display: block;
  @include float(left);
  @include border-left(1px solid white);
}

それらをコンパイルすると、スタイルシートの 2 つの異なるバージョンapp-rtl.cssが作成app-ltr.cssされ、完了です!

お役に立てば幸いです:)

于 2012-11-09T21:21:45.040 に答える
3

公式の W3C から:

于 2010-08-03T08:55:30.690 に答える
2

CSS のどこにも text direction = ltr を指定しない限り、CSS の問題に関しては body クラスに設定するだけで十分です。

考慮すべきいくつかのこと。画像内のテキストにより、画像の編集や翻訳の取得などの点でローカリゼーションに時間がかかります。テキスト プロパティを rtl に設定するのはかなり簡単ですが、画像を再作成するのはより困難です。rtl 言語のユーザーは逆方向に読むことに注意してください。したがって、ltr 言語で右側に表示されるメニューは、rtl 言語では左側に表示されます。

ltr 言語で一方向に動くティッカーは、rtl 言語では反対方向に動きます。

于 2010-08-09T14:56:25.590 に答える
1

私たちがしていることは、次のように php でいくつかのパラメーターを宣言することです。

SIDE : right
OPOSIDE : left
DIR : rtl
OPODIR : ltr

すべてのサイト言語。

そして、1 つの css ファイルと div を含む 1 つのテンプレートのみを扱い、css またはテンプレート ファイルの置換プレース ホルダーに追加します。

お気に入り ：

float : {SIDE}
...

そして、php を使用して実際の css ファイルを生成し (置換する必要があるものをすべて置換します)、サイトは彼に属する css ファイルを取得します。

LESS、BLUEPRINT、 XCCのようなCSSフレームワークでそれを行うことができます

于 2010-08-03T09:07:33.053 に答える