ऑपरेटिंग सिस्टम के टेक्स्ट स्केल का पालन करें

खास जानकारी

नज़र संबंधी समस्या वाले उपयोगकर्ता, अक्सर ऑपरेटिंग सिस्टम के लेवल पर टेक्स्ट स्केलिंग को कॉन्फ़िगर करते हैं. जैसे, iOS पर डाइनैमिक टाइप या Android/ChromeOS पर फ़ॉन्ट साइज़ स्केलिंग. डिफ़ॉल्ट रूप से, मोबाइल ब्राउज़र इन ओएस-लेवल की सुलभता सेटिंग को अनदेखा करते हैं. इससे लेगसी और फ़िक्स्ड-पिक्सल वाली वेबसाइटों को विज़ुअल तौर पर खराब होने से बचाया जा सकता है.

अपने पेज को स्टैटिक रखने या कस्टम, कमज़ोर JavaScript लेआउट कैलकुलेशन पर भरोसा करने के बजाय, <meta name="text-scale"> टैग का इस्तेमाल करके नेटिव ऑपरेटिंग सिस्टम के टेक्स्ट स्केलिंग को ऑप्ट-इन करें. चालू होने पर, ब्राउज़र उपयोगकर्ता के ओएस की प्राथमिकता के हिसाब से, रूट फ़ॉन्ट साइज़ (1rem) को डाइनैमिक तौर पर स्केल करता है. इससे सभी रिलेटिव (rem/em) फ़ॉन्ट साइज़, लेआउट, और स्पेसिंग अपने-आप और सही तरीके से स्केल हो जाती हैं.

लागू करना

1. ओएस टेक्स्ट स्केलिंग की सुविधा के लिए ऑप्ट इन करना

<meta name="text-scale"> एलिमेंट को अपने दस्तावेज़ के <head> में डालें. इससे, काम करने वाले ब्राउज़र को यह सिग्नल मिलता है कि आपका लेआउट मॉडर्न, अडैप्टिव, और स्केल करने के लिए सुरक्षित है:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. रिलेटिव टाइपोग्राफ़ी और स्पेसिंग का इस्तेमाल करना

फ़ॉन्ट साइज़ तय करने के लिए, फ़िक्स किए गए पिक्सल (px) के बजाय, रिलेटिव यूनिट (rem या em) का इस्तेमाल करें. लाइन की ऊंचाई के लिए, बिना यूनिट वाली वैल्यू का इस्तेमाल करें, ताकि वे हर एलिमेंट के कंप्यूट किए गए फ़ॉन्ट साइज़ के हिसाब से स्केल हो सकें.

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

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

body पर टेक्स्ट का साइज़ सिर्फ़ तब सेट करें, जब डिज़ाइन के लिए ब्राउज़र के डिफ़ॉल्ट साइज़ से अलग साइज़ की ज़रूरत हो. ऐसा न होने पर, इसे डिफ़ॉल्ट साइज़ पर ही रहने दें. हेडिंग जैसे खास एलिमेंट के लिए, rem या em जैसी रिलेटिव यूनिट का इस्तेमाल करके साइज़ सेट करें. रूट फ़ॉन्ट साइज़ के हिसाब से साइज़ तय करने के लिए, rem का इस्तेमाल करें. साथ ही, जब साइज़ पैरंट एलिमेंट के फ़ॉन्ट साइज़ पर निर्भर हो, तब em का इस्तेमाल करें. :root या html पर कस्टम फ़ॉन्ट साइज़ सेट न करें.

फ़्लूइड टाइपोग्राफ़ी

फ़्लूइड टाइपोग्राफ़ी में, व्यूपोर्ट के हिसाब से तय होने वाली यूनिट का इस्तेमाल किया जा सकता है. जैसे, vw. हालांकि, इसके लिए ज़रूरी है कि फ़ॉन्ट साइज़ में फ़ॉन्ट के हिसाब से तय होने वाला कॉम्पोनेंट भी शामिल हो. जैसे, rem या em. फ़्लूइड-स्केलिंग की अन्य तकनीकों के बारे में जानने के लिए, फ़्लूइड स्केलिंग लेख पढ़ें. इनमें कंटेनर क्वेरी यूनिट और clamp() शामिल हैं.

टेक्स्ट का साइज़ तय करने के लिए, सिर्फ़ व्यूपोर्ट यूनिट का इस्तेमाल न करें:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

इसके बजाय, फ़ॉन्ट के हिसाब से वैल्यू को व्यूपोर्ट के हिसाब से स्केलिंग के साथ जोड़ें. साथ ही, रिलेटिव मिनिमम और मैक्सिमम बाउंड का इस्तेमाल करें:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

यह जांच करें कि टेक्स्ट के साइज़ को उसके डिफ़ॉल्ट साइज़ से कम से कम 200% तक बढ़ाया जा सकता है या नहीं. साथ ही, यह भी देखें कि ऐसा करने पर कॉन्टेंट या फ़ंक्शन में कोई कमी तो नहीं आती. फ़्लूइड टाइपोग्राफ़ी के लिए, एक अहम नियम यह है कि फ़ॉन्ट का ज़्यादा से ज़्यादा साइज़, कम से कम साइज़ से 2.5 गुना से ज़्यादा नहीं होना चाहिए. साथ ही, 320 सीएसएस-पिक्सल व्यूपोर्ट चौड़ाई (1280 सीएसएस-पिक्सल-चौड़े व्यूपोर्ट से 400% ज़ूम के बराबर) पर रीफ़्लो की जांच करें. कॉन्टेंट, टू-डाइमेंशनल स्क्रोलिंग के बिना उपलब्ध होना चाहिए. हालांकि, ऐसा तब ही होना चाहिए, जब ज़रूरी हो.

