बराबर चौड़ाई वाली टेक्स्ट लाइनें

पोस्टर-स्टाइल वाले लॉकअप में हर लाइन को स्केल किया जाता है, ताकि वह कंटेनर की पूरी चौड़ाई में फ़िट हो सके. इससे विज़ुअल तौर पर आकर्षक हेडिंग बनाई जा सकती हैं. text-fit का इस्तेमाल करके, ब्राउज़र लेआउट के दौरान हर लाइन को स्केल करता है. इससे साइज़ बदलने, कॉपी में बदलाव करने, और फ़ॉन्ट लोड करने पर भी वह सही रहता है.

अपने कंटेनर को भरने वाली एक लाइन (जैसे, हेडिंग या पुल कोट) के लिए, सीधे उस एलिमेंट पर text-fit लागू करें. इस गाइड में, कई लाइनों वाले लॉकअप के बारे में बताया गया है.

बुनियादी तौर पर लागू करना

फ़ोर्स की गई लाइनों के लिए:

• हर लाइन को <span> में रैप करें और display: block का इस्तेमाल करें.
• हर फ़ोर्स्ड लाइन <span> पर white-space: nowrap लागू करें.

लागू करने के लिए दिशा-निर्देश:

• हेडिंग पर ही text-fit: grow per-line-all <percentage> का इस्तेमाल करें.
• per-line-all का इस्तेमाल करें, न कि per-line का. per-line, आखिरी लाइन और फ़ोर्स ब्रेक पर खत्म होने वाली किसी भी लाइन को छोड़ देता है. इसलिए, हर लाइन में एक ब्लॉक होने पर, यह कुछ भी स्केल नहीं करता.
• grow को shrink के साथ नहीं जोड़ा जा सकता. बेस font-size को ज़्यादा से ज़्यादा या कम से कम पर सेट करें. यह इस बात पर निर्भर करता है कि कौनसा फ़ॉलबैक बेहतर होगा या किसकी गिनती करना आसान होगा. इसके बाद, text-fit को shrink या grow पर सेट करें. अगर आपके पास shrink का इस्तेमाल करने की कोई वजह नहीं है, तो grow + सेटिंग font-size को कम से कम पर सेट करें. ऐसा इसलिए, क्योंकि ज़्यादातर मामलों में यह ज़्यादा सुरक्षित होता है.
• बजट में बढ़ोतरी या कमी को हमेशा प्रतिशत (जैसे, 300%) के तौर पर सीमित करें.
• कंटेनर का इनलाइन साइज़ तय होना चाहिए. text-fit, इंट्रिन्सिक साइज़ को कभी नहीं बदलता. इसलिए, यह fit-content/max-content चौड़ाई या कॉन्टेंट के साइज़ वाले फ़्लेक्स/ग्रिड आइटम पर कुछ नहीं करता.
• पहली लाइन के ऊपर और आखिरी लाइन के नीचे मौजूद लीडिंग को ट्रिम करें: टेक्स्ट को सटीक तरीके से अलाइन करना देखें.
• line-height को छोटा रखें, 1 या इससे कम, नहीं तो अलग-अलग फ़ॉन्ट-साइज़ की लाइनों के बीच का गैप बहुत ज़्यादा हो जाता है.
• अहम जानकारी: ध्यान दें कि कंप्यूट किए गए font-size में कोई बदलाव नहीं हुआ है. इसलिए, em स्पेसिंग स्केल नहीं होती.
• अगर खाली लाइनें हैं, तो text-wrap: balance या text-wrap: pretty लागू करें. इससे, गलती से ज़्यादा ज़ोर देने वाले अनाथ शब्दों से बचा जा सकता है.

स्पेसिंग

अगर सभी लाइनों को फ़ोर्स किया जाता है, तो स्पेसिंग पर ज़्यादा कंट्रोल मिलता है:

• हर लाइन ब्लॉक पर text-box: trim-both cap alphabetic लागू करें, ताकि उसका बॉक्स अपने ग्लिफ़ को कवर कर सके. यह स्केल की गई मेट्रिक का इस्तेमाल करके, वीडियो को ट्रिम करता है. ज़्यादा जानकारी के लिए, टेक्स्ट को सटीक तरीके से अलाइन करना लेख पढ़ें.
• हेडिंग पर line-height के बजाय, फ़्लेक्सबॉक्स या ग्रिड + gap का इस्तेमाल करके लाइनों के बीच स्पेस दें. इसके बाद, हर लाइन के फ़ॉन्ट साइज़ के साथ बढ़ने के बजाय, गैप एक जैसे हो जाते हैं.

अगर कुछ लाइनें खाली हैं, तो text-box का इस्तेमाल न करें: यह सिर्फ़ पहली और आखिरी लाइन को ट्रिम करता है. इसलिए, बाहरी लाइनें ग्लिफ़ के करीब होंगी, जबकि अंदरूनी गैप अपनी लीडिंग बनाए रखेंगे. line-height को सभी स्पेसिंग मैनेज करने दें.

विज़ुअल डिज़ाइन

