इनलाइन-आकार - सीएसएस-ट्रिक्स

inline-sizeएक तार्किक गुण है जो एक तत्व की चौड़ाई को परिभाषित करता है जब लेखन-मोड क्षैतिज होता है, या तत्व की ऊंचाई writing-modeऊर्ध्वाधर होती है।

.element ( inline-size: 700px; writing-mode: vertical-lr; )

जैसा कि आप ऊपर के उदाहरण से अनुमान लगा सकते हैं, writing-modeसंपत्ति पाठ के उन्मुखीकरण और लेआउट के प्रवाह को 90 डिग्री से बदल देती है। दो मुख्य कारण हैं कि आप ऐसा क्यों करना चाहते हैं।

सबसे पहले, एक डिजाइन विकल्प के रूप में, आप एक तत्व पर ऊर्ध्वाधर पाठ प्रदर्शित करना चाह सकते हैं, हेडर कहते हैं:

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

जेन सीमन्स के पास एक लेख और प्रस्तुति है जो सीएसएस लेखन मोड में गहराई से जाती है।

हम सिर्फ 'ol भरोसेमंद widthसंपत्ति का उपयोग क्यों नहीं कर सकते ?

आप ऐसा कर सकते हैं! हालाँकि, inline-sizeयदि आप किसी उपयोगकर्ता की भाषा के आधार पर अपनी सामग्री बदलने के संदर्भ के बारे में चिंतित हैं, तो आप इसके बजाय पहुँच सकते हैं । widthएक भौतिक आयाम है, इसलिए जब लेखन मोड बदलता है, तो एक तत्व अपने क्षैतिज चौड़ाई के आकार को बनाए रखता है, एक लेआउट को तोड़ता है जब इसे लंबवत स्थापित किया जाता है। तार्किक गुण, जैसे inline-size, उन परिवर्तनों का जवाब दे सकते हैं और उचित दिशा में चौड़ाई लागू कर सकते हैं।

उदाहरण के लिए, यदि कोई अनुच्छेद तत्व चौड़ाई का उपयोग करके 400px चौड़ा है, जब लेखन मोड सेट किया जाता है vertical-lr, तो सामग्री लेआउट को बदल देगी, लेकिन वह पैराग्राफ 400px लंबा होने के बजाय 400px चौड़ा रहेगा।

देखना है कि? अच्छा, inline-sizeहोशियार है! यह writing-modeमूल्य के आधार पर चौड़ाई से ऊंचाई तक बदलता है ।

वाक्य - विन्यास

inline-size: 

• प्रारंभिक: auto
• इस पर लागू होता है: के रूप में ही heightऔरwidth
• इन्हेरिट किया: नहीं
• प्रतिशत: इसी भौतिक संपत्ति के लिए
• संगणित मूल्य: के रूप में ही heightऔरwidth
• एनीमेशन प्रकार: गणना मूल्य प्रकार से

मूल्यों

/* Length values */ inline-size: 250px; inline-size: 5rem; 
 /* Percentage values */ inline-size: 75%; 
 /* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content; 
 /* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; 

• auto: तत्व की इनलाइन का आकार उसके मूल तत्व के आकार का पालन करेगा।
• fit-content(): यह फ़ंक्शन एक कंटेनर को एक वांछित आकार तक बढ़ने की अनुमति देता है, फिर सामग्री को प्रभावी ढंग से प्रदान करने के लिए टेक्स्ट रैप बनाते हैं, सामग्री को प्रभावी ढंग से प्रदान करते हैं। यह ग्रिड कंटेनरों पर इस्तेमाल किया जा सकता है, साथ ही साथ बॉक्स साइजिंग, और जबकि कैन्य्यूज़ इनलाइन-आकार के साथ फ़ंक्शन के लिए मजबूत समर्थन दिखाता है, हमारा परीक्षण कम निर्णायक था। यह बॉक्स साइजिंग मॉड्यूल लेवल 3 स्पेक की वर्किंग ड्राफ्ट स्थिति के कारण हो सकता है।
• max-content: आंतरिक पसंदीदा चौड़ाई, जिसका अर्थ है कि तत्व पाठ को तब तक खींचता है जब तक वह संभवतः हो सकता है और बॉक्स को पाठ के रूप में लंबे समय तक बना देगा।
• min-content: आंतरिक न्यूनतम चौड़ाई, जिसका अर्थ है कि तत्व का बॉक्स इसकी सामग्री के न्यूनतम आकार तक कम हो जाता है। बॉक्स पाठ के सबसे बड़े स्ट्रिंग के आकार का होगा।

डेमो

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

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	79+	41+	५ 57	12.1+	44+

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मोबाइल
85+	79+	81+	12.2+	59+ है

ध्यान दें कि निम्नलिखित कार्यों का उपयोग करने के लिए समर्थन संपत्ति के समर्थन से भिन्न हो सकता है:

• fit-content()
• max-content()
• min-content()

अधिक जानकारी

• सीएसएस तार्किक गुण और मूल्य स्तर 1 विनिर्देश (संपादक का मसौदा)
• MDN प्रलेखन
• सीएसएस तार्किक गुण `(सीएसएस-ट्रिक्स)
• लॉजिकल प्रॉपर्टीज़ एंड वैल्यूज़ (स्मैशिंग मैगज़ीन) को समझना
• सीएसएस तार्किक गुण (एड्रियन रोजेली)
• सीएसएस ग्रिड में न्यूनतम और अधिकतम सामग्री आकार देना (जेन सिमंस, वीडियो)
• CSS (हुसैन अल हम्माद) में अप्रत्यक्ष क्षैतिज नियम