3. स्केलेबल रिस्पॉन्सिव ब्रेकपॉइंट का इस्तेमाल करना

रिस्पॉन्सिव ब्रेकपॉइंट को यह नहीं मानना चाहिए कि टेक्स्ट अपने डिफ़ॉल्ट साइज़ में ही रहेगा. जहां टेक्स्ट के लिए उपलब्ध जगह के हिसाब से ब्रेकपॉइंट तय करना हो वहां कॉन्टेंट के हिसाब से लेआउट, कंटेनर क्वेरी या em-आधारित मीडिया क्वेरी का इस्तेमाल करें. फ़िक्स किए गए पिक्सल थ्रेशोल्ड का इस्तेमाल न करें.

ऑपरेटिंग सिस्टम के टेक्स्ट स्केलिंग और ब्राउज़र के ज़ूम की सुविधा चालू करके, रिस्पॉन्सिव लेआउट की जांच करें. टेक्स्ट को पढ़ा जा सके और कॉन्टेंट को बिना ओवरलैप, क्लिपिंग या हॉरिज़ॉन्टल स्क्रोलिंग के देखा जा सके.

4. कॉन्टेंट रैपिंग और ज़रूरत के हिसाब से ऊंचाई तय करने की सुविधा चालू करें

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

• टेक्स्ट कंटेनर को बड़ा होने की अनुमति दें: टेक्स्ट वाले कॉम्पोनेंट और कंटेनर को बड़ा होने की अनुमति होनी चाहिए, ताकि वे बड़े किए गए टेक्स्ट को दिखा सकें. height या block-size की तय वैल्यू और max-height या max-block-size की ऐसी वैल्यू इस्तेमाल करने से बचें जिनकी वजह से क्लिपिंग या ओवरफ़्लो हो सकता है. कॉन्टेंट के हिसाब से साइज़ तय करें. min-height या min-block-size का इस्तेमाल सिर्फ़ तब करें, जब कम से कम साइज़ की ज़रूरत हो.
• नैचुरल रैपिंग की अनुमति दें: वाक्य वाले ब्लॉक पर, white-space: nowrap का इस्तेमाल करके इनलाइन-ऐक्सिस टेक्स्ट रैपिंग को सीमित न करें. टेक्स्ट को नई लाइनों में नैचुरल तरीके से रीफ़्लो होने दें.
• फ़्लेक्सिबल फ़्लेक्सबॉक्स और ग्रिड रैपिंग का इस्तेमाल करें (ज़रूरी नहीं है, उदाहरण के तौर पर दिया गया है): कई कॉलम वाली कार्ड गैलरी के लिए, repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) जैसे रीफ़्लोइंग कॉलम का इस्तेमाल करें. इससे, अगर आइटम की चौड़ाई तय सीमा से ज़्यादा हो जाती है, तो वे वर्टिकल तौर पर स्टैक हो जाते हैं:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. रूट फ़ॉन्ट साइज़ को ओवरराइड न करें

<meta name="text-scale" content="scale"> एलिमेंट के ज़रिए शामिल होते समय, अपनी स्टाइलशीट में रूट font-size को साफ़ तौर पर सेट न करें. इसमें :root या html पर किए गए एलान शामिल हैं. साथ ही, यह ऐब्सलूट यूनिट, रिलेटिव यूनिट, और कैलकुलेट की गई वैल्यू पर लागू होता है.

उदाहरण के लिए, रूट फ़ॉन्ट साइज़ को किसी तय वैल्यू से ओवरराइड न करें:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

ऑपरेटिंग सिस्टम के टेक्स्ट स्केलिंग को मैन्युअल तरीके से लागू करने के लिए, <meta name="text-scale" content="scale"> के ऑप्ट-इन को env(preferred-text-scale) के साथ न जोड़ें. ब्राउज़र, मेटा ऑप्ट-इन के ज़रिए स्केल लागू करता है. इसलिए, दोनों का इस्तेमाल करने से डबल-स्केलिंग हो सकती है:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

रूट फ़ॉन्ट साइज़ को ब्राउज़र के हिसाब से सेट होने दें. ब्राउज़र, ऑपरेटिंग सिस्टम के टेक्स्ट स्केल को अपने-आप मैनेज करता है. साथ ही, इसे रूट फ़ॉन्ट साइज़ के हिसाब से कॉन्टेंट पर लागू करता है.

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

जिन ब्राउज़र पर <meta name="text-scale" content="scale"> काम नहीं करता है उन पर लेआउट सही तरीके से काम नहीं करता. पेज, ब्राउज़र के डिफ़ॉल्ट बेस फ़ॉन्ट साइज़ (आम तौर पर 16 पिक्सल) पर लेआउट दिखाएगा. साथ ही, उपयोगकर्ता अब भी स्टैंडर्ड मैन्युअल पेज ज़ूम या पिंच-टू-ज़ूम विकल्पों का इस्तेमाल कर सकता है.