मोबाइल डेवलपमेंट में Descender — सार, अर्थ और लेआउट पर प्रभाव

टाइपोग्राफी में Descender क्या है

Descender ग्लिफ़ का वह भाग है जो आधार रेखा के नीचे स्थित होता है। जबकि अक्षर का मुख्य भाग baseline पर टिका होता है, descender इसके पार फैलकर फ़ॉन्ट की विशिष्ट आकृति बनाता है। लैटिन लिपि में, descender वाले अक्षरों में “g”, “j”, “p”, “q”, “y” शामिल हैं — इनके निचले तत्व पंक्ति से नीचे उतरते हैं।

Descender की गहराई baseline से ग्लिफ़ के निचले किनारे (descender-line) तक की दूरी बताती है। गुणवत्ता वाले फ़ॉन्ट में यह दूरी संतुलित होती है: बहुत छोटा descender descender वाले अक्षरों को पहचानना कठिन बना देता है, जबकि बहुत लंबा descender पंक्तियों के बीच अत्यधिक खाली स्थान बनाता है और टेक्स्ट घनत्व कम करता है। विभिन्न टाइपफ़ेस descender लंबाई में महत्वपूर्ण अंतर दिखाते हैं।

Google Fonts Metrics Guide (2025) के अनुसार, descender को इष्टतम माना जाता है जब इसकी गहराई पूर्ण em आकार (1000 FUnits) का 20–25% हो। 15% से कम मान descender वाले अक्षरों को अलग करना कठिन बनाते हैं, जबकि 30% से अधिक मान पंक्ति टकराव को रोकने के लिए line-height में अनिवार्य वृद्धि की आवश्यकता होती है।

Descender के डिजिटल मीट्रिक: OpenType और TrueType

डिजिटल फ़ॉन्ट में, descender मीट्रिक तालिकाओं में ऋणात्मक मान के रूप में संग्रहीत होता है। OpenType प्रारूप में, यह hhea.descent फ़ील्ड (hhea तालिका) और sTypoDescender (OS/2 तालिका) है। दोनों मान ऋणात्मक हैं क्योंकि वे baseline से नीचे की ओर मापे जाते हैं। TrueType के लिए, OS/2 तालिका का उपयोग usWinDescent फ़ील्ड के साथ किया जाता है — इसका मान धनात्मक है लेकिन उसी मीट्रिक को दर्शाता है।

# fontTools के माध्यम से फ़ॉन्ट से descender पढ़ना
from fontTools.ttLib import TTFont

font = TTFont('Roboto-Regular.ttf')
hhea = font['hhea']
os2 = font['OS/2']

descent_hhea = hhea.descent        # -500 FUnits (Roboto)
typo_descender = os2.sTypoDescender # -500 FUnits
win_descent = os2.usWinDescent      # 500 (positive value)

# 16pt फ़ॉन्ट आकार के लिए पिक्सेल में बदलें
px_per_em = 16
descent_px = abs(descent_hhea) * px_per_em / 1000  # 8 px

प्लेटफ़ॉर्म के बीच महत्वपूर्ण अंतर: iOS रेंडरिंग के लिए hhea.descent का उपयोग करता है, जबकि Android OS/2 से sTypoDescender का उपयोग करता है। यदि ये मान भिन्न हैं (जो खराब कॉन्फ़िगर किए गए फ़ॉन्ट में होता है), तो समान टेक्स्ट iOS और Android पर अलग-अलग लाइन स्पेसिंग के साथ प्रदर्शित होगा। 100 FUnits का अंतर (लगभग 16 pt फ़ॉन्ट आकार पर 1.6 px) पहले से ही दृश्य रूप से ध्यान देने योग्य है।

Microsoft OpenType Specification v1.9 (2025) के अनुसार, सही क्रॉस-प्लेटफ़ॉर्म रेंडरिंग के लिए, hhea.descent और sTypoDescender मान 50 FUnits की सटीकता के भीतर बराबर होने चाहिए। मोबाइल एप्लिकेशन के लिए फ़ॉन्ट चुनते समय, fontTools या समान उपयोगिता के माध्यम से इसकी जाँच की जानी चाहिए।

iOS में Descender: UIFont और Core Graphics

iOS में, descender मान UIFont.descender प्रॉपर्टी के माध्यम से उपलब्ध है। यह प्रॉपर्टी एक ऋणात्मक संख्या लौटाती है जो baseline से फ़ॉन्ट के निचले किनारे (descender सहित) तक की दूरी दर्शाती है। उदाहरण के लिए, 17 pt पर SF Pro के लिए descender मान लगभग -4.2 pt है। निरपेक्ष मान जितना बड़ा होगा, फ़ॉन्ट के निचले विस्तार उतने ही लंबे होंगे।

