CSS-reverse eine ganze website (Spiegel-Effekt)

Ich bin, building a multi-lingual website. Einige Sprachen (wie Hebräisch) Lesen von rechts nach Links. Neben dem eigentlichen text, die Benutzer sind gewohnt, die navigation und andere visuelle Hinweise, rückgängig gemacht.

Zum Beispiel "Hauptmenü" auf der Oberseite wäre auf der rechten Seite ausgerichtet. "zurück" - Taste, Punkt-logo rechts oben statt Links oben, etc.

One-Lösung ist natürlich eine ganze neue design, aber das würde bedeuten, ich müsste zu pflegen, 2 Vorlagen. Nicht ideal.

Ich dachte nur, wäre es möglich, spiegeln das gesamte design in CSS? Wie in einen Spiegel zu schauen?

Bin ich auch geöffnet, um zu besseren Lösungen, wenn dies scheint zu weit hergeholt.

Eingesetzte Technologien: PHP, Yii, Weniger.css, jQuery

InformationsquelleAutor Nathan H | 2013-01-07

8

Ist es möglich, spiegeln Sie die gesamte Website, genau so, wie Sie beschreiben, aber mit ein paar Zeilen CSS siehe hier: 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";
      }
```
Gibt es ein paar Nachteile dieses Ansatzes ist jedoch:

1), Während es funktioniert gut in Firefox + Chrome nur eine Art von arbeiten in IE8+ (der text sieht sehr seltsam für mich in IE), die Unterstützung erwarten, um ein bisschen lückenhaft (dies ist ein neues CSS3 feature)

2) Es gibt offensichtliche semantische Nachteile hier

3) Einige Leute scheinen zu haben eine Sache über vendor-Präfixe

Insgesamt mit RTL auf den Körper und mit einem anderen stylesheet könnte eine viel bessere alternative hier, dachte sogar, dass es mehr umständlich für Sie, das Ende user eine bessere Erfahrung (leider sind die schnellen Lösungen, wir wollen nicht immer verfügbar)
- Das sieht wirklich cool aus! Aber es blättert auch der eigentliche text...
- Sie können fix die Umgedrehte text und anderen Inhalten durch die Anwendung der gleichen css p. Vorausgesetzt, dass Sie nie stack p tags, es würde funktionieren wie ein Charme. (Sehr hacky obwohl 😉 )
InformationsquelleAutor Sean
4

Viele Websites bestehen aus einer Menüleiste und einem content-Bereich. Diese sind in der Regel die Schwerpunkte spiegeln. Sollte einfach sein, mit 3 Zeilen CSS :
```
html[dir="rtl"] #menu {
 float: right;
}
```
Diese gleichen CSS-code kann leicht angepasst werden, um mit anderen Bereichen, die verschoben werden sollen. Es gibt wirklich keine Notwendigkeit, Sie zu pflegen, 2 Sätze von Vorlagen, es sei denn, Sie hardcoded Koordinaten (das war eine schlechte Idee auf jeden Fall).

Natürlich, stellen Sie sicher, dass <html dir="rtl">
- ich würde hinzufügen-Klassen "rtl" und "LNR" auf jeder auch.
InformationsquelleAutor Tom van der Woerdt
3
```
html {
 direction:rtl;
}
```
Dieser umkehren wird alles auf der Seite von rechts nach Links. Müssen Sie dies für jedes element auf Ihrer Seite.
- Wie ich oben schrieb, Wann immer möglich, "rtl" sollte angewendet werden, wie ein HTML-Attribut und nicht in CSS: <html dir="rtl">. Auch dies ist zwar wichtig, es ist nur ein Ausgangspunkt. Einige Projekte warten zwei Sätze von CSS-Dateien, andere nutzen einige automatische tools für spiegeln Sie. Ich schrieb ein Beispiel aus dem MediaWiki unten als Antwort.
InformationsquelleAutor Khaled Faher
2

Können Sie versuchen:
```
body {
 direction:rtl;
}
```
Aber das würde Ihnen nur ein Ausgangspunkt für den start von...

Hoffe, es hilft.
- Ich habe gerade versucht dieses. Es verwirrt alles...
- Wann immer möglich, "rtl" sollte angewendet werden, wie ein HTML-Attribut und nicht in CSS: <body dir="rtl">. Auch dies ist zwar wichtig, es ist nur ein Ausgangspunkt.
InformationsquelleAutor semir.babajic
1

Können Sie spiegeln die gesamte website mit Seandunwoody seine Antwort aber, die umkehren würde den text und die Symbole und Bilder, und wie gut.
Vorausgesetzt, Sie platzieren Sie Ihre Inhalte in  und <h1> 2-und 3-tags, die Sie nicht in jedem anderen (also keine ), können Sie die css wie dieses:
```
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";
 }
```
Was es tut, ist im Grunde die Doppel-Spiegel-trick, es spiegelt die komplette website und dann spiegelt es den kleinen Absatz und die Titel, die enthalten Ihre Texte und Bilder zurück, um die ursprüngliche Ausrichtung, aber immer noch in der position des umgekehrten website.

Hacky, aber es funktioniert (nicht so schön, auf IE aber).

*Sie müssen auch hinzufügen, die dir='rtl' zu den html oder body tag um sicherzustellen, dass der text gerade steht nach rechts und Hebräisch ist Umgekehrt (Englisch Charaktere bleiben Links nach rechts, sondern allign rechts).

InformationsquelleAutor Bas van Stein
1

Die Entwickler von MediaWiki, die software, die hinter Wikipedia in Hunderte von Sprachen, entwickelte ein tool namens CSSJanus, die klug flip CSS on-the-fly für rechts-nach-Links-Sprachen:

https://github.com/cssjanus

Dies ist erfolgreich für Wikipedia in rechts-nach-Links-Sprachen und als Ergebnis Sie erfordern sehr wenig doppelte Pflege von CSS.
- dieser link ist nicht mehr gültig!
- Vielen Dank für den Kommentar! Ich aktualisierte die Antwort.
InformationsquelleAutor Amir E. Aharoni
0

Es ist ein großer Magic-Tool namens rtlcss
TLDR;
vor langer Zeit, bekam ich Weg mit dabei die folgenden:
1. wenn ein element hat eine direction:rtl -> entfernen Sie es
2. wenn ein element keine direction:rtl -> hinzufügen
in den meisten Fällen, fügen direction:rtl zu body
4. wenn das element hat align:right/left' -> switch left/right 5. if element has - Marge-rechts/Links` -> switch-Links/rechts

Grenzen, die nicht verarbeitet werden:
1. Statisch platzierte Elemente können nicht platziert werden, rechts
2. Relative Platzierungen gebracht werden darf, Recht
3. Die Styles in der HTML sollte gesorgt werden (falls vorhanden, empfehlen, den Schritt in die CSS)

seien Sie vorsichtig, wenn Sie planen, mit Finden & Ersetzen als right & left finden Sie in geheimnisvolle Orte.

z.B. .copyright { ... } werden kann .copyleft { ... }

Suche heute (Jan '18) fand ich diese tolle tool, dass all die oben aufgeführten Punkte für Sie:
Werfen Sie einen Blick auf RTLCSS Website

Habe ich es als command line, da musste ich auf RTL eine Bibliothek CSS hatte ich mal, aber es kann gebündelt werden, die in Ihren build-Schritte.
- Sehr alt, aber das ist, was ich getan habe.
InformationsquelleAutor Tomer W

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.