CSS rovescia un intero sito Web (effetto specchio)

Sto costruendo un sito Web multilingue. Alcune lingue (come l'ebraico) leggono da destra a sinistra. Oltre al testo reale, quegli utenti sono abituati ad avere la navigazione e altri indizi visivi invertiti.CSS rovescia un intero sito Web (effetto specchio)

Ad esempio il menu principale in alto sarebbe allineato a destra. il pulsante "indietro" punterebbe in avanti, il logo in alto a destra invece che in alto a sinistra, ecc.

Una soluzione è ovviamente quella di creare un design completamente nuovo, tuttavia ciò significherebbe che dovrei mantenere 2 modelli. Non ideale

Stavo pensando, sarebbe possibile capovolgere l'intero disegno in CSS? Come guardare in uno specchio?

Sono anche aperto a soluzioni migliori se questo sembra inverosimile.

Tecnologie utilizzate: PHP, Yii, Less.css, jQuery

fonte

2013-01-07 Nathan H

si può provare:

body { 
    direction:rtl; 
}

Ma questo sarebbe solo dare un punto di partenza per iniziare da ...

Spero che sia d'aiuto.

fonte

2013-01-07 09:50:35

Ho appena provato questo. Mette tutto in disordine ... –

Quando possibile, "rtl" dovrebbe essere applicato come attributo HTML e non in CSS: . Inoltre, mentre questo è essenziale, è solo un punto di partenza. –

Molti siti sono costituiti da una barra dei menu e da un'area di contenuto. Queste sono in genere le principali aree di interesse per il flipping. Dovrebbe essere facile con 3 linee di CSS:

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

Questo stesso codice CSS può essere facilmente adattato alle altre aree che devono essere spostati. Non c'è davvero bisogno di mantenere 2 set di template, a meno che non si siano coordinate hardcoded (che comunque era una cattiva idea).

Naturalmente, assicurarsi di impostare <html dir="rtl">

fonte

2013-01-07 09:51:00

aggiungerei anche le classi "rtl" e "ltr" a ciascuna di esse. – albert

E 'possibile capovolgere l'intero sito esattamente come lei con ma poche linee di CSS vede qui: 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"; 
     }

Tuttavia, ci sono alcuni aspetti negativi di questo approccio:

1) Mentre funziona Bene in Firefox + Chrome, è solo ordinabile di opere in IE8 + (il testo sembra molto strano per me in IE) si aspettano sostenere di essere un po 'a macchia di leopardo (questa è una nuova funzionalità CSS3)

2) Ci sono evidenti svantaggi semantici qui

3) Alcune persone sembra avere una cosa sui prefissi dei produttori

In generale, utilizzando RTL sul corpo e utilizzando un foglio di stile diverso potrebbe essere un'alternativa molto migliore qui, anche se è più ingombrante per te, l'utente finale è dotato di un'esperienza migliore (sfortunatamente le correzioni rapide che vogliamo non sono sempre disponibili)

fonte

2013-01-07 11:00:45 Sean

Sembra davvero fantastico! Ma capovolge anche il testo attuale ... –

Puoi correggere il testo capovolto e altri contenuti applicando lo stesso css a 'p'. A condizione che non impili mai i tag 'p', funzionerebbe come un incantesimo. (Molto hacky però;)) –

html { 
    direction:rtl; 
}

In questo modo si inverte tutto sulla pagina da destra a sinistra. Devi aggiustarlo per ogni elemento della tua pagina.

fonte

2013-01-07 11:48:09

Come ho scritto sopra, quando possibile, "rtl" dovrebbe essere applicato come attributo HTML e non in CSS: . Inoltre, mentre questo è essenziale, è solo un punto di partenza. Alcuni progetti mantengono due set di file CSS; altri usano alcuni strumenti automatici per capovolgerli. Ho scritto un esempio da MediaWiki di seguito come risposta. –

In MediaWiki c'è una classe PHP chiamata CSSJanus, che può abilmente capovolgere il CSS al volo per le lingue da destra a sinistra:

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

Questo è usato con successo per Wikipedie a destra a lingue a sinistra e, di conseguenza, richiedono pochissima manutenzione dei CSS.

Un po ', purtroppo, non è attualmente completamente stand-alone, ed è in qualche modo legato in MediaWiki, ma probabilmente si può prendere la roba Mediawiki fuori abbastanza facilmente e riutilizzare nel vostro progetto.

Se si riesce a creare una libreria autonoma fuori di esso, sarebbe bello se si potesse pubblicare su GitHub o qualcosa :)

fonte

2013-01-07 12:16:04

si può capovolgere l'intero sito web utilizzando Seandunwoody la sua risposta, ma che avrebbe invertire il testo e icone e immagini e simili. A condizione che si posiziona il contenuto di  e <h1> 2 e 3 tags, che non mettere le une nelle altre (quindi non ) è possibile applicare il CSS in questo modo:

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

ciò che fa è fondamentalmente la doppio trucco a specchio, rispecchia il sito web completo e quindi rispecchia tutti i piccoli paragrafi e titoli che contengono il testo e le immagini di nuovo all'orientamento originale ma ancora nella posizione del sito Web invertito.

Hacky ma funziona (non così bello su IE però).

* È inoltre necessario aggiungere il dir='rtl' al tag html o body per assicurarsi che il testo viene allineata a destra e l'ebraico è invertito (caratteri inglesi rimarrà sinistra a destra, ma Allinea a destra).

fonte

2016-01-18 09:31:43

CSS rovescia un intero sito Web (effetto specchio)

risposta

Problemi correlati