मोबाइल डेवलपमेंट में Ellipsize — यह क्या है और टेक्स्ट ट्रंकेट करने के तरीके

Ellipsize क्या है?

Ellipsize (ellipsis — इलिप्सिस से) एक तकनीक है जो कंटेनर के आकार से अधिक टेक्स्ट प्रदर्शित करने के लिए उपयोग की जाती है। केवल सीमा पर लाइन काटने के बजाय, ellipsize एक इलिप्सिस कैरेक्टर (तीन बिंदु, Unicode U+2026) जोड़ता है, जो उपयोगकर्ता को छिपी सामग्री की उपस्थिति का संकेत देता है।

यह शब्द Android SDK में स्थापित है, जहां android:ellipsize प्रॉपर्टी ओवरफ़्लो होने पर TextView के व्यवहार को परिभाषित करती है। iOS में, समान कार्यक्षमता को ट्रंकेशन कहा जाता है और इसे NSLineBreakMode के माध्यम से प्रबंधित किया जाता है। वेब में, ellipsis मान के साथ CSS प्रॉपर्टी text-overflow का उपयोग किया जाता है।

Ellipsize का मुख्य उद्देश्य उपयोगकर्ता को सूचित करना है कि टेक्स्ट छोटा कर दिया गया है। पिक्सेल-आधारित क्लिपिंग के विपरीत, जहां एक शब्द आधा कट सकता है, ellipsize पठनीयता सुनिश्चित करता है: इलिप्सिस पूरे शब्द या कैरेक्टर के बाद रखा जाता है बिना उसे तोड़े। यह Material Design और Human Interface Guidelines के सिद्धांतों के अनुरूप है।

Ellipsize का उपयोग वहां करें जहां कंटेनर की चौड़ाई निश्चित हो और टेक्स्ट की लंबाई गतिशील हो: लेख शीर्षक, तालिका कोशिकाएं, लेबल वाले बटन, सूची में संपर्क, ब्रेडक्रंब और फ़ाइल पथ।

Android में Ellipsize: TextView और मोड

Android में, ellipsize को XML में android:ellipsize एट्रीब्यूट या कोड में setEllipsize() मेथड के माध्यम से कॉन्फ़िगर किया जाता है। चार मोड उपलब्ध हैं, प्रत्येक यह निर्धारित करता है कि टेक्स्ट का कौन सा पक्ष काटा जाएगा।

END मोड (अधिकांश मामलों में डिफ़ॉल्ट) लाइन के अंत को काटता है और कंटेनर के दाईं ओर इलिप्सिस रखता है। START मोड शुरुआत को काटता है — इलिप्सिस बाईं ओर, दृश्य टेक्स्ट दाईं ओर। MIDDLE बीच को काटता है, लाइन की शुरुआत और अंत दृश्यमान रखता है। MARQUEE मोड टेक्स्ट का एनिमेटेड स्क्रॉलिंग है, जहां इलिप्सिस नहीं दिखाया जाता है और टेक्स्ट चक्रीय रूप से स्क्रॉल होता है।

<!-- XML layout -->
<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Very long text that will be truncated"
    android:ellipsize="end"
    android:maxLines="1"
    android:singleLine="true" />

<!-- Kotlin code -->
textView.setEllipsize(TextUtils.TruncateAt.MIDDLE)

महत्वपूर्ण: ellipsize केवल maxLines या singleLine के साथ काम करता है। यदि पंक्तियों की संख्या सीमित नहीं है, तो TextView ऊंचाई में बढ़ेगा और ellipsize सक्रिय नहीं होगा। Android 8.0 (API 26) से, ellipsize maxLines > 1 के साथ मल्टीलाइन मोड का समर्थन करता है — इलिप्सिस अंतिम पंक्ति के अंत में रखा जाता है।

प्रोग्रामेटिक उपयोग के लिए, TextUtils.TruncateAt को END, START, MIDDLE, MARQUEE मानों में से एक के साथ कॉल करें। NONE मान ellipsize को अक्षम करता है।

