दिशा - सीएसएस-ट्रिक्स

directionसीएसएस में संपत्ति एक ब्लॉक स्तर तत्व के भीतर सामग्री के प्रवाह के की दिशा तय करता है। यह पाठ, इनलाइन और इनलाइन-ब्लॉक तत्वों पर लागू होता है। यह पाठ के डिफ़ॉल्ट संरेखण को भी निर्धारित करता है और दिशा जो तालिका कोशिकाएं एक तालिका पंक्ति के भीतर प्रवाहित होती हैं।

.main-content ( direction: rtl; /* Right to Left */ )

मान्य मान हैं:

• ltr - बाएँ से दाएँ, डिफ़ॉल्ट
• rtl - दाएं से बाएं
• inherit - मूल तत्व से इसका मूल्य विरासत में मिला है

इस पृष्ठ का पाठ डिफ़ॉल्ट ltrदिशा में सेट है । सेट करने के लिए सबसे आम उपयोग मामला rtlहिब्रू या अरबी पाठ के साथ वेब पृष्ठों के लिए है। यहाँ rtl में अरबी सेट का एक उदाहरण दिया गया है:

طهيس يس تآخت تهات يس وريتتآن فروم ري ت تو لآفت تهات يس وسآد

दिशा निर्धारित करने के लिए HTML विशेषता भी है:

सीएसएस संपत्ति और एचटीएमएल विशेषता दोनों अवरोही तत्वों की दिशा का संकेत देगी। यह अनुशंसा की जाती है कि आप HTML विशेषता का उपयोग करें, क्योंकि सीएसएस विफल होने या किसी भी कारण से पृष्ठ को प्रभावित नहीं करने पर भी यह काम करेगा।

एक विशिष्ट HTML टैग भी है जिसका उपयोग पाठ की दिशा बदलने के लिए किया जा सकता है: द्विदिश ओवरराइड तत्व। यह मौजूद है इसलिए केवल इस उद्देश्य के लिए उपयोग करने के लिए एक शब्दार्थ-मुक्त तत्व है। उदाहरण के लिए:

This text will go left to right. This text will go right to left.

सीएसएस के साथ यह सब करने के लिए…

*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )

"बीड़ी" = "द्वि-दिशात्मक"

प्री-फ्लेक्सबॉक्स प्री-ग्रिड दुनिया में लेआउट बनाते समय, लोगों ने अक्सर कॉलम बनाने के लिए फ्लोट्स और इनलाइन-ब्लॉक के बीच चुना। इनलाइन-ब्लॉक का एक फायदा, फ्लोट को साफ करने की आवश्यकता को हटाने के अलावा, यह है कि दिशा संपत्ति बदलने से लेआउट भी उलट हो जाता है। यह फ़्लोट्स के लिए सही नहीं है, जिसे वेबपृष्ठ कई भाषाओं का समर्थन करता है और यदि ltr से rtl या इसके विपरीत में परिवर्तित की गई भाषा दिशा का समर्थन करता है, तो इसे रीसेट करने की आवश्यकता होगी।

यदि आपको इनलाइन तत्व की दिशा बदलने की आवश्यकता है (इसके मूल ब्लॉक स्तर तत्व के विरुद्ध), तो आपको तत्व का उपयोग करने की आवश्यकता होगी, या यह सुनिश्चित करना होगा कि इनलाइन तत्व यूनिकोड-बीड़ी संपत्ति को ठीक से सेट करता है:

Some regular text reverse direction text text reverse direction

span(dir) ( unicode-bidi: bidi-override; )

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
2.0+ है	1.3+ है	कोई	9.2+	5.5+ है	कोई	3.1+