⁂द यूनिवर्सल वेब

3.3 फ़्लुइड और रिस्पॉन्सिव टाइपोग्राफ़ी

कैसे फ़्लुइड टाइप स्केल, कंटेनर क्वेरी और आधुनिक CSS टेक्स्ट नियंत्रण पाठक की अपनी सेटिंग्स को दरकिनार किए बिना हर स्क्रीन की सेवा कर सकते हैं।

7 min read

इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।

इन दिशानिर्देशों के पहले संस्करण में एक स्क्रीन मान ली गई थी: एकवचन, मेज़ से बँधी, अनुमानित आकार की। वह मान्यता अब नहीं रही। अब वही अनुच्छेद हाथ की दूरी पर पकड़े फ़ोन, टैबलेट, लैपटॉप और दीवार-जितने बड़े डिस्प्ले — सब पर अच्छा पढ़ा जाना चाहिए, और, इससे भी महत्वपूर्ण, उस व्यक्ति के लिए भी अच्छा पढ़ा जाना चाहिए जिसने अपना सिस्टम फ़ॉन्ट बड़ा कर रखा है, पेज को 400 प्रतिशत तक ज़ूम कर रखा है, या दोनों। फ़्लुइड टाइपोग्राफ़ी (fluid typography) इस पूरी रेंज में टाइप को स्केल करने का शिल्प है; सुगम्य फ़्लुइड टाइपोग्राफ़ी वह है जो पाठक की चुपचाप अनदेखी किए बिना ऐसा करे।

फ़्लुइड स्केल और clamp() फ़ंक्शन

आधुनिक रिवाज़ फ़ॉन्ट आकार CSS के clamp() फ़ंक्शन से तय करता है: एक न्यूनतम, एक पसंदीदा मान जो व्यूपोर्ट के साथ बढ़ता है, और एक अधिकतम। ब्रेकपॉइंट पर निश्चित आकारों के बीच कूदने के बजाय टाइप सरकता है — डेस्कटॉप पर भव्य दिखने वाली हेडिंग फ़ोन पर शालीनता से घट जाती हैं, और वे अटपटी बीच की चौड़ाइयाँ, जिन्हें ब्रेकपॉइंट कभी ठीक से नहीं सँभालते थे, अपने आप सँभल जाती हैं।

अच्छी तरह इस्तेमाल हो तो यह पठनीयता के लिए वास्तविक लाभ है। लापरवाही से इस्तेमाल हो तो यह सुगम्यता विफलता (accessibility failure) का एक नया वर्ग पैदा करता है, और यह विफलता इतनी सूक्ष्म है कि सरसरी परीक्षण से बच निकलती है।

सुगम्यता की चेतावनी

इस प्रकाशन की हर बात एक अनुबंध पर टिकी है: पाठक की आकार सेटिंग्स की जीत होती है। ब्राउज़र उपयोगकर्ताओं को डिफ़ॉल्ट फ़ॉन्ट आकार तय करने देते हैं; ऑपरेटिंग सिस्टम टेक्स्ट स्केलिंग देते हैं; WCAG 1.4.4 (Resize Text) की अपेक्षा है कि सामग्री या कार्यक्षमता खोए बिना टेक्स्ट 200 प्रतिशत तक बड़ा किया जा सके। फ़्लुइड सूत्र इस अनुबंध को दो तरह से चुपचाप तोड़ सकते हैं।

पहला, विशुद्ध रूप से व्यूपोर्ट इकाइयों पर बना सूत्र — मान लीजिए, केवल vw से निकला आकार — उपयोगकर्ता की फ़ॉन्ट-आकार वरीयता पर बिल्कुल प्रतिक्रिया नहीं करता। पेज फ़्लुइड और आधुनिक दिखता है, और जिस पाठक ने अपने ब्राउज़र में बड़ा डिफ़ॉल्ट सेट किया है उसे कोई असर ही नहीं दिखता। उपचार है सूत्रों को rem पर बनाना: न्यूनतम और अधिकतम rem में रखें, और पसंदीदा मान में व्यूपोर्ट वाले पद के साथ-साथ एक rem-आधारित घटक भी दें। तब पूरा स्केल उपयोगकर्ता की सेटिंग के ऊपर सवार होता है, जैसा होना चाहिए।

