सीएसएस एक पूरी वेबसाइट (दर्पण प्रभाव) रिवर्स

मैं एक बहुभाषी वेबसाइट बना रहा हूं। कुछ भाषाएं (जैसे हिब्रू) दाएं से बाएं से पढ़ी जाती हैं। वास्तविक पाठ के अलावा, उन उपयोगकर्ताओं का उपयोग नेविगेशन और अन्य दृश्य सुरागों को उलट करने के लिए किया जाता है।सीएसएस एक पूरी वेबसाइट (दर्पण प्रभाव) रिवर्स

उदाहरण के लिए शीर्ष पर मुख्य मेनू दाईं ओर गठबंधन किया जाएगा। "बैक" बटन आगे बढ़ेगा, शीर्ष बाएं के बजाए ऊपरी दाएं लोगो पर इत्यादि।

एक समाधान बिल्कुल नया डिज़ाइन बनाने के लिए है, हालांकि इसका मतलब यह होगा कि मुझे 2 टेम्पलेट्स बनाए रखना होगा। आदर्श नहीं।

मैं बस सोच रहा था, क्या पूरे डिजाइन को सीएसएस में फ़्लिप करना संभव होगा? दर्पण में दिखने की तरह?

यदि यह बहुत दूर लगता है तो बेहतर समाधान के लिए भी खोला गया है।

टेक्नोलॉजीज का प्रयोग किया: पीएचपी, Yii, Less.css, jQuery

स्रोत

2013-01-07 Nathan H

आप कोशिश कर सकते हैं:

body { 
    direction:rtl; 
}

लेकिन वह केवल आपके एक प्रारंभिक बिंदु से शुरू करने के लिए देना होगा ...

आशा करता हूँ की ये काम करेगा।

स्रोत

2013-01-07 09:50:35

मैंने अभी कोशिश की है। यह सब कुछ गड़बड़ करता है ... –

जब भी संभव हो, "आरटीएल" को HTML विशेषता के रूप में लागू किया जाना चाहिए और सीएसएस में नहीं: । इसके अलावा, यह आवश्यक है, यह सिर्फ एक शुरुआती बिंदु है। –

कई साइटों में मेनू बार और सामग्री क्षेत्र शामिल है। ये आमतौर पर फ़्लिपिंग के लिए फोकस के मुख्य क्षेत्र होते हैं।

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

यह वही सीएसएस कोड को आसानी से अन्य क्षेत्रों है कि ले जाया जाना चाहिए मैच के लिए अनुकूलित किया जा सकता: सीएसएस के 3 लाइनों के साथ आसान होना चाहिए। टेम्पलेट्स के 2 सेट बनाए रखने की वास्तव में कोई ज़रूरत नहीं है, जब तक कि आप निर्देशांक को हार्डकोड नहीं करते (जो वैसे भी एक बुरा विचार था)।

बेशक

, यकीन है कि स्थापित करने के लिए <html dir="rtl">

स्रोत

2013-01-07 09:51:00

मैं प्रत्येक पर कक्षाएं "आरटीएल" और "एलटीआर" भी जोड़ूंगा। – albert

यह रूप में आप के साथ वर्णन लेकिन सीएसएस की कुछ लाइनें यहाँ देख वास्तव में पूरी साइट फ्लिप करने के लिए संभव है बनाने: http://jsbin.com/aduqeq/5/edit

सीएसएस:

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) हालांकि यह फ़ायरफ़ॉक्स + क्रोम में ठीक काम करता है, यह केवल सॉर्ट करता है IE8 + में काम करता है (पाठ मुझे IE में करने के लिए बहुत ही अजीब लग रहा है) उम्मीद थोड़ा विचित्र होने के लिए समर्थन की

2) स्पष्ट अर्थ नुकसान यहाँ हैं

3) कुछ लोगों को (यह एक नया CSS3 सुविधा है) प्रतीत होता है कि विक्रेता उपसर्ग

कुल मिलाकर शरीर पर आरटीएल का उपयोग करके और एक अलग स्टाइलशीट का उपयोग करके यहां एक बेहतर विकल्प हो सकता है, यहां तक कि सोचा कि यह आपके लिए अधिक बोझिल है, अंतिम उपयोगकर्ता को बेहतर अनुभव प्रदान किया जाता है (दुर्भाग्य से हम जो त्वरित सुधार चाहते हैं वह हमेशा उपलब्ध नहीं होते हैं)