• लॉकअप तब सबसे अच्छे दिखते हैं, जब लाइनों के बीच फ़ॉन्ट साइज़ में काफ़ी अंतर हो. एक जैसी लाइनों वाले टेक्स्ट से लॉकअप बनाने से बचें. इससे फ़ॉन्ट साइज़ न तो एक जैसे होंगे और न ही काफ़ी अलग होंगे. इससे कॉन्ट्रास्ट के डिज़ाइन सिद्धांत का उल्लंघन होगा. इसके लिए, छोटी लाइनों का इस्तेमाल करें: जिन शब्दों पर ज़ोर देना है उन्हें एक ब्लॉक में रैप करें और बाकी शब्दों को रैप होने दें. इसे मिक्स्ड लॉकअप कहते हैं. text-wrap: balance के साथ इस्तेमाल करते समय, यह खास तौर पर ज़रूरी है.
• पश्चिमी स्क्रिप्ट के साथ इस्तेमाल करते समय, इसे text-transform: uppercase के साथ जोड़ें. ऐसा इसलिए, क्योंकि असेंडर और डिसेंडर, ट्रैप किए गए स्पेस और/या ओवरलैप होने वाली आस-पास की लाइनें बनाते हैं. इससे कम आकर्षक नतीजा मिलता है.
• छोटे वाक्य बनाते समय, ऐसे शब्दों को चुनें जिन पर ज़ोर देने से मैसेज बेहतर तरीके से समझ आए.
• सीमा: टेक्स्ट का साइज़ बढ़ाने से, उसका विज़ुअल वेट भी बढ़ जाएगा. साथ ही, उसके स्ट्रोक ज़्यादा गहरे दिखेंगे. फ़िलहाल, इसे संतुलित करने का कोई तरीका नहीं है. उदाहरण के लिए, बड़े टेक्स्ट के लिए font-weight को कम करके. ऐसा इसलिए है, क्योंकि कैलकुलेशन में इस्तेमाल करने के लिए कोई इकाई नहीं है. साथ ही, स्केलिंग से फ़ॉन्ट से जुड़ी इकाइयों पर कोई असर नहीं पड़ता, जैसे कि em.

फ़ॉलबैक रणनीतियां

text-box के लिए

text-box के लिए, अलग से फ़ॉलबैक की ज़रूरत नहीं है: फ़िक्स्ड लॉकअप पर भी छोटा line-height रखें. यह text-box में काम नहीं करता. साथ ही, जहां यह काम नहीं करता वहां गैप को कम रखता है. हालांकि, इसके लिए हर लाइन के फ़ॉन्ट-साइज़ के हिसाब से गैप को बढ़ाना पड़ता है.

text-wrap: balance के लिए

text-fit के लिए

फ़ोर्स की गई लाइनों के लिए, एक छोटा और भरोसेमंद फ़ॉलबैक होता है: हर लाइन को उसके बेस साइज़ पर मेज़र करें और उसे कंटेनर के अनुपात के हिसाब से स्केल करें. साथ ही, इसमें वही कैप इस्तेमाल करें.

@supports not (text-fit: grow) {
  .lockup > span {
    /* Shrink-wrap each line so its width is the text width */
    width: fit-content;
    /* --text-fit-scale is measured by the script; the cap mirrors the text-fit percentage */
    font-size: min(var(--text-fit-scale, 1) * 1em, 300%);
  }
}

if (!CSS.supports('text-fit', 'grow per-line-all')) {
  const fit = lockup => {
    const lines = [...lockup.querySelectorAll(':scope > span')];
    // Unscale first: on a refit, offsetWidth would otherwise include the previous scale
    for (const line of lines) line.style.removeProperty('--text-fit-scale');
    // MANDATORY: all reads, then all writes. Interleaving them (e.g. reading
    // lockup.clientWidth inside the write loop) forces one reflow per line.
    const scales = lines.map(line => lockup.clientWidth / line.offsetWidth);
    lines.forEach((line, i) => line.style.setProperty('--text-fit-scale', scales[i]));
  };
  // Refit on resize and font load
  for (const lockup of document.querySelectorAll('.lockup')) {
    new ResizeObserver(() => fit(lockup)).observe(lockup);
  }
}

फ़्री लाइन में कोई फ़ॉलबैक नहीं होता. लेआउट बनने तक, लाइन ब्रेक के बारे में पता नहीं चलता: clamp(2rem, 1rem + 5cqi, 5rem) जैसे फ़्लूइड बेस साइज़ के साथ, हेडिंग को बेहतर बनाने के लिए प्रोग्रेसिव एन्हांसमेंट. मिक्स्ड लॉकअप में, ऊपर दी गई स्क्रिप्ट अब भी फ़ोर्स की गई लाइनों में फ़िट होती है. रैपिंग ब्लॉक की चौड़ाई, कंटेनर जितनी होती है. इसलिए, यह स्केल 1 को बनाए रखता है और इसे सिर्फ़ फ़्लूइड बेस साइज़ मिलता है.

अगर टेक्स्ट को फ़िट करना ज़रूरी है, तो किसी JS लाइब्रेरी (जैसे, fitty) का इस्तेमाल करें. इसे सिर्फ़ तब लोड किया जाता है, जब text-fit काम न करे.