Leading और लाइन स्पेसिंग: यह क्या है और iOS और Android में कॉन्फ़िगरेशन

Leading और लाइन स्पेसिंग क्या है

Leading (उच्चारण “लीडिंग”) — टाइपोग्राफी में आसन्न पंक्तियों की आधार रेखाओं के बीच की ऊर्ध्वाधर दूरी। आधार रेखा अदृश्य रेखा है जिस पर पाठ के अक्षर स्थित होते हैं। leading जितना बड़ा होगा, पंक्तियाँ एक-दूसरे के सापेक्ष उतनी ही अधिक स्वतंत्र होती हैं। डिजिटल टाइपोग्राफी में, leading को आमतौर पर लाइन स्पेसिंग या लाइन हैंट कहा जाता है।

ऐतिहासिक रूप से, यह शब्द धातु टाइपोग्राफी के युग में उत्पन्न हुआ: टाइपसेटर्स पंक्तियों के बीच अंतराल बढ़ाने के लिए पतली सीसे की पट्टियां डालते थे। आधुनिक फ़ॉन्ट्स में, leading को फ़ॉन्ट साइज़ के अनुपात के रूप में परिभाषित किया जाता है। डिफ़ॉल्ट सिस्टम मान 1.2 (फ़ॉन्ट साइज़ का 120%) है, लेकिन लंबे टेक्स्ट और मोबाइल इंटरफ़ेसों के लिए एक बड़ा मान अनुशंसित है। Material Design Typography Guidelines के अनुसार, वेब और मोबाइल इंटरफ़ेसों के लिए बॉडी टेक्स्ट के लिए इष्टतम लाइन हैंट 1.4-1.5 है।

Leading और लाइन स्पेसिंग में अंतर: leading आधार रेखा से आधार रेखा तक की पूरी दूरी है, जबकि लाइन स्पेसिंग एक पंक्ति के निचले किनारे और अगली पंक्ति के ऊपरी किनारे के बीच की दूरी है। अधिकांश मोबाइल API (iOS NSParagraphStyle, Android TextView) में, लाइन स्पेसिंग का उपयोग प्राकृतिक लाइन हैंट के ऊपर एक अतिरिक्त ऑफ़सेट के रूप में किया जाता है। कुल लाइन स्पेसिंग की गणना करते समय इसे ध्यान में रखना महत्वपूर्ण है।

मोबाइल इंटरफ़ेसों के लिए इष्टतम leading मान

इष्टतम leading चुनना कई कारकों पर निर्भर करता है: फ़ॉन्ट साइज़, लाइन की लंबाई, उपयोग संदर्भ और दर्शक। 40-60 अक्षरों की विशिष्ट लाइन चौड़ाई वाले मोबाइल इंटरफ़ेसों के लिए, फ़ॉन्ट साइज़ के 1.4 से 1.6 तक के leading की अनुशंसा की जाती है। छोटी पंक्तियाँ (लेबल, बटन) छोटे leading का उपयोग कर सकती हैं — 1.0-1.2। लंबे टेक्स्ट (लेख, विवरण) — अधिक बड़ा leading, अधिकतम पढ़ने योग्यता के लिए 1.8 तक।

प्रयोगात्मक डेटा: विचिटा स्टेट यूनिवर्सिटी सॉफ्टवेयर यूज़बिलिटी लैबोरेटरी के एक अध्ययन ने दिखाया कि 1.5 का leading समान लाइन चौड़ाई के साथ 1.0 के leading की तुलना में पढ़ने की गति में 7.5% की वृद्धि करता है। डिस्लेक्सिया वाले उपयोगकर्ताओं के लिए, इष्टतम leading और भी अधिक है — 1.8 तक। ये डेटा WCAG 2.2 की अनुशंसाओं द्वारा पुष्ट हैं, जिनके अनुसार सामग्री खोए बिना लाइन स्पेसिंग को 1.5 तक बढ़ाने की क्षमता होनी चाहिए।