दूसरा, स्वयं clamp ज़ूम से लड़ सकता है। जब पाठक ज़ूम करता है, तो CSS के हिसाब से व्यूपोर्ट इकाइयाँ सिकुड़ती हैं, इसलिए vw-प्रधान सूत्र ज़ूम को आंशिक रूप से रद्द कर देता है: पाठक पेज को बड़ा करता है और टेक्स्ट ज़ूम गुणांक से कम बढ़ता है, और चरम मामलों में WCAG 1.4.4 द्वारा अपेक्षित 200 प्रतिशत तक पहुँच ही नहीं पाता। हर फ़्लुइड स्केल का उच्च ज़ूम पर परीक्षण होना चाहिए — इसे मान कर नहीं चलना चाहिए।

रीफ़्लो और 400 प्रतिशत ज़ूम

WCAG 1.4.10 (Reflow) की अपेक्षा है कि सामग्री 320 CSS पिक्सेल की चौड़ाई पर — जो 400 प्रतिशत ज़ूम की गई 1280-पिक्सेल विंडो के बराबर है — पढ़ने के लिए क्षैतिज स्क्रॉलिंग के बिना काम करे। कई कम दृष्टि वाले पाठक इन्हीं आवर्धनों पर रहते हैं। फ़्लुइड टाइप यहाँ तभी मदद करता है जब वह ईमानदार हो: उस प्रभावी चौड़ाई पर स्केल अपने न्यूनतम पर होना चाहिए, पंक्तियों की लंबाई घटनी चाहिए, और कुछ भी व्यूपोर्ट से बाहर नहीं निकलना चाहिए। निश्चित-चौड़ाई वाले कंटेनर, टेक्स्ट की एब्सॉल्यूट पोज़िशनिंग, और सिकुड़ने से इनकार करने वाले बहु-स्तंभ लेआउट ही आम अपराधी हैं। हर पठन पृष्ठ का 400 प्रतिशत पर परीक्षण करें; इसमें एक मिनट लगता है और ये विफलताएँ वहीं छिपी होती हैं।

200 प्रतिशत ज़ूम पर rem-आधारित फ़्लुइड आकार दोगुना होकर 32 पिक्सेल हो जाता है, जैसा WCAG 1.4.4 अपेक्षा करता है, जबकि केवल-vw वाला सूत्र सिर्फ़ 22 पिक्सेल तक पहुँचता है और विफल रहता है।

कंटेनर क्वेरी

मीडिया क्वेरी पूछती हैं कि विंडो कितनी बड़ी है; कंटेनर क्वेरी (container queries) पूछती हैं कि कंपोनेंट का अपना बॉक्स कितना बड़ा है — और प्रायः यही वह सवाल है जिसका उत्तर टाइपोग्राफ़ी को वास्तव में चाहिए। कार्ड चाहे साइडबार में हो या पूरे पेज में फैला हो, कार्ड ही रहता है, और अब उसका टाइप अपनी ही चौड़ाई पर प्रतिक्रिया कर सकता है — कंपोनेंट के भीतर फ़्लुइड आकार के लिए कंटेनर क्वेरी इकाइयों के साथ। वही चेतावनी ज्यों की त्यों लागू रहती है: कंटेनर-सापेक्ष इकाइयाँ पाठक की फ़ॉन्ट-आकार वरीयता के बारे में कुछ नहीं जानतीं, इसलिए उन्हें भी rem-आधारित पदों के साथ जोड़ना और ज़ूम के अंतर्गत परखना होगा।

छोटे औज़ार, वास्तविक लाभ