// iOS पर UIFont के माध्यम से descender प्राप्त करना
let font = UIFont.systemFont(ofSize: 17)
let descender = font.descender     // ~ -4.2 pt SF Pro 17pt के लिए
let ascender = font.ascender        // ~ 16.2 pt
let lineHeight = font.lineHeight    // ~ 20.4 pt

// descender ऑफ़सेट के साथ कस्टम रेंडरिंग
let attrString = NSAttributedString(
    string: "Sample text with letter p and y",
    attributes: [.font: font]
)

// Core Text: descender के साथ बाउंडिंग बॉक्स प्राप्त करना
let ctFont = CTFontCreateWithName(
    "SF Pro Text" as CFString, 17, nil
)
let descent = CTFontGetDescent(ctFont)  // ~4.2 pt

TextKit (NSTextStorage, NSLayoutManager) का उपयोग करते समय, descender स्वचालित रूप से lineFragmentPadding और lineFragmentRect में शामिल होता है। हालाँकि, Core Graphics (draw(in:)) के माध्यम से कस्टम रेंडरिंग करते समय, आपको कंटेनर के निचले मार्जिन में descender का निरपेक्ष मान जोड़कर मैन्युअल रूप से निर्देशांक समायोजित करने होंगे। यदि ऐसा नहीं किया जाता है, तो descender वाले अक्षर रेंडरिंग सीमा से बाहर चले जाएँगे और काट दिए जाएँगे।

Android में Descender: Paint और Compose

Android में, descender मीट्रिक Paint.FontMetrics.descent के माध्यम से उपलब्ध हैं। iOS के विपरीत, descent मान धनात्मक है — यह baseline से टेक्स्ट के निचले किनारे तक की दूरी दर्शाता है। FontMetrics.bottom प्रॉपर्टी में न केवल descender बल्कि फ़ॉन्ट डिज़ाइनर द्वारा अनुशंसित अतिरिक्त स्थान (leading) भी शामिल है। केवल descender के सटीक लेखांकन के लिए, bottom के बजाय descent का उपयोग करें।

// Android पर Paint के माध्यम से descender प्राप्त करना
val paint = Paint().apply {
    textSize = 17 * density
}

val metrics = paint.fontMetrics
val descent = metrics.descent     // ~4.5 px 17sp के लिए
val bottom = metrics.bottom       // ~5.0 px leading के साथ

// descender ऑफ़सेट के साथ कस्टम रेंडरिंग
val baseline = y
canvas.drawText("नमूना: gpq", x, baseline, paint)

// descender के साथ निचली सीमा
val bottomBound = baseline + descent  // सही निचली सीमा

Jetpack Compose में, descender को TextLayoutResult के माध्यम से प्राप्त किया जा सकता है। getLineBottom विधि पंक्ति के निचले किनारे का Y-निर्देशांक लौटाती है, जिसमें पहले से ही descender शामिल है। विभिन्न फ़ॉन्ट आकारों वाली स्ट्रिंग्स का कस्टम लेआउट करते समय (उदाहरण के लिए, छूट मूल्य और पूर्ण मूल्य), descender को ध्यान में रखते हुए baseline संरेखण निचले किनारे के संरेखण की तुलना में अधिक सटीक परिणाम देता है।

// Compose: टेक्स्ट की निचली सीमा की जाँच करना
val text = "Text with descenders: gpq"
var layoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }

Text(
    text = text,
    onTextLayout = { layoutResult = it },
    modifier = Modifier.drawBehind {
        layoutResult?.let { result ->
            val lastLine = result.lineCount - 1
            val bottom = result.getLineBottom(lastLine)
            val top = result.getLineTop(lastLine)
            // जाँचें कि descender कंटेनर सीमा से अधिक न हो
        }
    }
)

Google Material Design — Typography Implementation (2025) के अनुसार, निश्चित ऊँचाई वाले कंटेनरों में descender कटने से रोकने के लिए, आपको फ़ॉन्ट के descent के बराबर ऊर्ध्वाधर पैडिंग जोड़ना होगा, भले ही वर्तमान टेक्स्ट में descender वाले अक्षर हों या नहीं। यह सुनिश्चित करता है कि टेक्स्ट को गतिशील रूप से बदलने पर इंटरफ़ेस टूटेगा नहीं।

मोबाइल इंटरफ़ेस में Descender और पंक्ति टकराव

पंक्ति टकराव एक ऐसी स्थिति है जहाँ ऊपरी पंक्ति के एक अक्षर का descender भौतिक रूप से निचली पंक्ति के एक अक्षर के ascender से टकराता है। मोबाइल इंटरफ़ेस में, यह विशेष रूप से बहु-पंक्ति शीर्षकों, उत्पाद कार्डों और छोटे लाइन स्पेसिंग वाले टेक्स्ट ब्लॉकों में ध्यान देने योग्य है। लंबे descender और छोटे line-height वाले फ़ॉन्ट का उपयोग करने पर समस्या बढ़ जाती है।

