Tumatakbong teksto sa mga app — ano ito, paano gumawa at mag-ayos

Ano ang tumatakbong teksto?

Tumatakbong teksto — ay isang UI effect kung saan ang teksto ay gumagalaw nang pahalang sa loob ng isang nakapirming lugar, paikot na nag-scroll upang mabasa ng user ang lahat ng nilalaman na hindi kasya sa lalagyan. Hindi tulad ng ellipsize na nagtatago ng bahagi ng teksto, ipinapakita ng marquee ang buong teksto, ngunit gumagalaw.

Ang terminong marquee (Ingles — “tolda”, “panindang billboard”) ay naging matatag dahil sa HTML tag na <marquee>, na idinagdag sa mga unang bersyon ng Netscape at Internet Explorer browser. Pinapayagan ng tag na ito ang paggawa ng gumagalaw na teksto nang walang JavaScript at CSS, ngunit hindi kailanman naging bahagi ng HTML standard. Ang mga modernong browser ay patuloy na sumusuporta dito para sa backward compatibility, ngunit ang paggamit nito ay hindi inirerekomenda.

Sa mobile development, nilulutas ng tumatakbong teksto ang problema ng mahabang label sa mga compact na lalagyan: mga pangalan ng kanta sa player, ticker ng exchange rate, mga linya ng balita sa mga TV screen. Gayunpaman, dahil sa animation, pinapabigat nito ang accessibility at maaaring makairita sa mga user — kaya't ginagamit ito nang piling-pili.

Ayon sa pananaliksik ng Nielsen Norman Group (2023), ang gumagalaw na teksto ay nagbabawas ng bilis ng pagbasa ng 15-20% at nagpapataas ng cognitive load. Gamitin lamang ang tumatakbong teksto kapag ang static na pagputol (ellipsize) ay talagang hindi katanggap-tanggap.

Tumatakbong teksto sa Android sa pamamagitan ng TextView

Sa Android, ang tumatakbong teksto ay na-implement sa pamamagitan ng built-in na mekanismo ng TextView gamit ang attribute na android:ellipsize="marquee". Ito ang tanging ellipsize mode na hindi pumutol ng teksto, kundi ina-animate ang pag-scroll nito.

Para i-activate ang marquee, tatlong kondisyon ang dapat matupad: singleLine="true" (o maxLines="1"), ellipsize="marquee" at setSelected(true) sa code. Kung walang setSelected(), hindi magsisimula ang animation.

<!-- 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: i-activate ang marquee
textView.setSelected(true)
textView.isSingleLine = true

Ang attribute na marqueeRepeatLimit ay tumutukoy sa bilang ng pag-uulit ng animation: marquee_forever (walang hanggan) o isang partikular na numero. Default — marquee_forever. Kung ang teksto ay mas maikli kaysa sa lapad ng lalagyan, hindi magsisimula ang animation — ang TextView ay nagpapakita ng static na teksto.

Mahalagang feature: ang setSelected(true) ay gumagana lamang kapag ang TextView ay may focus o nasa selected mode. Sa RecyclerView, ito ay maaaring magdulot ng problema — ang animation ay magsisimula lamang para sa isang elemento. Solusyon — gumamit ng custom na MarqueeTextView na nag-o-override ng isFocused() at palaging nagbabalik ng true.

Simula sa Android 9 (API 28), pinabuti ng Google ang pag-uugali ng marquee — ang animation ay naging mas makinis at hindi nagyeyelo kapag nag-scroll ng listahan. Gayunpaman, sa mga lumang device, ang marquee ay maaaring kumalog, lalo na sa mataas na pixel density.

Pag-implement ng scrolling text sa iOS

Sa iOS, walang built-in na katumbas ng android:ellipsize="marquee". Ang tumatakbong teksto ay na-implement nang manu-mano sa pamamagitan ng Core Animation o gamit ang SwiftUI animation. Ang pinakakaraniwang approach — animation ng layer.position kasama ng clipping container.

Sa UIKit, ang tumatakbong teksto ay binuo sa tatlong elemento: lalagyan ng UILabel na may clipsToBounds = true, ang teksto mismo, at CABasicAnimation para ilipat ang teksto sa X na may walang hanggang pag-uulit at autoreverses = false, upang ang bar ay gumulong sa isang direksyon at bumalik nang may pagtalon.

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")
}