कई हालिया CSS प्रॉपर्टियाँ पुरानी टाइपोग्राफ़िक समस्याओं को सीधे संबोधित करती हैं:

  • text-wrap: balance छोटे ब्लॉकों — सबसे बढ़कर हेडिंग — की पंक्ति-लंबाइयाँ बराबर कर देती है, जिससे लंबी पहली पंक्ति के नीचे दो शब्दों की अनाथ पंक्ति समाप्त हो जाती है। यह कुछ पंक्तियों के लिए है, बॉडी कॉपी के लिए नहीं।
  • text-wrap: pretty ब्राउज़र को अनुच्छेद के लाइन ब्रेकिंग पर अधिक मेहनत करने देती है, जिससे अकेले छूटे अंतिम शब्द टलते हैं और रैग (rag) सुधरता है। इंजनों में समर्थन अभी असमान है; इसे प्रोग्रेसिव एन्हांसमेंट मानें।
  • font-size-adjust फ़ॉलबैक फ़ॉन्ट की एक्स-हाइट (x-height) को उस वेब फ़ॉन्ट से मिला देती है जिसकी वह जगह लेता है। वेब फ़ॉन्ट के लोड होने तक — या वह कभी न पहुँचे तो भी — फ़ॉलबैक समतुल्य आभासी आकार पर रेंडर होता है, जिससे लेआउट शिफ़्ट घटता है और फ़ॉलबैक टेक्स्ट इच्छित टाइपफ़ेस जितना सुपाठ्य बना रहता है। यह देखते हुए कि फ़ॉन्ट लोड होने से पहले के सेकंडों में कितना कुछ पढ़ा जाता है, यह विनम्र प्रॉपर्टी अपनी जगह की हक़दार है।

यह अध्याय नया क्यों है

2005 में फ़्लुइड टाइपोग्राफ़ी नहीं थी क्योंकि जिसके आर-पार फ़्लुइड होना था, वही कुछ नहीं था: मोबाइल वेब बमुश्किल अस्तित्व में था, रिस्पॉन्सिव डिज़ाइन 2010 तक परिभाषित नहीं होना था, और clamp(), कंटेनर क्वेरी, text-wrap नियंत्रण और व्यापक रूप से समर्थित font-size-adjust — सब पिछले कुछ ही वर्षों के विकास हैं। रीफ़्लो की अपेक्षा भी WCAG में संस्करण 2.1 के साथ 2018 में ही आई। स्क्रीनों की बहुलता ने समस्या रची; CSS ने हाल ही में उपकरण दिए हैं; और उन उपकरणों के इर्द-गिर्द सुगम्यता का अनुशासन अभी और भी युवा है।

CSS में

h1 {
  /* fluid between bounds; the rem term preserves zoom and settings */
  font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem);
  text-wrap: balance;
}
p { font-size: 1rem; text-wrap: pretty; }

/* Test at 200% and 400% zoom — WCAG 1.4.4 and 1.4.10 */

सिफ़ारिशें

  • फ़्लुइड स्केल rem पर बनाएँ: न्यूनतम, अधिकतम और पसंदीदा मान में एक rem घटक, ताकि उपयोगकर्ता की फ़ॉन्ट-आकार वरीयताएँ आगे पहुँचें।
  • टेक्स्ट का आकार कभी केवल व्यूपोर्ट इकाइयों में न रखें।
  • हर टेम्पलेट का परीक्षण 200 प्रतिशत ज़ूम पर, 400 प्रतिशत ज़ूम पर, और ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार बढ़ाकर करें — ये तीन अलग परीक्षण हैं, तीनों आवश्यक।
  • WCAG 1.4.10 सत्यापित करें: 320 CSS पिक्सेल की चौड़ाई पर पढ़ने के लिए कोई क्षैतिज स्क्रॉलिंग आवश्यक न हो।
  • कंपोनेंट-स्तरीय टाइप निर्णयों के लिए कंटेनर क्वेरी उपयोग करें, उसी rem अनुशासन के साथ।
  • हेडिंग पर text-wrap: balance लगाएँ; बॉडी कॉपी के लिए text-wrap: pretty को प्रोग्रेसिव एन्हांसमेंट के रूप में सक्षम करें।
  • font-size-adjust (और आकार-मिलान वाले फ़ॉलबैक) परिभाषित करें ताकि वेब फ़ॉन्ट से पहले और उसके बिना भी टेक्स्ट सुपाठ्य रहे।

आगे पढ़ें