CSS text-box-trim

अपने टेक्स्ट कॉन्टेंट के ऊपर और नीचे से स्पेस हटाएं. इससे, ऑप्टिकल बैलेंस बनता है.

Adam Argyle

पब्लिश होने की तारीख: 14 जनवरी, 2025

Chrome 133 में, text-box की मदद से डेवलपर और डिज़ाइनर, टेक्स्ट के ऊपर और नीचे के स्पेस को अपनी पसंद के मुताबिक बना सकते हैं.

Browser Support

• 133
• 133
• x
• 18.2

लंबी हैंडराइटिंग:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

इस प्रॉपर्टी की मदद से, टेक्स्ट के ऊपर और नीचे मौजूद स्पेस को कंट्रोल किया जा सकता है. जैसे, <h1>, <button>, और <p>. हर फ़ॉन्ट, ब्लॉक डायरेक्शनल स्पेस की अलग-अलग मात्रा पैदा करता है, जो एलिमेंट के साइज़ में योगदान देता है. स्पेस में होने वाले इस तरह के योगदान को आसानी से मेज़र नहीं किया जा सकता. साथ ही, इसे अब तक कंट्रोल करना भी मुमकिन नहीं था.

फ़ॉन्ट को पता है, अब सीएसएस को भी पता है!

https://codepen.io/web-dot-dev/pen/xbKjRxL

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

सोर्स

यह इतिहास इसलिए अहम है, क्योंकि text-box हमें हर हाफ़ के लिए नाम देता है: ओवर और अंडर. साथ ही, उसे ट्रिम करने की सुविधा भी मिलती है.

text-box के लिए भी पहले से मौजूद आर्ट मौजूद है. आपको याद होगा कि एथन वांग ने लीडिंग-ट्रिम: डिजिटल टाइपसेटिंग का फ़्यूचर नाम से एक दिलचस्प पोस्ट लिखी थी. इसमें leading-trim (text-box का पुराना नाम) को पहली बार पेश किया गया था.

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

सोर्स

भले ही, आपने इस पेज पर किसी भी तरह से पहुंची हों, लेकिन टाइपोग्राफ़ी के इस छोटे से कंट्रोल से काफ़ी फ़र्क़ पड़ सकता है.

सुविधा और सिंटैक्स के बारे में खास जानकारी

मेरे हिसाब से, text-box का इस्तेमाल करते समय, आपको ये दो सामान्य एक-लाइनर इस्तेमाल करने होंगे:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

आम तौर पर, इस सुविधा का इस्तेमाल करके दोनों वीडियो को cap alphabetic पर काटा जाता है. यहां दिए गए डेमो में, इस सुविधा का कई बार इस्तेमाल किया गया है. हालांकि, पिछले उदाहरण में ex alphabetic भी दिखता है, क्योंकि यह अपने खास तरीके से ऑप्टिकल बैलेंस के लिए काम का है.

एक्सप्लोरर प्लेलैंड

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

इन तरीकों को आज़माएं:

1. एक लाइन और कई लाइन वाले टेक्स्ट वैरिएंट में, text-box-trim के काम करने का तरीका विज़ुअल तौर पर देखना.
2. किसी वैरिएंट पर कर्सर घुमाकर, उस पर लागू किए गए ट्रिम इफ़ेक्ट के लिए इस्तेमाल की गई वैल्यू देखना.
3. फ़ॉन्ट बदलना.
4. टेक्स्ट बॉक्स के सिर्फ़ एक तरफ़ से काटना.
5. गेम खेलते समय सिंटैक्स की समीक्षा करें.

https://codepen.io/web-dot-dev/pen/RNbyooE

इसकी मदद से क्या बनाया जा सकता है या यह किन समस्याओं को हल करता है?

ट्रिम करने की सुविधा की मदद से, वीडियो को आसानी से बीच में रखना और अलाइन करना होता है. सही लेडिंग के लिए, कॉन्टेंट के बीच gap जैसी वैल्यू का इस्तेमाल किया जा सकता है.

https://codepen.io/web-dot-dev/pen/RNbyoKE

आसानी से बीच में रखना

छोटे, ज़्यादा इनलाइन, और कॉन्टेंट के इंट्रिन्सिक कॉम्पोनेंट के लिए, padding: 10px एक सही स्टाइल है. इससे, एलिमेंट के चारों तरफ़ बराबर स्पेस मिलता है. हालांकि, इससे लोगों को भ्रम हो सकता है, क्योंकि अक्सर इसमें ऊपर और नीचे ज़्यादा जगह होती है.