टकराव को रोकने वाला न्यूनतम line-height सूत्र का उपयोग करके गणना की जा सकती है: line-height = ascender + descender + 2 px मार्जिन। 17 pt पर SF Pro के लिए, यह लगभग 16.2 + 4.2 + 2 = 22.4 pt (गुणांक ~1.32) का line-height देता है। 16 sp पर Roboto के लिए, लगभग 1.35। यदि line-height इस मान से कम है, तो descender वाले अक्षरों वाले टेक्स्ट में टकराव निश्चित है।

// iOS: टकराव रोकने के लिए न्यूनतम line-height की गणना करें
let font = UIFont.systemFont(ofSize: 17)
let minLineHeight = abs(font.ascender) + abs(font.descender) + 2.0

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = minLineHeight
paragraphStyle.maximumLineHeight = minLineHeight

let attributedText = NSAttributedString(
    string: "Text with p on first line\nand y on second line",
    attributes: [
        .font: font,
        .paragraphStyle: paragraphStyle
    ]
)

सजावटी और हस्तलिखित फ़ॉन्ट के साथ काम करते समय विशेष सावधानी बरतनी चाहिए — उनका descender em आकार के 35–40% तक पहुँच सकता है। ऐसे फ़ॉन्ट शायद ही कभी मुख्य टेक्स्ट के लिए उपयोग किए जाते हैं लेकिन शीर्षकों में लागू किए जा सकते हैं। शीर्षक में लंबे descender वाले अक्षर की एक भी उपस्थिति पड़ोसी इंटरफ़ेस तत्व के साथ टकराव का कारण बन सकती है।

Descender के साथ काम करते समय सामान्य गलतियाँ

सबसे आम गलती बटन और टेक्स्ट फ़ील्ड में descender का कट जाना है। जब हम descender पर ध्यान दिए बिना बटन या टेक्स्ट फ़ील्ड की ऊँचाई line-height के बराबर सेट करते हैं, तो descender वाले अक्षर निचले किनारे से काट दिए जाते हैं। यह विशेष रूप से गोल कोनों वाले सिस्टम बटनों में ध्यान देने योग्य है, जहाँ descender कोने की त्रिज्या सीमा से बाहर जा सकता है।

• निश्चित ऊँचाई वाले बटन — यदि बटन की ऊँचाई ceil(line-height) के बराबर है, तो descender वाले अक्षर काट दिए जाते हैं। समाधान: ऊपरी और निचले पैडिंग के लिए बटन की ऊँचाई descender के निरपेक्ष मान (17 pt सिस्टम फ़ॉन्ट के लिए 4–5 pt) से बढ़ाएँ।
• TextField बिना descender ध्यान के — मानक UITextField और EditText में descender को ध्यान में रखने वाला पैडिंग होता है, लेकिन कस्टम कार्यान्वयन अक्सर इसके बारे में भूल जाते हैं। जाँच करें कि कर्सर और टेक्स्ट ब्लॉक descender वाले अक्षरों को नहीं काट रहे हैं।
• एक पंक्ति में फ़ॉन्ट आकार मिलाना — यदि NSAttributedString या SpannableString में विभिन्न फ़ॉन्ट आकारों वाले खंड हैं, तो बड़े फ़ॉन्ट का descender छोटे के ascender पर ओवरलैप हो सकता है। क्षतिपूर्ति के लिए baselineOffset का उपयोग करें और परिणाम सत्यापित करें।
• SVG टेक्स्ट रेंडरिंग — SVG या Canvas में टेक्स्ट रेंडर करते समय (विशेष रूप से web views में), descender स्वचालित रूप से ध्यान में नहीं रखा जा सकता है। हमेशा फ़ॉन्ट आकार के 10–15% मार्जिन के साथ एक स्पष्ट viewBox निर्दिष्ट करें।

Nielsen Norman Group — Mobile Typography Research (2025) के अनुसार, 41% मोबाइल एप्लिकेशन में कम से कम एक स्क्रीन होती है जहाँ descender वाला टेक्स्ट घटक सीमा से बाहर चला जाता है। इससे पठनीयता में 15% की कमी आती है और उपयोगकर्ता द्वारा कार्य पूरा करने का समय बढ़ जाता है। descender वाले अक्षरों वाले टेक्स्ट के साथ नियमित परीक्षण विकास के प्रारंभिक चरणों में ऐसी समस्याओं की पहचान करने में मदद करता है।