सीएसएस font-size-adjust अब बेसलाइन में है

पब्लिश करने की तारीख: 23 जुलाई, 2024

सीएसएस font-size-adjust प्रॉपर्टी, आज Chrome में लॉन्च हो रही है. साथ ही, यह 'नए वर्शन में उपलब्ध बेसलाइन' का हिस्सा बन जाएगी. इस प्रॉपर्टी की मदद से, फ़ॉलबैक फ़ॉन्ट लोड होने पर, लेआउट में बदलाव होने से रोका जा सकता है. साथ ही, यह पक्का किया जा सकता है कि छोटे फ़ॉन्ट साइज़ में भी फ़ॉलबैक फ़ॉन्ट आसानी से पढ़े जा सकें. font-size-adjust प्रॉपर्टी, Interop 2024 का हिस्सा है. इसलिए, यह वेब प्लैटफ़ॉर्म के इंटरऑपरेबिलिटी को बेहतर बनाने की कोशिशों के लिए एक और जीत है.

समस्या

एक ही साइज़ पर सेट किए गए दो फ़ॉन्ट की तुलना करने पर, दिखने वाले टेक्स्ट के लिए ज़रूरी जगह, ग्लिफ़ के आकार और साइज़ के आधार पर बहुत अलग हो सकती है. उदाहरण के लिए, यहां दिए गए डेमो में Verdana और Arial में टेक्स्ट दिखाया गया है. दोनों को 16 पिक्सल पर सेट किया गया है.

Verdana और Arial में 16 पिक्सल पर दिखने वाला टेक्स्ट.

साइज़ में अंतर इस बात की वजह से होता है कि अस्पेक्ट वैल्यू, किसी फ़ॉन्ट में अपरकेस अक्षरों की तुलना में लोअरकेस अक्षरों की ऊंचाई, फ़ॉन्ट के हिसाब से अलग-अलग होती है.

फ़ॉलबैक के तौर पर, अलग आसपेक्ट रेशियो वाले फ़ॉन्ट का इस्तेमाल करने पर, दो समस्याएं हो सकती हैं. सबसे पहले, फ़ॉन्ट के लिए इस्तेमाल होने वाला स्पेस बदल जाएगा. दूसरी बात, आपका चुना गया फ़ॉलबैक फ़ॉन्ट, पहले चुने गए फ़ॉन्ट के मुकाबले कम पढ़ा जा सकता है. खास तौर पर, छोटे फ़ॉन्ट साइज़ में. इसकी वजह यह है कि अपरकेस अक्षरों के मुकाबले, लोअरकेस अक्षरों की ऊंचाई, टेक्स्ट को पढ़ने में अहम भूमिका निभाती है.

font-size-adjust किस तरह मदद करता है

font-size-adjust प्रॉपर्टी की मदद से, फ़ॉलबैक फ़ॉन्ट को पहले फ़ॉन्ट से बेहतर तरीके से मैच करने के लिए अडजस्ट किया जा सकता है. यहां दिए गए उदाहरण में, पहले दिखाए गए दो फ़ॉन्ट दिखाए गए हैं. इस बार, दूसरे फ़ॉन्ट को पहले फ़ॉन्ट से मैच करने के लिए अडजस्ट किया गया है.

font-size-adjust का इस्तेमाल करके.

इस उदाहरण में, एक वैल्यू, यानी संख्या का इस्तेमाल किया गया है. यह वैल्यू, ex-height की डिफ़ॉल्ट फ़ॉन्ट मेट्रिक का इस्तेमाल करके फ़ॉन्ट में बदलाव करती है. यह फ़ॉन्ट साइज़ के मुकाबले, x-height (फ़ॉन्ट में छोटे अक्षर x की ऊंचाई) का अनुपात होता है. इस्तेमाल की गई फ़ॉन्ट मेट्रिक की जानकारी भी दी जा सकती है. अगले उदाहरण में, मैंने नंबर के साथ-साथ ch-width कीवर्ड का इस्तेमाल करके फ़ॉन्ट को सामान्य किया है.

ch-width फ़ॉन्ट मेट्रिक के साथ font-size-adjust का इस्तेमाल करना.

सभी संभावित वैल्यू देखने के लिए, font-size-adjust के लिए MDN दस्तावेज़ देखें.

फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करके अपनी साइट को देखें और देखें कि font-size-adjust में थोड़ा बदलाव करके, फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करने वाले पाठकों को बेहतर अनुभव दिया जा सकता है या नहीं. खास तौर पर, अब यह सुविधा हर जगह उपलब्ध है!