फ़्लो-रिलेटिव शॉर्टहैंड की मदद से, लॉजिकल लेआउट को बेहतर बनाना

Chromium के लिए, नई लॉजिकल प्रॉपर्टी के शॉर्टहैंड और नई इनसेट प्रॉपर्टी.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Chromium 69 (3 सितंबर, 2018) के बाद से, लॉजिकल प्रॉपर्टी और वैल्यू की मदद से, डेवलपर अपने इंटरनैशनल लेआउट को कंट्रोल कर पा रहे हैं. इसके लिए, वे डाइमेंशन स्टाइल और डायरेक्शन के बजाय लॉजिकल स्टाइल का इस्तेमाल कर रहे हैं. Chromium 87 में, शॉर्टहैंड और ऑफ़सेट भेज दिए गए हैं, ताकि इन लॉजिकल प्रॉपर्टी और वैल्यू को लिखना थोड़ा आसान हो गया हो. इससे Chromium, Firefox के बराबर हो जाता है. Firefox में, 66 वर्शन से शॉर्टहैंड का इस्तेमाल किया जा सकता है. Safari में, टेक्नोलॉजी की झलक में ये सुविधाएं पहले से मौजूद हैं.

डिवाइस फ़्रेम में, प्लेसहोल्डर टेक्स्ट को लैटिन, हिब्रू, और जैपनीज़ भाषा में रेंडर किया गया है. ब्लॉक और इनलाइन, दोनों डायरेक्शन को जोड़ने में मदद करने के लिए, टेक्स्ट के साथ ऐरो और रंग दिखते हैं.

दस्तावेज़ का फ़्लो

अगर आपको लॉजिकल प्रॉपर्टी, इनलाइन, और ब्लॉक ऐक्सिस के बारे में पहले से पता है और आपको इनके बारे में फिर से जानकारी नहीं चाहिए, तो आगे बढ़ें. अगर आपको इस बारे में ज़्यादा जानकारी चाहिए, तो यहां कुछ जानकारी दी गई है.

अंग्रेज़ी में, अक्षर और शब्द बाएं से दाएं चलते हैं, जबकि पैराग्राफ़ ऊपर से नीचे स्टैक किए जाते हैं. ट्रेडिशनल चाइनीज़ में, अक्षर और शब्द ऊपर से नीचे की ओर लिखे जाते हैं. वहीं, पैराग्राफ़ दाईं से बाईं ओर स्टैक किए जाते हैं. सिर्फ़ इन दो मामलों में, अगर हम किसी पैराग्राफ़ में "मार्जिन को सबसे ऊपर" रखने वाला सीएसएस लिखते हैं, तो हम भाषा की सिर्फ़ एक स्टाइल को सही तरीके से स्पेस देते हैं. अगर पेज का अंग्रेज़ी से ट्रेडिशनल चाइनीज़ में अनुवाद किया गया है, तो हो सकता है कि नए वर्टिकल राइटिंग मोड में मार्जिन का कोई मतलब न निकले.

इसलिए, बॉक्स के फ़िज़िकल साइड का इस्तेमाल अंतरराष्ट्रीय स्तर पर ज़्यादा नहीं किया जाता. इस तरह, कई भाषाओं के साथ काम करने की प्रोसेस शुरू होती है. इसमें बॉक्स मॉडल के फ़िज़िकल और लॉजिकल साइड के बारे में जानकारी मिलती है.

क्या आपने कभी Chrome DevTools में p एलिमेंट की जांच की है? अगर ऐसा है, तो शायद आपने देखा होगा कि उपयोगकर्ता एजेंट की डिफ़ॉल्ट स्टाइल, फ़िज़िकल नहीं, बल्कि लॉजिकल है.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Chromium की उपयोगकर्ता एजेंट स्टाइलशीट से ली गई सीएसएस

मार्जिन, अंग्रेज़ी के पाठक के हिसाब से, सबसे ऊपर या सबसे नीचे नहीं होता. यह block-start और block-end है! ये लॉजिकल प्रॉपर्टी, अंग्रेज़ी रीडर के लिए ऊपर और नीचे की तरह ही होती हैं. हालांकि, ये जैपनीज़ रीडर के लिए दाएं और बाएं की तरह भी होती हैं. एक बार लिखने पर, हर जगह काम करता है.

