CSS bir web sitesini tersine çevir (ayna efekti)

Çok dilli bir web sitesi yapıyorum. Bazı diller (İbranice gibi) sağdan sola doğru okunur. Asıl metnin yanı sıra, bu kullanıcılar navigasyona ve diğer görsel ipuçlarına sahip olmak için kullanılır. Örneğin, üstteki ana menü sağa hizalanacaktır. "geri" tuşu, üst sol yerine sağ üst köşedeki logoyu işaret eder vb.CSS bir web sitesini tersine çevir (ayna efekti)

Tek bir çözüm elbette yepyeni bir tasarım oluşturmaktır, ancak bu 2 şablonu korumak zorunda kalmam anlamına gelir. Uygun değil.

Sadece düşünüyorum, tüm tasarımı CSS'de çevirmek mümkün olabilir mi? Aynaya bakmak gibi mi?

Ayrıca, bu çok uzak görünüyorsa daha iyi çözümlere açıldım. kullanılan

Teknolojileri: PHP, Yii, Less.css, jQuery

kaynak

2013-01-07 Nathan H

Deneyebilirsin: ...

body { 
    direction:rtl; 
}

Ama bu sadece size başlamak için bir başlangıç noktası verecekti

Umarım yardımcı olur.

kaynak

2013-01-07 09:50:35

Bunu denedim. Her şey karışır ... –

Mümkün olduğunda, "rtl", CSS'de olmayan bir HTML özelliği olarak uygulanmalıdır: . Ayrıca, bu gerekli olsa da, sadece bir başlangıç noktasıdır. –

Birçok site bir menü çubuğundan ve bir içerik alanından oluşur. Bunlar genellikle saygısızlık için ana odak alanlarıdır.

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

Bu aynı CSS kodu kolayca hareket ettirilmelidir diğer alanları maç için adapte edilebilir: CSS 3 çizgilerle kolay olmalıdır. Koordinatları kodladığınız sürece (ki bu zaten kötü bir fikirdi) 2 set şablonunu korumanıza gerek yok. Tabii

, emin ile tarif ama CSS birkaç satır burada gördüğünüz gibi Tam tüm siteyi çevirmek mümkündür <html dir="rtl">

kaynak

2013-01-07 09:51:00

Her birinde de "rtl" ve "ltr" sınıfları ekleyebilirim. – albert

saðlar: 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"; 
     }

Bu yaklaşımın bazı olumsuzlukları vardır:

1) Firefox + Chrome'da Fine çalışırken, yalnızca sıralama IE8 + işlerin (metin IE bana çok garip görünüyor) biraz areas olmaya desteklemek bekliyoruz arasında

2) bariz anlamsal dezavantajlar burada

3 Var) Bazı insanlar (bu yeni CSS3 özelliğidir) Satıcı önekleri hakkında bir şey var gibi görünüyor

Vücutta RTL kullanarak ve farklı bir stil sayfası kullanarak genel olarak daha iyi bir alternatif olabilir, hatta sizin için daha hantal olduğunu düşündüm, son kullanıcı daha iyi bir deneyim ile sağlanır (ne yazık ki) İstediğimiz hızlı düzeltmeler her zaman mevcut değildir)

kaynak

2013-01-07 11:00:45 Sean

Bu gerçekten harika görünüyor! Ama aynı zamanda gerçek metni çevirir ... –

Ters çevrilmiş metni ve diğer içeriği, aynı css'yi "p" ile uygulayarak düzeltebilirsiniz. Asla 'p' etiketlerini yığdırmadığınız takdirde, bir çekicilik gibi çalışırdı. (Çok hacky olsa;)) –

html { 
    direction:rtl; 
}

Bu, sayfadaki her şeyi sağdan sola doğru tersine çevirir. Bunu sayfanızdaki her öğe için ayarlamanız gerekir.

akıllıca sağdan sola diller için anında CSS çevirebilirsiniz CSSJanus denilen bir PHP sınıfı, orada MediaWiki yılında

kaynak

2013-01-07 11:48:09

Yukarıda yazdığım gibi, mümkün olduğunda, "rtl", CSS'de değil, HTML niteliği olarak uygulanmalıdır: . Ayrıca, bu gerekli olsa da, sadece bir başlangıç noktasıdır. Bazı projeler iki set CSS dosyası tutar; diğerleri onları çevirmek için bazı otomatik araçlar kullanırlar. Aşağıda MediaWiki'den bir cevap olarak bir örnek yazdım. –

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

Bu başarıyla sağ-to- Vikipedi'lerin için kullanılır Sol diller ve sonuç olarak CSS'nin çok az yinelenen bakımını gerektirirler.

Maalesef, şu anda tamamen bağımsız değil ve MediaWiki'ye biraz bağlı, ancak Mediawiki konularını oldukça kolay bir şekilde alıp projenizde yeniden kullanabilirsiniz. Eğer bunun dışında tek başına bir kütüphane oluşturmak için yönetiyorsanız

kaynak

2013-01-07 12:16:04

Sen Seandunwoody onun cevabını kullanarak web sitesinin tamamını çevirebilirsiniz :) GitHub'dan falan yayınlamak eğer

, çok güzel olurdu ama bu olur metni, simgeleri ve görüntüleri ve kuyuları ters çevirin. Ne yapar

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

temelde: (bunu hiçbir ) böyle css uygulayabilirsiniz Eğer birbirinin içine koymayın <h1> 2 ve 3 etiketleri,  yılında içeriğiniz ve şartıyla çift ayna hilesi, web sitesinin tamamını yansıtır ve daha sonra metin ve resimlerinizi içeren orijinal kük paragraf ve başlıkları, orijinal yönlendirmeye geri döndürür, ancak tersine çevrilmiş web sitesinin konumuna getirir.

Korsanlık ama işe yarıyor (IE'de çok da güzel değil).

Ayrıca Metnin sağa alligned ve ibranice ters olun (ingilizce karakterler soldan sağa kalacak ama doğru allign) için dir='rtl'html veya body etiketine eklenecek gerek *.

kaynak

2016-01-18 09:31:43

CSS bir web sitesini tersine çevir (ayna efekti)

cevap

İlgili konular