ایپلیکیشنز میں متحرک متن — یہ کیا ہے، اسے کیسے بنائیں اور ترتیب دیں

متحرک متن کیا ہے؟

متحرک متن ایک UI اثر ہے جس میں متن ایک مقررہ علاقے کے اندر افقی طور پر حرکت کرتا ہے، چکری طور پر اسکرول ہوتا ہے تاکہ صارف وہ تمام مواد پڑھ سکے جو کنٹینر میں فٹ نہیں ہوتا۔ ellipsize کے برعکس، جو متن کا کچھ حصہ چھپاتا ہے، marquee پورا متن دکھاتا ہے، لیکن حرکت میں۔

اصطلاح marquee HTML ٹیگ <marquee> کی بدولت قائم ہوئی، جو Netscape اور Internet Explorer براؤزرز کے ابتدائی ورژنز میں شامل کیا گیا تھا۔ یہ ٹیگ JavaScript یا CSS کے بغیر اسکرولنگ ٹیکسٹ بنانے کی اجازت دیتا تھا، لیکن کبھی HTML معیار کا حصہ نہیں تھا۔ جدید براؤزر پسماندہ مطابقت کے لیے اسے سپورٹ کرتے رہتے ہیں، لیکن اس کا استعمال تجویز نہیں کیا جاتا۔

موبائل ڈویلپمنٹ میں، marquee کمپیکٹ کنٹینرز میں لمبے لیبلز کا مسئلہ حل کرتا ہے: پلیئر میں ٹریک کے نام، کرنسی ٹکرز، TV اسکرینوں پر نیوز ٹکرز۔ تاہم، اینیمیشن کی وجہ سے، یہ قابلیت رسائی پر بوجھ ڈالتا ہے اور صارفین کو پریشان کر سکتا ہے — اس لیے یہ انتخابی طور پر استعمال ہوتا ہے۔

Nielsen Norman Group کی تحقیق (2023) کے مطابق، متحرک متن پڑھنے کی رفتار کو 15-20% کم کرتا ہے اور علمی بوجھ بڑھاتا ہے۔ marquee کو صرف اس وقت استعمال کریں جب جامد تراشنا (ellipsize) واقعی ناقابل قبول ہو۔

TextView کے ذریعے Android پر متحرک متن

Android پر، marquee TextView کے بلٹ ان میکانزم کے ذریعے android:ellipsize="marquee" وصف کے ساتھ لاگو ہوتا ہے۔ یہ واحد ellipsize موڈ ہے جو متن کو نہیں کاٹتا بلکہ اس کے اسکرولنگ کو متحرک کرتا ہے۔

marquee کو فعال کرنے کے لیے تین شرائط پوری ہونی چاہئیں: singleLine="true" (یا maxLines="1")، ellipsize="marquee"، اور کوڈ میں setSelected(true)۔ setSelected() کو کال کیے بغیر، اینیمیشن شروع نہیں ہوگی۔

<!-- XML layout -->
<TextView
    android:id="@+id/marquee_text"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever" />

// Kotlin: activate marquee
textView.setSelected(true)
textView.isSingleLine = true

marqueeRepeatLimit وصف اینیمیشن کی تکرار کی تعداد متعین کرتا ہے: marquee_forever (لامحدود) یا ایک مخصوص عدد۔ ڈیفالٹ marquee_forever ہے۔ اگر متن کنٹینر کی چوڑائی سے چھوٹا ہے، تو اینیمیشن شروع نہیں ہوتی — TextView جامد متن دکھاتا ہے۔

ایک اہم خصوصیت: setSelected(true) صرف اس وقت کام کرتا ہے جب TextView فوکس میں ہو یا منتخب موڈ میں ہو۔ RecyclerView میں، یہ مسائل پیدا کر سکتا ہے — اینیمیشن صرف ایک آئٹم کے لیے شروع ہوتی ہے۔ حل: ایک کسٹم MarqueeTextView بنائیں جو isFocused() کو اوور رائڈ کرے اور ہمیشہ true لوٹائے۔

Android 9 (API 28) سے شروع کرتے ہوئے، Google نے marquee کے رویے کو بہتر کیا — اینیمیشن ہموار ہو گئی اور فہرست اسکرول کرتے وقت منجمد نہیں ہوتی۔ تاہم، پرانے آلات پر، خاص طور پر زیادہ پکسل کثافت پر، marquee جھٹکے دے سکتا ہے۔

iOS پر اسکرولنگ ٹیکسٹ کا نفاذ

iOS میں android:ellipsize="marquee" کا کوئی بلٹ ان ہم منصب نہیں ہے۔ marquee کو دستی طور پر Core Animation یا SwiftUI اینیمیشن استعمال کرتے ہوئے لاگو کیا جاتا ہے۔ سب سے عام طریقہ ایک کلپنگ کنٹینر کے ساتھ layer.position کو اینیمیٹ کرنا ہے۔

UIKit میں، marquee تین عناصر پر بنایا جاتا ہے: clipsToBounds = true کے ساتھ UILabel کنٹینر، خود متن، اور X محور پر متن کو لامحدود تکرار کے ساتھ منتقل کرنے کے لیے ایک CABasicAnimation جس میں autoreverses = false ہو، تاکہ لائن ایک سمت میں اسکرول ہو اور واپس چھلانگ لگائے۔

func startMarquee(for label: UILabel) {
    label.clipsToBounds = true
    label.numberOfLines = 1

    let textWidth = (label.text as? NSString)?
        .size(withAttributes: [.font: label.font as any]).width ?? 0

    guard textWidth > label.bounds.width else { return }

    let animation = CABasicAnimation(keyPath: "position.x")
    animation.fromValue = label.layer.position.x + label.bounds.width / 2
    animation.toValue = label.layer.position.x - textWidth - label.bounds.width / 2
    animation.duration = CFTimeInterval(textWidth / 60)
    animation.repeatCount = .infinity
    animation.autoreverses = false
    label.layer.add(animation, forKey: "marquee")
}