नॉर्मल फ़्लो तब होता है, जब वेबपेज जान-बूझकर इस एक से ज़्यादा दिशाओं का हिस्सा हो. जब दस्तावेज़ के डायरेक्शन में हुए बदलावों के हिसाब से पेज का कॉन्टेंट अपडेट होता है, तो लेआउट और उसके एलिमेंट को फ़्लो में माना जाता है. MDN या सीएसएस डिसप्ले मॉड्यूल स्पेसिफ़िकेशन पर, फ़्लो में "इन" और "आउट" के बारे में ज़्यादा पढ़ें. हालांकि, लॉजिकल प्रॉपर्टी को फ़्लो में होने की ज़रूरत नहीं है, लेकिन दिशा बदलने पर वे आपके लिए ज़्यादातर काम करती हैं. फ़्लो से दिशा का पता चलता है. यह भी पता चलता है कि किन अक्षरों, शब्दों, और कॉन्टेंट को किस दिशा में ले जाना है. इससे हमें लॉजिकल निर्देशों को ब्लॉक करने और इनलाइन करने में मदद मिलती है.

ब्लॉक डायरेक्शन वह दिशा है जिसका पालन नए कॉन्टेंट ब्लॉक करते हैं. जैसे, अपने आप से पूछना कि "अगला पैराग्राफ कहां रखना है?". आप इसे "कॉन्टेंट ब्लॉक" या "टेक्स्ट का ब्लॉक" मान सकते हैं. हर भाषा अपने ब्लॉक को व्यवस्थित करती है और उन्हें अपने block-axis के हिसाब से क्रम में लगाती है. block-start वह हिस्सा है जिसकी तरफ़ पैराग्राफ़ पहले रखा जाता है. जबकि block-end साइड में मौजूद नए पैराग्राफ़ की तरफ़ होता है.

उदाहरण के लिए, पारंपरिक जैपनीज़ हैंडराइटिंग में, ब्लॉक की दिशा दाएं से बाएं होती है:

इनलाइन दिशा से यह पता चलता है कि अक्षर और शब्द किस दिशा में हैं. लिखते समय, अपने हाथ और बांह की दिशा को ध्यान में रखें, वे inline-axis के साथ-साथ चल रही हैं. inline-start वह हिस्सा है जहां से लिखना शुरू किया जाता है. वहीं, inline-end वह हिस्सा है जहां लिखना खत्म होता है या आखिर में कुछ लिखा जाता है. ऊपर दिए गए वीडियो में, inline-axis सबसे ऊपर से नीचे की ओर है, लेकिन अगले वीडियो में inline-axis दाईं से बाईं ओर बह रहा है.

flow-relative होने का मतलब है कि किसी एक भाषा के लिए लिखी गई स्टाइल, कॉन्टेक्स्ट के हिसाब से होनी चाहिए. साथ ही, दूसरी भाषाओं में भी सही तरीके से लागू होंगी. कॉन्टेंट उस भाषा के हिसाब से फ़्लो करेगा जिसके लिए उसे डिलीवर किया जा रहा है.

नए शॉर्टहैंड

यहां दिए गए कुछ शॉर्टहैंड, ब्राउज़र के लिए नई सुविधाएं नहीं हैं. ये स्टाइल लिखने के आसान तरीके हैं. इनकी मदद से, एक साथ ब्लॉक या इनलाइन, दोनों एज पर वैल्यू सेट की जा सकती हैं. inset-* लॉजिकल प्रॉपर्टी से नई सुविधाएं मिलती हैं, क्योंकि इससे पहले लॉजिकल प्रॉपर्टी की मदद से, सटीक पोज़िशन तय करने के लिए, लंबे तरीके का इस्तेमाल करना पड़ता था. हालांकि, मैं आपको Chromium 87 में एक साथ लैंडिंग होने वाली सभी नई लॉजिकल प्रॉपर्टी के बारे में बताऊंगी.

मार्जिन शॉर्टहैंड

इसमें कोई नई सुविधा नहीं जोड़ी गई है. हालांकि, इसमें कुछ बहुत काम के शॉर्टहैंड जोड़े गए हैं:
margin-block और margin-inline.

लंबी अवधि
margin-block-start: 2ch;
margin-block-end: 2ch;
नया शॉर्टहैंड
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

"ऊपर और नीचे" या "बाईं और दाईं" के लिए कोई शॉर्टहैंड नहीं है… अब तक! आपने शायद margin: 10px; के शॉर्टहैंड का इस्तेमाल करके चारों पक्षों का रेफ़रंस दिया हो. साथ ही, अब लॉजिकल प्रॉपर्टी शॉर्टहैंड का इस्तेमाल करके, आसानी से दोनों तरफ़ के दो मिलते-जुलते हिस्से दिखाए जा सकते हैं.

