CSS text-box-trim

Adam Argyle

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

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

हाथ से लिखा गया:

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

कम शब्दों में जानकारी:

text-box: trim-both cap alphabetic;

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

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

फ़ॉन्ट के ऊपर और नीचे मौजूद स्पेस, वेब पर टेक्स्ट को लेआउट करने के तरीके की वजह से होता है. इसे "हाफ़-लीडिंग" कहा जाता है. इस बारे में Matthias Ott ने एक पोस्ट में अच्छी तरह से बताया है. इस पोस्ट का नाम है, The Thing With Leading In CSS. दरअसल, जब टाइपसेटिंग हाथों से की जाती थी, तब टेक्स्ट की लाइनों को अलग करने के लिए मेटल के लीड के टुकड़ों का इस्तेमाल किया जाता था. वेब, लीडिंग से प्रेरणा लेकर लीड को दो हिस्सों में बांटता है. इसके बाद, एक हिस्से को कॉन्टेंट के ऊपर और दूसरे हिस्से को कॉन्टेंट के नीचे डिस्ट्रिब्यूट करता है.

यह इतिहास काम का है, क्योंकि 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. गेम खेलते समय सिंटैक्स की समीक्षा करें.

मैं क्या बना सकता हूं और इससे कौनसी समस्याएं हल हो सकती हैं?

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

आसानी से सेंटर में लाना

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

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

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

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

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

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

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

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

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

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

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

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

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

पढ़ाई जारी रखें

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

• सभी डेमो का Codepen कलेक्शन.
• यन निक्लस ने बेहतरीन रिसर्च और डेमो किए हैं.
• CSS Tricks पर, टेक्स्ट बॉक्स के व्हाइटस्पेस को ट्रिम करने के लिए दो सीएसएस प्रॉपर्टी.
• टेक्स्ट के किनारों पर सीएसएस इनलाइन लेआउट.
• size-adjust या ascent-override के साथ भ्रमित न हों
• CSS Baseline: The Good, The Bad And The Ugly.
• यह कुकी, कई एचटीएमएल एलिमेंट पर लागू होती है: CodePen.
• Safari की ब्लॉग पोस्ट.
• एक डिज़ाइनर के तौर पर, मुझे टेक्स्ट-बॉक्स-ट्रिम फ़ीचर का इंतज़ार क्यों है.