Ellipsize sa mobile development — ano ito at mga paraan ng pagputol ng teksto

Ano ang Ellipsize?

Ellipsize (mula sa Ingles na ellipsis — ellipsis) — ay isang teknik sa pagpapakita ng teksto na lumalampas sa sukat ng lalagyan. Sa halip na simpleng pagputol ng linya sa hangganan (clip), ang ellipsize ay nagdaragdag ng simbolo ng ellipsis (Unicode U+2026), na nagpapahiwatig sa gumagamit ng pagkakaroon ng nakatagong nilalaman.

Ang termino ay naitatag sa Android SDK, kung saan ang property na android:ellipsize ay tumutukoy sa pag-uugali ng TextView sa pag-apaw. Sa iOS, ang kahalintulad na functionality ay tinatawag na truncation (pagputol) at pinamamahalaan sa pamamagitan ng NSLineBreakMode. Sa web, ginagamit ang CSS property na text-overflow na may halagang ellipsis.

Ang pangunahing layunin ng ellipsize ay ipaalam sa gumagamit na ang teksto ay pinaikli. Hindi tulad ng pagputol nang pixel kung saan ang salita ay maaaring mahati sa dalawa, ginagarantiyahan ng ellipsize ang pagiging nababasa: ang ellipsis ay inilalagay pagkatapos ng buong salita o karakter, nang hindi ito pinuputol. Ito ay naaayon sa mga prinsipyo ng Material Design at Human Interface Guidelines.

Gamitin ang ellipsize saanman ang lapad ng lalagyan ay nakapirmi at ang haba ng teksto ay dinamiko: mga heading ng artikulo, cell ng talahanayan, button na may label, contact sa listahan, breadcrumbs, at mga path ng file.

Ellipsize sa Android: TextView at mga mode

Sa Android, ang ellipsize ay naka-configure sa pamamagitan ng attribute na android:ellipsize sa XML o paraang setEllipsize() sa code. May apat na mode na available, na bawat isa ay tumutukoy kung saang panig pinuputol ang teksto.

Ang mode na END (default sa karamihan ng kaso) ay pumuputol sa dulo ng linya at naglalagay ng ellipsis sa kanang bahagi ng lalagyan. Ang mode na START ay pumuputol sa simula — ellipsis sa kaliwa, nakikitang teksto sa kanan. Ang MIDDLE ay pumuputol sa gitna, iniiwan ang simula at dulo ng linya na nakikita. Ang mode na MARQUEE — animated na pag-scroll ng teksto, kung saan ang ellipsis ay hindi ipinapakita at ang teksto ay pabilog na nag-scroll.

<!-- 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)

Mahalaga: ang ellipsize ay gumagana lamang sa kombinasyon ng maxLines o singleLine. Kung hindi mo lilimitahan ang bilang ng linya, ang TextView ay lalaki sa taas at hindi mag-a-activate ang ellipsize. Simula sa Android 8.0 (API 26), ang ellipsize ay sumusuporta sa multi-line mode na may maxLines > 1 — ang ellipsis ay inilalagay sa dulo ng huling linya.

Para sa programmatic na tawag, gamitin ang TextUtils.TruncateAt na may isa sa mga halaga: END, START, MIDDLE, MARQUEE. Ang halagang NONE ay nagdi-disable ng ellipsize.

Sa praktika, ang END ay angkop sa 90% ng mga kaso — inaasahan ng mga gumagamit na ang teksto ay pinuputol sa dulo. Ang MIDDLE ay ginagamit para sa mga path ng file (halimbawa, "/User/.../project/main.kt") upang makita ang dulo ng path. START — para sa mga pangalan na may karaniwang prefix (halimbawa, "...@gmail.com").

Pagputol ng teksto sa iOS: NSLineBreakMode

Sa iOS, ang katumbas ng ellipsize ay ang property na lineBreakMode ng klaseng UILabel (at NSTextContainer para sa UITextView). May tatlong mode ng pagputol na available: .byTruncatingTail (dulo), .byTruncatingMiddle (gitna), at .byTruncatingHead (simula).

Ang mode na .byTruncatingTail ay tumutugma sa android:ellipsize="end". Ang mode na .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. Ang mode na .byClipping — pumuputol ng teksto nang walang ellipsis, bihirang ginagamit sa modernong interface. Ang mode na .byCharWrapping — pagbabalot ayon sa karakter nang walang pagputol.

let label = UILabel()
label.text = "Mahabang teksto na hindi kasya sa mga hangganan ng label"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// Sinusuportahan din ng NSAttributedString ang lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

Sa iOS, ang truncation ay gumagana kasama ng numberOfLines. Kung numberOfLines = 1, ang teksto ay pinuputol sa isang linya. Kung numberOfLines = 2 — sa pangalawang linya. Ang UITextView ay gumagamit ng NSTextContainer.lineBreakMode, na sumusuporta rin sa lahat ng tatlong mode ng pagputol.