Ang pagkalkula ng duration = textWidth / 60 ay nagbibigay ng bilis na humigit-kumulang 60 pixels bawat segundo — komportableng tempo para sa pagbasa. Kung ang bilis ay higit sa 120 px/s, ang teksto ay nagiging hindi mabasa. Kung mas mababa sa 30 px/s — ang animation ay mukhang mabagal. Baguhin ang speed ayon sa partikular na sitwasyon.

Sa SwiftUI, ang tumatakbong teksto ay mas simple i-implement — sa pamamagitan ng offset() modifier na may paulit-ulit na animation at .animation(.linear(duration:).repeatForever(autoreverses: false)). Awtomatikong pinamamahalaan ng SwiftUI ang lifecycle ng animation, ngunit nangangailangan ng GeometryReader para matukoy ang lapad ng teksto.

CSS animation sa halip ng marquee tag

Sa web, ang lumang tag na <marquee> ay hindi inirerekomenda para sa paggamit, kahit na patuloy itong sinusuportahan ng mga browser. Ang modernong implementasyon ng tumatakbong teksto — CSS animation na may keyframes at transform: translateX.

Mga bentahe ng CSS approach: buong kontrol sa bilis, pause, at curve ng animation, suporta para sa prefers-reduced-motion para sa accessibility, kawalan ng semantically incorrect na tag.

.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;
}

Ang pangunahing trick: ang display: inline-block sa content ay ginagarantiyahan na ang lapad ng elemento ay katumbas ng lapad ng teksto, at ang translateX(-100%) ay naglilipat nito nang eksakto sa lapad na iyon pakaliwa. Kung ang content ay may display: block, ang translateX(-100%) ay magiging katumbas ng lapad ng lalagyan, hindi ng teksto, at masisira ang animation.

Para sa accessibility, magdagdag ng @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } } — ang mga user na may vestibular disorder ay makakakita ng static na teksto na may kakayahang mag-scroll.

Kailan gagamitin at kailan iwasan

Ang tumatakbong teksto ay makatarungan sa mga sitwasyon kung saan hindi mapapalaki ng user ang lalagyan at ang buong teksto ay kritikal: kasalukuyang kanta sa player sa naka-lock na screen, linya ng balita sa TV panel, tumatakbong teksto sa taxi app (status ng order).

Ang tumatakbong teksto ay hindi dapat gamitin sa mga table, listahan, form, at dialog — kahit saan ang user ay aktibong nakikipag-ugnayan sa interface. Ang animation ay nakakagambala, nagpapataas ng oras ng paghahanap ng elemento, at nagdudulot ng discomfort. Ayon sa WebAIM (2024), 1 sa 3 user na may vestibular disorder ay nag-uulat ng discomfort kapag nanonood ng animated na teksto.

Panuntunan: kung ang teksto ay maaaring paikliin o ilagay sa susunod na linya — gawin ito. Ang tumatakbong teksto ay huling paraan, hindi isang unibersal na solusyon para sa mahabang label.

Accessibility: animation at reduced motion

Ang tumatakbong teksto ay isa sa mga pinaka problematic na UI animation mula sa pananaw ng accessibility. Ang gumagalaw na teksto ay maaaring magdulot ng pagkahilo, pagduduwal, at disorientation sa mga taong may vestibular disorder. Ayon sa WCAG 2.2, bawat animation na tumatagal ng higit sa 5 segundo ay dapat may mekanismo ng pause o pag-disable.

Sa iOS, gamitin ang property na UIAccessibility.isReduceMotionEnabled para suriin ang setting ng system. Kung naka-enable ang reduceMotion — huwag patakbuhin ang animation, magpakita ng static na teksto na may ellipsize.

Sa Android, suriin ang system animation sa pamamagitan ng Settings.Global.ANIMATOR_DURATION_SCALE. Kung ang global animation ay naka-disable (duration scale = 0), ang tumatakbong teksto ay hindi dapat i-activate.

Sa web, gamitin ang media function na prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }. Ito ay isang standard na CSS capability na sinusuportahan ng lahat ng modernong browser. Suriin sa DevTools: i-enable ang emulation ng prefers-reduced-motion at siguraduhing naka-disable ang animation.