8

多言語ウェブサイトを構築しています。一部の言語 (ヘブライ語など) は右から左に読みます。これらのユーザーは、実際のテキストに加えて、ナビゲーションやその他の視覚的な手がかりが反転することに慣れています。

たとえば、上部のメイン メニューは右側に配置されます。「戻る」ボタンは前方を指し、ロゴは左上ではなく右上に表示されます。

もちろん、1 つの解決策はまったく新しいデザインを作成することですが、それは 2 つのテンプレートを維持する必要があることを意味します。理想的ではありません。

CSSで全体のデザインを反転させることは可能でしょうか？鏡を見るような？

これが非常に難しいと思われる場合、私はより良い解決策にも開かれています。

使用技術: PHP、Yii、Less.css、jQuery

4

8 に答える 8

10

で説明したとおりにサイト全体を反転させることは可能ですが、CSSの数行はここを参照してください：http：//jsbin.com/aduqeq/5/edit

CSS：

body { 
        margin: 0 auto;
        width: 300px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
      }

ただし、このアプローチにはいくつかの欠点があります。

1）Firefox + Chromeで正常に動作しますが、IE8 +でのみ動作します（IEではテキストが非常に奇妙に見えます）サポートが少しパッチ状になることを期待しています（これはCSS3の新機能です）

2）ここには明らかな意味上の欠点があります

3）ベンダープレフィックスについて何かを持っているように見える人もいます

全体的にボディにRTLを使用し、別のスタイルシートを使用する方がはるかに優れた代替手段になる可能性があります。これは面倒ですが、エンドユーザーにはより優れたエクスペリエンスが提供されます（残念ながら、必要なクイックフィックスが常に利用できるとは限りません）。

于 2013-01-07T11:00:45.610 に答える
4

多くのサイトは、メニュー バーとコンテンツ領域で構成されています。これらは通常、反転の主な焦点となる領域です。3行のCSSで簡単にできます:

html[dir="rtl"] #menu {
    float: right;
}

この同じ CSS コードは、移動する必要がある他の領域に合わせて簡単に変更できます。座標をハードコーディングしない限り、2 セットのテンプレートを維持する必要はありません (とにかく悪い考えでした)。

もちろん設定はしっかりと<html dir="rtl">

于 2013-01-07T09:51:00.963 に答える
3 
html {
  direction:rtl;
}

これにより、ページのすべてが右から左に反転します。ページ内のすべての要素に対してこれを調整する必要があります。

于 2013-01-07T11:48:09.670 に答える
2

何百もの言語でウィキペディアを強化するソフトウェアである MediaWiki の開発者は、CSSJanus と呼ばれるツールを開発しました。これは、右から左へ記述する言語の CSS をオンザフライで巧みに反転させることができます。

https://github.com/cssjanus

これは、右から左へ記述する言語のウィキペディアでうまく使用されており、その結果、CSS の重複したメンテナンスはほとんど必要ありません。

于 2013-01-07T12:16:04.283 に答える
2

あなたが試すことができます：

body {
  direction:rtl;
}

しかし、それはあなたに出発点を与えるだけです...

それが役に立てば幸い。

于 2013-01-07T09:50:35.090 に答える
1

Seandunwoody の回答を使用して Web サイト全体を反転させることはできますが、テキスト、アイコン、画像なども逆になります。コンテンツを<p>および<h1>2 と 3 のタグに配置し、これらを互いに配置しない場合 (つまり no <p><p></p></p>)、次のように css を適用できます。

body,p,h1,h2,h3 { 
    margin: 0 auto;
    width: 300px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
  }

それが行うことは基本的にダブルミラートリックであり、完全なWebサイトをミラーリングし、テキストと画像を含むすべての小さな段落とタイトルを元の向きにミラーリングしますが、逆のWebサイトの位置に残します.

ハッキーですが、動作します (ただし、IE ではあまり良くありません)。

*またはタグに を追加しdir='rtl'て、テキストが右揃えになり、ヘブライ語が逆になるようにする必要があります (英語の文字は左から右に配置されますが、右揃えになります)。htmlbody

于 2016-01-18T09:31:43.283 に答える