موبائل ڈویلپمنٹ میں 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 کے ذریعے فال بیک فونٹ شامل کریں۔