टाइपफ़ेस का प्रभाव: उच्च x-height वाले फ़ॉन्ट्स को निम्न x-height वाले फ़ॉन्ट्स की तुलना में अधिक leading की आवश्यकता होती है। उदाहरण के लिए, Helvetica (उच्च x-height) बॉडी टेक्स्ट के लिए 1.5 के leading की अनुशंसा करता है, जबकि Didot (निम्न x-height) — 1.3। ऐसा इसलिए है क्योंकि उच्च x-height के साथ, समान लाइन स्पेसिंग पर पंक्तियाँ दृश्य रूप से अधिक तेजी से विलीन होती हैं।

iOS में NSParagraphStyle के माध्यम से leading का कार्यान्वयन

iOS पर, लाइन स्पेसिंग को NSMutableParagraphStyle क्लास के माध्यम से प्रबंधित किया जाता है, जिसमें दो मुख्य गुण हैं: lineSpacing (पंक्तियों के बीच अतिरिक्त स्थान पॉइंट्स में) और lineHeightMultiple (लाइन हैंट गुणक)। ये गुण एकसाथ काम करते हैं: अंतिम लाइन हैंट की गणना प्राकृतिक फ़ॉन्ट ओंचाई को lineHeightMultiple से गुणा करके, और उसमें lineSpacing जोड़कर की जाती है।

let paragraphStyle = NSMutableParagraphStyle()

// तरीका 1: लाइन ओंचाई गुणक
paragraphStyle.lineHeightMultiple = 1.5

// तरीका 2: पंक्तियों के बीच अतिरिक्त दूरी
paragraphStyle.lineSpacing = 4.0

// NSAttributedString के माध्यम से लागू करें
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple पसंदीदा तरीका है क्योंकि यह फ़ॉन्ट साइज़ बदलने पर स्वचालित रूप से स्केल होता है। lineSpacing पूर्ण पॉइंट्स में निर्दिष्ट किया जाता है और स्केल नहीं होता, जो Dynamic Type का उपयोग करते समय असंगतियाँ पैदा कर सकता है। Apple Text Programming Guide के अनुसार, एक्सेसिबिलिटी-संगत इंटरफ़ेसों के लिए UIFontMetrics के साथ lineHeightMultiple का उपयोग करें।

SwiftUI Text और VStack के लिए .lineSpacing() मॉडिफायर प्रदान करता है। UIKit के विपरीत, SwiftUI में लाइन स्पेसिंग पॉइंट्स में निर्दिष्ट की जाती है और इसमें कोई बिल्ट-इन गुणक नहीं है। गुणक को लागू करने के लिए, डिवेलपर को फ़ॉन्ट साइज़ के आधार पर मैनुअली लाइन स्पेसिंग की गणना करनी होती है। सीमा: SwiftUI सीधे lineHeightMultiple का समर्थन नहीं करता — गणना किए गए मान के साथ .lineSpacing(CGFloat) का उपयोग करें।

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // फ़ॉन्ट साइज़ का 50%
    }

    var body: some View {
        Text("लाइन स्पेसिंग")
        Text("1.5 गुणक")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Android पर लाइन स्पेसिंग का कॉन्फ़िगरेशन

Android पर, लाइन स्पेसिंग दो TextView गुणों के माध्यम से सेट की जाती है: lineSpacingExtra (पिक्सेल में अतिरिक्त दूरी) और lineSpacingMultiplier (लाइन हैंट गुणक, डिफ़ॉल्ट 1.0)। iOS के समान, फ़ॉन्ट साइज़ बदलने पर गुणक स्केल होता है, जबकि extra एक पूर्ण मान है। एक्सेसिबिलिटी-संगत इंटरफ़ेसों के लिए, गुणक का उपयोग करना पसंद किया जाता है।

// XML लेआउट में
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Kotlin में प्रोग्रामेटिकली
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — आधुनिक Android UI फ़्रेमवर्क — TextStyle मॉडिफायर में lineHeight पैरामीटर का उपयोग करता है। XML दृष्टिकोण के विपरीत, Compose में lineHeight को sp में पूरी लाइन ओंचाई के रूप में निर्दिष्ट किया जाता है (डिफ़ॉल्ट = fontSize * 1.2)। गुणक सेट करने के लिए, डिवेलपर fontSize के प्रतिशत के रूप में lineHeight निर्दिष्ट करता है: उदाहरण: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) 1.5 का गुणक देता है।