duration = textWidth / 60 کا حساب لگانے سے تقریباً 60 پکسلز فی سیکنڈ کی رفتار ملتی ہے — پڑھنے کی آرام دہ رفتار۔ اگر رفتار 120 px/s سے تجاوز کر جائے تو متن ناقابل مطالعہ ہو جاتا ہے۔ اگر 30 px/s سے کم ہو تو اینیمیشن سست لگتی ہے۔ اپنے مخصوص منظر نامے کے مطابق رفتار کو ایڈجسٹ کریں۔

SwiftUI میں، marquee زیادہ آسانی سے لاگو ہوتا ہے — دہرانے والی اینیمیشن کے ساتھ offset() موڈیفائر اور .animation(.linear(duration:).repeatForever(autoreverses: false)) کے ذریعے۔ SwiftUI خود بخود اینیمیشن لائف سائیکل کا انتظام کرتا ہے لیکن متن کی چوڑائی متعین کرنے کے لیے GeometryReader کی ضرورت ہوتی ہے۔

marquee ٹیگ کے بجائے CSS اینیمیشن

ویب پر، متروک <marquee> ٹیگ تجویز نہیں کیا جاتا، اگرچہ براؤزر اسے سپورٹ کرتے رہتے ہیں۔ marquee کا جدید نفاذ keyframes اور transform: translateX کے ساتھ CSS اینیمیشن ہے۔

CSS طریقہ کار کے فوائد: رفتار، توقف اور اینیمیشن وکر پر مکمل کنٹرول، قابلیت رسائی کے لیے prefers-reduced-motion کی حمایت، اور معنوی طور پر غلط ٹیگ کی عدم موجودگی۔

.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 300px;
}
.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Pause on hover */
.marquee-content:hover {
    animation-play-state: paused;
}

کلیدی چال: مواد پر display: inline-block اس بات کو یقینی بناتا ہے کہ عنصر کی چوڑائی متن کی چوڑائی کے برابر ہو، اور translateX(-100%) اسے بالکل اس چوڑائی سے بائیں منتقل کرتا ہے۔ اگر مواد display: block ہے، تو translateX(-100%) کنٹینر کی چوڑائی کے برابر ہوگا، متن کی چوڑائی کے نہیں، اور اینیمیشن ٹوٹ جائے گی۔

قابلیت رسائی کے لیے، @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } } شامل کریں — ویسٹیبلر عارضے والے صارفین اسکرولنگ کی صلاحیت کے ساتھ جامد متن دیکھیں گے۔

کب استعمال کریں اور کب گریز کریں

marquee ان منظرناموں میں جائز ہے جہاں صارف خود کنٹینر کو پھیلا نہیں سکتا اور مکمل متن انتہائی اہم ہے: لاک اسکرین پر پلیئر میں موجودہ ٹریک، TV پینل پر نیوز ٹکر، رائڈ ہیلنگ ایپ میں marquee (آرڈر کی حالت)۔

marquee کو جدولوں، فہرستوں، فارموں اور ڈائیلاگ میں استعمال نہیں کرنا چاہیے — جہاں بھی صارف فعال طور پر انٹرفیس کے ساتھ تعامل کرتا ہے۔ اینیمیشن مقصد سے توجہ ہٹاتی ہے، عنصر کی تلاش کا وقت بڑھاتی ہے اور بے چینی پیدا کرتی ہے۔ WebAIM (2024) کے مطابق، ویسٹیبلر عارضے والے 3 میں سے 1 صارف متحرک متن دیکھتے وقت بے چینی کی اطلاع دیتا ہے۔

ایک عام اصول: اگر متن کو مختصر کیا جا سکتا ہے یا اگلی لائن میں لپیٹا جا سکتا ہے — تو کریں۔ marquee آخری حربہ ہے، لمبے لیبلز کے لیے عالمگیر حل نہیں۔

قابلیت رسائی: اینیمیشن اور کم حرکت

marquee قابلیت رسائی کے نقطہ نظر سے سب سے مسئلہ زدہ UI اینیمیشنز میں سے ایک ہے۔ متحرک متن ویسٹیبلر عارضے والے لوگوں میں چکر، متلی اور بدگمانی کا سبب بن سکتا ہے۔ WCAG 2.2 کے مطابق، 5 سیکنڈ سے زیادہ دیر تک چلنے والی کسی بھی اینیمیشن میں توقف یا غیر فعال کرنے کا میکانزم ہونا چاہیے۔

iOS پر، سسٹم سیٹنگ چیک کرنے کے لیے UIAccessibility.isReduceMotionEnabled پراپرٹی استعمال کریں۔ اگر reduceMotion فعال ہے — اینیمیشن شروع نہ کریں، ellipsize کے ساتھ جامد متن دکھائیں۔

Android پر، Settings.Global.ANIMATOR_DURATION_SCALE کے ذریعے سسٹم اینیمیشن چیک کریں۔ اگر عالمی اینیمیشن غیر فعال ہے (duration scale = 0)، تو marquee کو فعال نہیں کرنا چاہیے۔

ویب پر، prefers-reduced-motion میڈیا فیچر استعمال کریں: @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }۔ یہ ایک معیاری CSS خصوصیت ہے جو تمام جدید براؤزرز میں معاون ہے۔ DevTools میں چیک کریں: prefers-reduced-motion ایمولیشن کو فعال کریں اور تصدیق کریں کہ اینیمیشن بند ہو جاتی ہے۔