CSS odwraca całą witrynę (efekt lustra)

Buduję wielojęzyczną stronę internetową. Niektóre języki (np. Hebrajski) są czytane od prawej do lewej. Oprócz faktycznego tekstu, użytkownicy ci są przyzwyczajeni do odwrócenia nawigacji i innych wizualnych wskazówek.CSS odwraca całą witrynę (efekt lustra)

Na przykład menu główne u góry zostanie wyrównane w prawo. przycisk "wstecz" wskazywałby na przód, logo w prawym górnym rogu, a nie w lewym górnym rogu, itp.

Jednym z rozwiązań jest oczywiście stworzenie zupełnie nowego projektu, jednak oznaczałoby to konieczność zachowania dwóch szablonów. Nieidealny.

Po prostu myślałem, czy możliwe byłoby odwrócenie całego projektu w CSS? Jak patrzenie w lustro?

Jestem również otwarty na lepsze rozwiązania, jeśli wydaje się to daleko idące.

Technologie użyte: PHP, Yii, Less.css, jQuery

Źródło

2013-01-07 Nathan H

Można spróbować:

body { 
    direction:rtl; 
}

Ale to właśnie daje punkt wyjścia do rozpoczęcia z ...

Mam nadzieję, że to pomoże.

Źródło

2013-01-07 09:50:35

Właśnie próbowałem tego. To wszystko psuje ... –

Kiedy tylko jest to możliwe, "rtl" powinien być stosowany jako atrybut HTML, a nie w CSS: . Ponadto, chociaż jest to niezbędne, to tylko punkt wyjścia. –

Wiele witryn składa się z paska menu i obszaru zawartości. Zazwyczaj są to główne obszary, na których należy się skupić. Powinny być łatwe w 3 liniach CSS:

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

ten sam kod CSS można łatwo dostosować, aby dopasować inne obszary, które powinny zostać przeniesione. Naprawdę nie ma potrzeby utrzymywania 2 zestawów szablonów, chyba że utworzyłeś współrzędne (co i tak było złym pomysłem).

Oczywiście, upewnij się, aby ustawić <html dir="rtl">

Źródło

2013-01-07 09:51:00

Dodałbym również klasy "rtl" i "ltr". – albert

Jest możliwe, aby przerzucić całą stronę dokładnie tak, jak opisać ale kilka linii CSS zobaczyć tutaj: 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"; 
     }

Istnieje jednak kilka wad tego podejścia:

1) Mimo że działa poprawnie w przeglądarce Firefox + Chrome, to tylko sortowanie prac w IE8 + (tekst wygląda bardzo dziwne dla mnie w IE) oczekiwać wsparcia być nieco przerywał (jest to nowa funkcja CSS3)

2) Istnieją oczywiste semantyczne wady tutaj

3) Niektórzy ludzie Wydaje się, że ma coś wspólnego z prefiksami sprzedawców

Ogólnie użycie RTL na ciele i użycie innego arkusza stylów może być tu znacznie lepszą alternatywą, nawet jeśli jest bardziej uciążliwe dla ciebie, użytkownik końcowy ma lepsze wrażenia (niestety szybkie poprawki, które chcemy, nie zawsze są dostępne)

Źródło

2013-01-07 11:00:45 Sean

To wygląda naprawdę fajnie! Ale także odwraca rzeczywisty tekst ... –

Możesz naprawić odwrócony tekst i inną zawartość, stosując to samo css do 'p'. Pod warunkiem, że nigdy nie kumulujesz tagów 'p', to działałoby jak czar. (Bardzo hacky choć;)) –

html { 
    direction:rtl; 
}

Spowoduje to odwrócenie wszystkiego na stronie od prawej do lewej. Musisz dostosować to dla każdego elementu na swojej stronie.

Źródło

2013-01-07 11:48:09

Jak napisałem powyżej, w miarę możliwości "rtl" powinien być stosowany jako atrybut HTML, a nie w CSS: . Ponadto, chociaż jest to niezbędne, to tylko punkt wyjścia. Niektóre projekty utrzymują dwa zbiory plików CSS; inni używają automatycznych narzędzi do ich przewracania. Poniżej napisałem przykład z MediaWiki jako odpowiedź. –

W MediaWiki istnieje klasa PHP o nazwie CSSJanus, które można sprytnie odwrócić swój CSS w locie dla języków pisanych od prawej do lewej:

https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=blob;f=includes/libs/CSSJanus.php

ten jest z powodzeniem używany do Wikipediach w prawym-to- w lewym języku, w związku z czym wymagają one bardzo niewielkiej ilości kopii CSS.

Niestety nie jest to obecnie całkowicie autonomiczne i jest w pewien sposób powiązane z MediaWiki, ale prawdopodobnie można łatwo pobrać materiały Mediawiki i ponownie wykorzystać je w projekcie.

Jeśli uda Ci się stworzyć samodzielną bibliotekę z niego, byłoby miło, gdyby można było publikować je na GitHub czy coś :)

Źródło

2013-01-07 12:16:04

Można przerzucić całą stronę internetową za pomocą Seandunwoody jego odpowiedź, ale które odwrócić tekst i ikony oraz obrazy i tak dalej. Pod warunkiem, że umieszczenie treści w  i <h1> 2 oraz 3 znaczniki, których nie wolno kłaść na siebie (więc nie ) można zastosować css tak:

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"; 
    }

co robi jest w zasadzie podwójna lustrzana sztuczka, która odzwierciedla całą stronę internetową, a następnie odzwierciedla cały mały akapit i tytuły, które zawierają tekst i obrazy z powrotem do pierwotnej orientacji, ale wciąż znajdują się na odwróconej stronie internetowej.

Hacky, ale działa (nie tak dobrze na IE).

* Należy również dodać dir='rtl' do znacznika html lub body aby upewnić się, że tekst jest ustawioną równo na prawo i hebrajski jest odwrócony (angielski znaków pozostanie lewej do prawej, ale allign prawej).

Źródło

2016-01-18 09:31:43

CSS odwraca całą witrynę (efekt lustra)

Odpowiedz

Powiązane problemy