सीमा: API 28 से पहले Android में, lineSpacingExtra और lineSpacingMultiplier कुछ फ़ॉन्ट्स के साथ सही ढंग से काम नहीं करते, विशेष कर कस्टम (TTF/OTF)। वास्तविक डिवाइसों पर परीक्षण करने और ध्यान देने की सिफ़ारिश की जाती है कि systemTextView डिफ़ॉल्ट रूप से lineSpacingMultiplier 1.0 का उपयोग करता है — बिना किसी अतिरिक्त दूरी के। ScrollView में लंबे टेक्स्ट के लिए, हमेशा लाइन स्पेसिंग को स्पष्ट रूप से सेट करें।

CSS line-height के माध्यम से वेब डेवलपमेंट में लाइन स्पेसिंग

वेब पर, लाइन स्पेसिंग CSS प्रॉपर्टी line-height द्वारा सेट की जाती है, जो एक संख्या (गुणक), प्रतिशत, लंबाई इकाईयाँ (px, em), या कीवर्ड normal हो सकती है। संख्यात्मक गुणक पसंदीदा तरीका है क्योंकि यह विरासत में मिलता है और चाइल्ड एलीमेंट्स के फ़ॉन्ट साइज़ के सापेक्ष स्केल होता है। normal मान अधिकांश फ़ॉन्ट्स के लिए लगभग 1.2 के अनुरूप होता है।

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

संख्यात्मक गुणक vs em: line-height: 1.5 और line-height: 1.5em अलग-अलग चीजें हैं। एक संख्यात्मक गुणक की गणना की गई मान के रूप में विरासत में मिलता है और प्रत्येक चाइल्ड एलीमेंट के लिए उसके font-size के आधार पर पुनः परिगणोत किया जाता है। em माता-पिता के font-size के आधार पर एक निश्चित गणना की गई मान के रूप में विरासत में मिलता है। यह एक महत्वपूर्ण अंतर है: font-size: 16px के भीतर font-size: 20px नेस्टिंग करने पर, line-height: 1.5 30px देता है, जबकि line-height: 1.5em 24px (माता-पिता से) देता है। अनुशंसा: हमेशा एक संख्यात्मक गुणक का उपयोग करें।

iOS, Android और वेब पर leading सेटिंग्स की तुलना

अलग-अलग API के बावजूद, सभी प्लेटफ़ॉर्म्स पर लाइन स्पेसिंग को कॉन्फ़िगर करने का सिद्धांत समान है। गुणक फ़ॉन्ट साइज़ बदलने पर स्केल होता है और एक्सेसिबिलिटी-अनुकूल है। पूर्ण मान (दूरी) स्केल नहीं होता और Dynamic Type या बड़े टेक्स्ट सेटिंग्स का उपयोग करते समय समस्याएँ पैदा कर सकता है।

क्रॉस-प्लेटफ़ॉर्म रणनीति: डिज़ाइन सिस्टम में lineHeight को fontSize के गुणक के रूप में परिभाषित करें। उदाहरण के लिए, डिज़ाइन टोकन्स में: line-height-body = 1.5, line-height-heading = 1.1। प्रत्येक प्लेटफ़ॉर्म इस गुणक को अपने API से लागू करता है: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5। यह सभी प्लेटफ़ॉर्म्स पर समान दृश्य परिणाम सुनिश्चित करता है।

महत्वपूर्ण बारीकी: iOS पर, lineHeightMultiple पूरी लाइन ओंचाई (फ़ॉन्ट के ascender + descender सहित) पर लागू होता है, जबकि Android पर, lineSpacingMultiplier Minikin रेंडर इंजन द्वारा गणना की गई लाइन ओंचाई पर लागू होता है। व्यावहारिक रूप से, समान गुणक मान के साथ यह दृश्य leading में मामूली अंतर पैदा करता है। पिक्सल-परफ़ेक्ट संगति के लिए, प्लेटफ़ॉर्म के अनुसार समायोजित पूर्ण मानों का उपयोग करें।