Katangian ng iOS: ang mode na .byTruncatingMiddle sa UILabel ay maaaring kumilos nang hindi inaasahan sa maiikling linya — kung ganap na kasya ang linya, hindi lilitaw ang ellipsis. Para sa garantisadong pagpapakita ng ellipsis sa maiikling linya, gumamit ng custom na lohika sa pamamagitan ng sizeThatFits.

CSS text-overflow: paano gumawa ng ellipsis sa web

Sa web, ang ellipsize ay ipinapatupad sa pamamagitan ng CSS property na text-overflow: ellipsis sa kombinasyon ng overflow: hidden at white-space: nowrap. Ito ang karaniwang paraan ng pagputol ng linya na may ellipsis sa mga web interface.

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

Ang property na text-overflow ay hindi gumagana nang walang overflow: hidden — kailangan malaman ng browser na ang nilalaman ay pinuputol. Ang white-space: nowrap ay nagbabawal sa pagbabalot ng linya, kung hindi ay lilipat ang teksto sa susunod na linya at hindi magkakaroon ng pag-apaw.

Para sa multi-line na pagputol (halimbawa, 2 linya na may ellipsis sa dulo ng pangalawang linya) dati ginamit ang eksperimental na property na -webkit-line-clamp, na ngayon ay na-standardize bilang line-clamp sa CSS Overflow Level 4.

Sa praktika, ang text-overflow: ellipsis ay sinusuportahan ng lahat ng modernong browser nang higit sa 10 taon at ito ang pinaka-maaasahang paraan ng pagputol ng teksto sa web.

Paano pumili ng tamang mode ng pagputol

Ang pagpili ng mode ng ellipsize ay nakakaapekto sa UX at maaaring parehong mapabuti ang persepsyon ng interface at malito ang gumagamit. Pangunahing patakaran: inaasahan ng gumagamit na ang pinuputol na bahagi ay nasa lugar kung saan ito pinaka-kaunting kailangan para sa pag-unawa.

Ang mode na END ay angkop para sa mga heading, label, pangalan — nakikita ng gumagamit ang simula ng linya at nauunawaan ang konteksto. Ang ellipsis sa kanan ay nangangahulugang "mayroong karugtong, ngunit hindi ito kasya". Ito ang pinaka-intuitive at malawakang ginagamit na mode.

Ang mode na MIDDLE ay hindi mapapalitan para sa mga path ng file, email address, at mahabang identifier. Kapag ang dulo ng linya ay naglalaman ng natatanging impormasyon (pangalan ng file, domain), dapat makita ito ng gumagamit, at ang simula ay maaaring paikliin. Halimbawa: "/User/.../important_document.pdf" — agad na makikita ang pangalan ng file.

Ang mode na START ay bihirang ginagamit, ngunit kapaki-pakinabang para sa listahan ng contact na may karaniwang prefix — halimbawa, "...@gmail.com" sa halip na "username@gmail.com", kapag ang lahat ng address ay kabilang sa iisang domain. Gayunpaman, ang pattern na ito ay mas madalas na nakalilito kaysa nakakatulong. Ayon sa Nielsen Norman Group, ang mga gumagamit ay nagbabasa mula kaliwa pakanan at inaasahan ang mahalagang impormasyon sa simula, kaya ang pagputol ng START ay nagpapataas ng cognitive load.

Ang mode na MARQUEE (tumatakbong teksto) ay angkop lamang para sa mga single-line na elemento na may mababang frequency ng pag-update: kasalukuyang track sa player, ticker ng balita, status bar. Huwag gamitin ang marquee sa mga table, listahan, o form — nakakaabala ang animation at nagpapababa ng performance sa mahihinang device.

Mga karaniwang problema at solusyon

Unang problema — hindi gumagana ang ellipsize. Kadalasan ang dahilan ay ang kawalan ng limitasyon sa bilang ng linya. Kung walang maxLines, ang TextView ay lalaki sa taas at hindi magkakaroon ng pag-apaw sa lapad. Solusyon: laging tukuyin ang maxLines (o singleLine="true" para sa isang linya).

Ikalawang problema — hindi lumilitaw ang ellipsis sa programmatic na pagbabago ng teksto. Pagkatapos tawagan ang setText(), maaaring hindi maayos na mag-redraw ang TextView. Solusyon: tawagan ang invalidate() o post(() -> requestLayout()) pagkatapos baguhin ang teksto.

Ikatlong problema — magkaibang pag-uugali sa iba't ibang bersyon ng Android. Bago ang API 23, ang ellipsize sa multi-line mode (maxLines > 1) ay hindi suportado. Solusyon: para sa compatibility, suriin ang Build.VERSION.SDK_INT at gamitin ang ViewCompat.setEllipsize() mula sa AndroidX.

Ikaapat na problema — hindi lumilitaw ang simbolo ng ellipsis sa custom na font. Kung ang font ay hindi naglalaman ng glyph na U+2026, ang ellipsis ay pinapalitan ng tatlong tuldok. Solusyon: suriin ang font para sa pagkakaroon ng ellipsis glyph o magdagdag ng fallback font sa pamamagitan ng fontFamily.