इस समस्या को हल करने के लिए, डेवलपर अक्सर ऊपर और नीचे (ब्लॉक) पर कम पैडिंग डालते हैं, ताकि आधी लीडिंग के असर को कम किया जा सके.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

इस स्थिति में, हमें वैल्यू के कॉम्बिनेशन आज़माने होते हैं, ताकि चीज़ें ऑप्टिकल तौर पर बीच में आ जाएं. हो सकता है कि यह एक स्क्रीन और ऑपरेटिंग सिस्टम पर अच्छा दिखे, लेकिन दूसरे पर नहीं.

text-box की मदद से, टेक्स्ट से आधा लीडिंग स्पेस काटकर, 10px जैसी बराबर पैडिंग वैल्यू को काम का बनाया जा सकता है:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

https://codepen.io/web-dot-dev/pen/NPKMbgq

ध्यान दें: यहां दिए गए उदाहरणों में, एक सामान्य सैंस-सरफ़़ी फ़ॉन्ट और एक फ़ैंसी या मज़ेदार फ़ॉन्ट का इस्तेमाल किया गया है. एक से ज़्यादा फ़ॉन्ट दिखाने से, `text-box` की डाइनैमिक क्षमताओं और फ़ॉन्ट फ़ैमिली में इसके काम करने के तरीके को समझने में मदद मिलेगी.

यहां कुछ <button> एलिमेंट दिए गए हैं. इनसे पता चलता है कि text-box की मदद से स्पेस को छोटा करने पर, padding: 10px एक इंटरैक्टिव एलिमेंट में सभी तरफ़ बराबर दिखता है. ध्यान दें कि वैकल्पिक फ़ॉन्ट से, हाफ़ लीडिंग स्पेस में काफ़ी ज़्यादा अंतर हो सकता है.

https://codepen.io/web-dot-dev/pen/mybLOMg

यहां <span> एलिमेंट दिए गए हैं. इनका इस्तेमाल, आम तौर पर कैटगरी या बैज दिखाने के लिए किया जाता है. एक और स्थिति, जहां बराबर साइड वाला पैडिंग सबसे अच्छा समाधान होना चाहिए, लेकिन text-box तक हमें इसके लिए काम करना पड़ा.

https://codepen.io/web-dot-dev/pen/mybLOMg

आसानी से अलाइन करना

टेक्स्ट बॉक्स के ऊपर (over) और नीचे (under) अतिरिक्त, कंट्रोल नहीं किया जा सकने वाला, आधा लीडिंग स्पेस भी अलाइनमेंट को मुश्किल बनाता है. नीचे दिए गए उदाहरणों में दिखाया गया है कि आधी लीडिंग से अलाइनमेंट मुश्किल कब हो सकता है. साथ ही, टेक्स्ट बॉक्स के ब्लॉक के किनारों को ट्रिम करके, बेहतर अलाइनमेंट कैसे बनाया जा सकता है.

यहां टेक्स्ट के बगल में एक इमेज दिखाई गई है. इमेज की ऊंचाई, टेक्स्ट के हिसाब से तय होगी. हालांकि, text-box के बिना इमेज हमेशा थोड़ी ज़्यादा ऊंची होती है. text-box का इस्तेमाल करके, इमेज को टेक्स्ट कॉन्टेंट के साथ पूरी तरह से अलाइन किया जा सकता है.

https://codepen.io/web-dot-dev/pen/yyBjVpg

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

नीचे दिए गए उदाहरण में देखें कि writing-mode में हुए बदलाव के हिसाब से, यह सुविधा कैसे अपने-आप बदल जाती है. टेक्स्ट बदलकर देखें कि लेआउट कैसे अलाइन रहता है.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

स्टडी जारी रखना

क्या आपको इसके बारे में ज़्यादा जानना है? यहां दिए गए लिंक की सूची में, ज़्यादा जानकारी और इस्तेमाल के उदाहरण दिए गए हैं.

• https://codepen.io/collection/zxQBaL - ऊपर दिए गए सभी डेमो का Codepen कलेक्शन
• https://github.com/jantimon/text-box-trim-examples - Jan Nicklas की बेहतरीन रिसर्च और डेमो
• https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
• https://drafts.csswg.org/css-inline-3/#text-edges
• इसे size-adjust या ascent-override https://web.dev/articles/css-size-adjust से न जोड़ें
• https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
• https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
• कई एचटीएमएल एलिमेंट पर लागू किया गया https://codepen.io/nileshprajapati/pen/RweKdmw
• Safari की ब्लॉग पोस्ट https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
• https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/