लंबी अवधि
margin-inline-start: 4ch;
margin-inline-end: 2ch;
नया शॉर्टहैंड
margin-inline: 4ch 2ch;

पैडिंग के शॉर्टहैंड

इसमें कोई नई सुविधा नहीं जोड़ी गई है. हालांकि, इसमें शॉर्टहैंड के ज़्यादा विकल्प जोड़े गए हैं:
padding-block और padding-inline.


लंबी अवधि
padding-block-start: 2ch;
padding-block-end: 2ch;
नया शॉर्टहैंड
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

साथ ही, inline शॉर्टहैंड का मुफ़्त सेट:

लंबी अवधि
padding-inline-start: 4ch;
padding-inline-end: 2ch;
नया शॉर्टहैंड
padding-inline: 4ch 2ch;

इनसेट और शॉर्टहैंड

फ़िज़िकल प्रॉपर्टी top, right, bottom, और left को inset प्रॉपर्टी की वैल्यू के तौर पर लिखा जा सकता है. position की किसी भी वैल्यू के लिए, इनसेट के साथ साइड सेट करने से फ़ायदा मिल सकता है.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}


शारीरिक लॉन्गहैंड
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
फ़िज़िकल शॉर्टहैंड के लिए नया वर्शन
position: absolute;
inset: 1px 2px 3px 4px;

आपको तुरंत ही यह सुविधा दिखने लगेगी! इनसेट, फ़िज़िकल साइड का शॉर्टहैंड है. यह मार्जिन और पैडिंग की तरह काम करता है.

नई सुविधाएं

फ़िज़िकल साइड शॉर्टहैंड की सुविधा जितनी दिलचस्प है, उतनी ही दिलचस्प inset शॉर्टहैंड की लॉजिकल सुविधाएं भी हैं. इन शॉर्टहैंड से, डेवलपर को कॉन्टेंट लिखने में आसानी होती है (ये लिखने में छोटे होते हैं). साथ ही, इनसे लेआउट की पहुंच भी बढ़ जाती है, क्योंकि ये फ़्लो-रिलेटिव हैं.

फ़िज़िकल लॉन्गहैंड
position: absolute;
top: 10px;
bottom: 10px;
लॉजिकल शॉर्टहैंड
position: absolute;
inset-block: 10px;


फ़िज़िकल लॉन्गहैंड
position: absolute;
left: 10px;
right: 20px;
लॉजिकल शॉर्टहैंड
position: absolute;
inset-inline: 10px 20px;

इसके अलावा, इनसेट शॉर्टहैंड और लॉन्गहैंड की पूरी सूची एमडीएन पर उपलब्ध है.

बॉर्डर के लिए शॉर्टहैंड

बॉर्डर, साथ ही इसके नेस्ट किए गए color, style, और width प्रॉपर्टी में नए लॉजिकल शॉर्टहैंड भी हैं.


फ़िज़िकल लॉन्गहैंड
border-top-color: hotpink;
border-bottom-color: hotpink;
लॉजिकल शॉर्टहैंड
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


फ़िज़िकल लॉन्गहैंड
border-left-style: dashed;
border-right-style: dashed;
लॉजिकल शॉर्टहैंड
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


फ़िज़िकल लॉन्गहैंड
border-left-width: 1px;
border-right-width: 1px;
लॉजिकल शॉर्टहैंड
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

ज़्यादा जानकारी और बॉर्डर के शॉर्टहैंड और लॉन्गहैंड की पूरी सूची, MDN पर उपलब्ध है.

लॉजिकल प्रॉपर्टी <figure> का उदाहरण

आइए, एक छोटे उदाहरण के ज़रिए इसे समझते हैं. अलग-अलग तरह के लेखन और दस्तावेज़ के निर्देशों को मैनेज करने के लिए, लॉजिकल प्रॉपर्टी, कैप्शन के साथ इमेज को लेआउट कर सकती हैं.

या इसे आज़माएं!

<figure> और कुछ लॉजिकल प्रॉपर्टी की मदद से, कार्ड को दुनिया भर में काम करने लायक बनाने के लिए आपको ज़्यादा कुछ करने की ज़रूरत नहीं है. अगर आपको यह जानना है कि दुनिया भर में काम करने वाली ये सभी सीएसएस, एक साथ कैसे काम करती हैं, तो उम्मीद है कि यह जानकारी आपके लिए मददगार होगी.