व्यवहार में, END 90% मामलों के लिए उपयुक्त है — उपयोगकर्ता उम्मीद करते हैं कि टेक्स्ट अंत में काटा जाए। MIDDLE का उपयोग फ़ाइल पथों के लिए किया जाता है (उदाहरण: "/User/.../project/main.kt") ताकि पथ का अंत दिखाई दे। START का उपयोग सामान्य उपसर्ग वाले नामों के लिए किया जाता है (उदाहरण: "...@gmail.com")।

iOS पर टेक्स्ट ट्रंकेशन: NSLineBreakMode

iOS में, ellipsize का समकक्ष UILabel क्लास का lineBreakMode प्रॉपर्टी है (और UITextView के लिए NSTextContainer)। तीन ट्रंकेशन मोड उपलब्ध हैं: .byTruncatingTail (अंत), .byTruncatingMiddle (मध्य) और .byTruncatingHead (शुरुआत)।

.byTruncatingTail मोड android:ellipsize="end" से मेल खाता है। .byTruncatingHead START से, .byTruncatingMiddle MIDDLE से मेल खाता है। .byClipping मोड बिना इलिप्सिस के टेक्स्ट काटता है, जो आधुनिक इंटरफ़ेस में शायद ही कभी उपयोग होता है। .byCharWrapping मोड बिना ट्रंकेशन के कैरेक्टर के अनुसार रैप करता है।

let label = UILabel()
label.text = "लंबा टेक्स्ट जो लेबल सीमा में फ़िट नहीं होता"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString भी lineBreakMode का समर्थन करता है
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

iOS में, ट्रंकेशन numberOfLines के साथ काम करता है। यदि numberOfLines = 1 है, तो टेक्स्ट एक पंक्ति में काटा जाता है। यदि numberOfLines = 2 है — दूसरी पंक्ति में। UITextView NSTextContainer.lineBreakMode का उपयोग करता है, जो तीनों ट्रंकेशन मोड का समर्थन करता है।

iOS की विशेषता: UILabel पर .byTruncatingMiddle मोड छोटी स्ट्रिंग पर अप्रत्याशित व्यवहार कर सकता है — यदि स्ट्रिंग पूरी तरह फ़िट हो जाती है, तो इलिप्सिस प्रकट नहीं होता। छोटी स्ट्रिंग पर इलिप्सिस के गारंटीकृत प्रदर्शन के लिए, sizeThatFits के माध्यम से कस्टम लॉजिक का उपयोग करें।

CSS text-overflow: वेब में इलिप्सिस कैसे जोड़ें

वेब डेवलपमेंट में, ellipsize को CSS प्रॉपर्टी text-overflow: ellipsis के माध्यम से overflow: hidden और white-space: nowrap के साथ कार्यान्वित किया जाता है। यह वेब इंटरफ़ेस में इलिप्सिस के साथ लाइन काटने का मानक तरीका है।

