私は多言語ウェブサイトを構築しています。一部の言語（ヘブライ語のような）は右から左へ読む。実際のテキスト以外にも、これらのユーザーはナビゲーションやその他の視覚的手がかりを逆にすることに慣れています。CSSはウェブサイトを逆転します（ミラー効果）
たとえば、上のメインメニューは右に揃えられます。 「戻る」ボタンは前方を指し、ロゴは左上ではなく右上に表示されます。
もちろん、全く新しいデザインを作成することもできますが、2つのテンプレートを維持する必要があります。理想的ではない。
私は考えていましたが、CSSでデザイン全体を反転することは可能でしょうか？鏡を見るのと同じように？
これが遠くに見える場合は、より良いソリューションにもオープンしています。使用
技術：PHP、Yiiの、Less.css、jQueryの
あなたが試すことができます。
body {
direction:rtl;
}
しかし、それはちょうどから開始するあなたの出発点を与えるだろう...
それが役に立てば幸い。
多くのサイトは、メニューバーとコンテンツ領域で構成されています。これらは、通常、フリップするための主要な領域です。
html[dir="rtl"] #menu {
float: right;
}
これと同じCSSコードを容易に移動しなければならない他の領域に一致するように適合させることができる：CSSの3行で簡単にする必要があります。座標をハードコーディングしない限り（2つのテンプレートのセットを維持する必要はありません。もちろん
、必ずと説明したが、CSSの数行は、ここを参照してくださいとしてまさに、サイト全体を反転させることができる<html dir="rtl">
私はそれぞれに "rtl"と "ltr"クラスを追加します。 – albert
設定します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でFineが動作している間は、 IE8 +での作品（テキストはIEに私には非常に奇妙に見える）期待して少しまだらであることをサポートしています（これは新しいCSS3の機能です）
2）明確なセマンティック欠点がここ
3があります）一部の人々のベンダープレフィックスに関することがあるようです
全体的にRTLを使用し、異なるスタイルシートを使用する方がずっと良い選択肢かもしれませんが、エンドユーザーにはより良いエクスペリエンスが提供されます（残念なことに私たちが望むクイックフィックスはいつも利用できるとは限りません）
これは本当にクールに見えます！しかし、それはまた、実際のテキストを反転します。 –
'c'に同じcssを適用することで、反転したテキストと他のコンテンツを修正することができます。 'p'タグをスタックしないと、それは魅力的に働くでしょう。 （非常にハッキリですが）） –
html {
direction:rtl;
}
これは、ページのすべてを右から左に反転します。ページ内のすべての要素に対してこれを調整する必要があります。MediaWikiので
上記のように、可能であれば "rtl"はHTML属性として適用され、CSSでは適用されません：。また、これは必須ですが、出発点に過ぎません。一部のプロジェクトでは、2セットのCSSファイルが維持されます。他の人は、それらを反転させるためにいくつかの自動ツールを使用します。 MediaWikiの例を答えとして書きました。 –
巧みに右から左に記述する言語のためにその場で自分のCSSを反転させることができCSSJanusと呼ばれるPHPクラスが、あります：
https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=blob;f=includes/libs/CSSJanus.php
これに成功右ツーでのウィキペディアのために使用されているが、結果として、CSSの重複保守はほとんど必要ありません。
多分残念ながら、それは現在完全にスタンドアローンではなく、MediaWikiに結びついていますが、おそらくMediawikiのものをかなり簡単に取り除いてプロジェクトで再利用することができます。
あなたはそれのうちのスタンドアロンライブラリを作成するために管理する場合は、GitHubのか何かでそれを公開することができれば、それはいいだろう:)
あなたが彼の答えSeandunwoody使用してWebサイト全体を反転さが、そのことができます文字やアイコン、画像などを逆転させます。
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";
}
を何それがないことは、基本的です：あなたはこのようにCSSを適用することができます（そうなし<p><p></p></p>）あなたがお互いに入れないもの、<p>と<h1> 2と3のタグにコンテンツを配置することを提供 ダブルミラートリック、それは完全なウェブサイトをミラーリングし、元のオリエンテーションに戻ってあなたのテキストとイメージを含むすべての小さなパラグラフとタイトルがまだ反転ウェブサイトの位置に反映されます。
ハッキーですが、それはうまくいきます。
ます。また、必ずテキストを右にallignedされるとヘブライ語が逆転されていることを確認（英語文字は左から右へままになりますが、右allign）するdir='rtl'htmlまたはbodyタグに追加する必要があります*。
私はこれを試しました。それはすべてを混乱させます... –
"rtl"はHTML属性として適用され、CSSでは適用されません：
。また、これは必須ですが、出発点に過ぎません。 –