स्रोत

2013-01-07 11:00:45 Sean

यह वास्तव में अच्छा लग रहा है! लेकिन यह वास्तविक पाठ भी फ़्लिप करता है ... –

आप उसी सीएसएस को 'पी' पर लागू करके फ़्लिप किए गए टेक्स्ट और अन्य सामग्री को ठीक कर सकते हैं। बशर्ते कि आपने कभी भी 'पी' टैग को ढेर नहीं किया है, यह एक आकर्षण की तरह काम करेगा। (बहुत hacky हालांकि;)) –

html { 
    direction:rtl; 
}

यह पृष्ठ पर सब कुछ ठीक से बाएं से उलट देगा। आपको इसे अपने पृष्ठ के प्रत्येक तत्व के लिए समायोजित करने की आवश्यकता है।

स्रोत

2013-01-07 11:48:09

जैसा कि मैंने ऊपर लिखा है, जब भी संभव हो, "rtl" एक HTML विशेषता के रूप में सीएसएस में लागू किया जाना चाहिए और नहीं: । इसके अलावा, यह आवश्यक है, यह सिर्फ एक शुरुआती बिंदु है। कुछ परियोजनाएं सीएसएस फाइलों के दो सेट बनाए रखती हैं; अन्य उन्हें फ़्लिप करने के लिए कुछ स्वचालित उपकरण का उपयोग करते हैं। मैंने नीचे मीडियाविकि से एक जवाब के रूप में एक उदाहरण लिखा था। –

मीडियाविकि में वहाँ एक PHP वर्ग CSSJanus कहा जाता है, जो चतुराई से दाएँ-से-बाएं भाषाओं के लिए तेज़ी से अपने सीएसएस फ्लिप कर सकते हैं:

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

यह सफलतापूर्वक राइट हैं- में विकिपीडियाओं के लिए प्रयोग किया जाता है बाएं भाषाएं, और नतीजतन उन्हें सीएसएस के बहुत कम डुप्लिकेट रखरखाव की आवश्यकता होती है।

कुछ हद तक दुर्भाग्य से, यह वर्तमान में पूरी तरह से अकेले नहीं है, और कुछ हद तक मीडियाविकि में बंधे हैं, लेकिन आप शायद मीडियाविकी सामान को आसानी से ले सकते हैं और इसे अपने प्रोजेक्ट में फिर से उपयोग कर सकते हैं।

आप इससे बाहर एक स्टैंड-अलोन पुस्तकालय बनाने के लिए प्रबंधन करते हैं, यह अच्छा होगा अगर आप GitHub या कुछ और पर प्रकाशित कर सकता है :)

स्रोत

2013-01-07 12:16:04

आप Seandunwoody उसके जवाब का उपयोग कर पूरी वेबसाइट फ्लिप कर सकते हैं लेकिन यह है कि होगा टेक्स्ट और आइकन और छवियों को उलट दें और साथ ही साथ। बशर्ते कि आप  में अपनी सामग्री जगह है और <h1> 2 और 3 टैग, जो आप एक दूसरे में डाल नहीं है (ताकि कोई ) आप इस तरह सीएसएस लागू कर सकते हैं:

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

यह क्या करता है मूल रूप से है डबल मिरर चाल, यह पूरी वेबसाइट को प्रतिबिंबित करती है और फिर यह सभी छोटे अनुच्छेदों और खिताबों को प्रतिबिंबित करती है जिनमें आपके टेक्स्ट और छवियां मूल अभिविन्यास पर वापस आती हैं लेकिन फिर भी उल्टा वेबसाइट की स्थिति में होती हैं।

हैकी लेकिन यह काम करता है (हालांकि आईई पर इतना अच्छा नहीं है)।

* आप भी dir='rtl'html या body टैग को जोड़ने के लिए सुनिश्चित करें कि पाठ सही करने के लिए alligned है और हिब्रू उलट है बनाना (अंग्रेजी वर्ण बाएं से दाएं रहेगी लेकिन सही पंक्ति) की जरूरत है।

स्रोत

2016-01-18 09:31:43

सीएसएस एक पूरी वेबसाइट (दर्पण प्रभाव) रिवर्स

उत्तर

संबंधित मुद्दे