.text-cell {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

text-overflow प्रॉपर्टी overflow: hidden के बिना काम नहीं करती — ब्राउज़र को यह जानना होता है कि सामग्री काटी जा रही है। white-space: nowrap लाइन रैपिंग को रोकता है, अन्यथा टेक्स्ट अगली पंक्ति में चला जाएगा और ओवरफ़्लो नहीं होगा।

मल्टीलाइन ट्रंकेशन (उदाहरण: दूसरी के अंत में इलिप्सिस के साथ 2 पंक्तियां) के लिए, पहले प्रयोगात्मक -webkit-line-clamp प्रॉपर्टी का उपयोग किया जाता था, जो अब CSS Overflow Level 4 में line-clamp के रूप में मानकीकृत हो गई है।

व्यवहार में, text-overflow: ellipsis 10 वर्षों से सभी आधुनिक ब्राउज़रों द्वारा समर्थित है और वेब पर टेक्स्ट काटने का सबसे विश्वसनीय तरीका है।

सही ट्रंकेशन मोड कैसे चुनें

Ellipsize मोड का चुनाव UX को प्रभावित करता है और इंटरफ़ेस धारणा को सुधार सकता है या उपयोगकर्ता को भ्रमित कर सकता है। मुख्य नियम: उपयोगकर्ता उम्मीद करता है कि कटा हुआ हिस्सा वहाँ हो जहाँ समझने के लिए उसकी सबसे कम आवश्यकता हो।

END मोड हेडिंग, कैप्शन, शीर्षकों के लिए उपयुक्त है — उपयोगकर्ता लाइन की शुरुआत देखता है और संदर्भ समझता है। दाईं ओर इलिप्सिस का अर्थ है "और भी है, लेकिन वह फ़िट नहीं हुआ"। यह सबसे सहज और सामान्य मोड है।

MIDDLE मोड फ़ाइल पथों, ईमेल पतों और लंबी पहचानकर्ताओं के लिए अपरिहार्य है। जब लाइन के अंत में अद्वितीय जानकारी होती है (फ़ाइल नाम, डोमेन), तो उपयोगकर्ता को विशेष रूप से वह देखना चाहिए, जबकि शुरुआत को छोटा किया जा सकता है। उदाहरण: "/User/.../important_document.pdf" — फ़ाइल नाम तुरंत दिखाई देता है।

START मोड का उपयोग शायद ही कभी किया जाता है, लेकिन सामान्य उपसर्ग वाले संपर्कों की सूची के लिए उपयोगी है — उदाहरण के लिए, "...@gmail.com" "username@gmail.com" के बजाय जब सभी पते एक ही डोमेन से संबंधित हों। हालांकि, यह पैटर्न अक्सर मदद से अधिक भ्रमित करता है। Nielsen Norman Group के अनुसार, उपयोगकर्ता बाएं से दाएं पढ़ते हैं और शुरुआत में महत्वपूर्ण जानकारी की उम्मीद करते हैं, इसलिए START ट्रंकेशन संज्ञानात्मक भार बढ़ाता है।

MARQUEE मोड (स्क्रॉलिंग टेक्स्ट) केवल कम अपडेट आवृत्ति वाले एकल-पंक्ति तत्वों के लिए उपयुक्त है: प्लेयर में वर्तमान ट्रैक, समाचार टिकर, स्टेटस बार। तालिकाओं, सूचियों या फॉर्म के लिए marquee का उपयोग न करें — एनिमेशन ध्यान भटकाता है और कमजोर उपकरणों पर प्रदर्शन कम करता है।

सामान्य समस्याएं और उनके समाधान

पहली समस्या — ellipsize काम नहीं करता। सबसे आम कारण पंक्ति गणना सीमा की अनुपस्थिति है। maxLines के बिना, TextView ऊंचाई में बढ़ता है और चौड़ाई ओवरफ़्लो नहीं होती। समाधान: हमेशा maxLines निर्दिष्ट करें (या एकल पंक्ति के लिए singleLine="true")।

दूसरी समस्या — प्रोग्रामेटिक रूप से टेक्स्ट बदलने पर इलिप्सिस नहीं दिखता। setText() कॉल करने के बाद, TextView सही ढंग से पुनः आकर्षित नहीं हो सकता। समाधान: टेक्स्ट बदलने के बाद invalidate() या post(() -> requestLayout()) कॉल करें।

तीसरी समस्या — विभिन्न Android संस्करणों पर अलग व्यवहार। API 23 से पहले, मल्टीलाइन मोड (maxLines > 1) में ellipsize समर्थित नहीं था। समाधान: संगतता के लिए, Build.VERSION.SDK_INT जांचें और AndroidX से ViewCompat.setEllipsize() का उपयोग करें।

चौथी समस्या — कस्टम फ़ॉन्ट में इलिप्सिस कैरेक्टर प्रदर्शित नहीं होता। यदि फ़ॉन्ट में U+2026 ग्लिफ़ नहीं है, तो इलिप्सिस को तीन बिंदुओं से बदल दिया जाता है। समाधान: इलिप्सिस ग्लिफ़ की उपस्थिति के लिए फ़ॉन्ट जांचें या fontFamily के माध्यम से फ़ॉलबैक फ़ॉन्ट जोड़ें।