पॉलीफ़िल और अलग-अलग ब्राउज़र पर काम करने की सुविधा

कैस्केड या बिल्ड टूल, पुराने और नए ब्राउज़र को एक जैसे रखने के लिए सही विकल्प हैं. साथ ही, ये अपडेट की गई लॉजिकल प्रॉपर्टी के साथ सही जगह पर स्पेस देते हैं. कैस्केड फ़ॉलबैक के लिए, किसी फ़िज़िकल प्रॉपर्टी के बाद लॉजिकल प्रॉपर्टी का इस्तेमाल करें. ऐसा करने पर, ब्राउज़र स्टाइल रिज़ॉल्यूशन के दौरान मिली "आखिरी" प्रॉपर्टी का इस्तेमाल करेगा.

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

हालांकि, यह सभी के लिए पूरी तरह से सही समाधान नहीं है. यहां हाथ से लिखा गया फ़ॉलबैक दिया गया है, जो खास भाषाओं को टारगेट करने के लिए, :lang() pseudo-selector का इस्तेमाल करता है. साथ ही, इसकी फ़िज़िकल स्पेसिंग को सही तरीके से अडजस्ट करता है. इसके बाद, आखिर में यह काम करने वाले ब्राउज़र के लिए सही स्पेस देता है:

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

@supports का इस्तेमाल करके यह भी तय किया जा सकता है कि फ़िज़िकल प्रॉपर्टी के फ़ॉलबैक उपलब्ध कराने हैं या नहीं:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emotion वगैरह में, अपने-आप काम करने वाले बंडलर और/या बिल्ड के समय मिलने वाले ऑफ़र होते हैं. इनमें फ़ॉलबैक या समाधानों की एक बड़ी सूची होती है. हर एक को देखें और पता लगाएं कि कौनसा टूल आपके टूलचेन और साइट की पूरी रणनीति से मैच करता है.

आगे क्या करना है

सीएसएस में और भी लॉजिकल प्रॉपर्टी उपलब्ध होंगी. हालांकि, अभी ऐसा नहीं किया गया है! हालांकि, शॉर्टहैंड का एक बड़ा सेट मौजूद नहीं है. इस GitHub समस्या को अब भी हल नहीं किया गया है. ड्राफ़्ट में, कुछ समय के लिए समस्या हल करने का एक तरीका है. क्या होगा अगर आप बॉक्स के सभी तार्किक किनारों को शॉर्टहैंड से स्टाइल करना चाहें?

फ़िज़िकल शॉर्टहैंड
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
लॉजिकल शॉर्टहैंड
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

मौजूदा ड्राफ़्ट के प्रस्ताव का मतलब है कि लॉजिकल समतुल्य लागू करने के लिए, आपको हर शॉर्टहैंड में logical लिखना होगा. यह कुछ लोगों को DRY नहीं लगता.

इसे ब्लॉक या पेज लेवल पर बदलने के लिए, और भी सुझाव हैं. हालांकि, इससे स्टाइल में लॉजिकल इस्तेमाल लीक हो सकते हैं, जो अब भी फ़िज़िकल साइड मानते हैं.

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

यह मुश्किल जवाब है! अपना वोट डालें, अपनी राय दें. हमें आपके सुझाव, शिकायत या राय जानने में खुशी होगी.

क्या आपको लॉजिकल प्रॉपर्टी के बारे में ज़्यादा जानना है या उनकी स्टडी करनी है? MDN पर, गाइड और उदाहरणों के साथ ज़्यादा जानकारी वाला रेफ़रंस यहां दिया गया है 🤓

सुझाव/राय दें या शिकायत करें

  • फ़्लो के हिसाब से शॉर्टहैंड के सीएसएस सिंटैक्स में बदलाव करने का सुझाव देने के लिए, पहले csswg-drafts रिपॉज़िटरी पर मौजूदा समस्याओं की जांच करें. अगर कोई भी मौजूदा समस्या आपके प्रस्ताव से मेल नहीं खाती है, तो नई समस्या बनाएं.
  • फ़्लो के हिसाब से शॉर्टहैंड लागू करने के लिए, Chromium में मौजूद गड़बड़ियों की शिकायत करने के लिए, सबसे पहले Chromium के गड़बड़ी ट्रैकर पर मौजूदा समस्याओं की जांच करें. अगर कोई भी मौजूदा समस्या आपके गड़बड़ी से मेल नहीं खाती है, तो नई समस्या बनाएं.