Ellipsize în dezvoltarea mobilă — ce este și metode de tăiere a textului

Ce este Ellipsize?

Ellipsize (din engleză ellipsis — puncte de suspensie) — este o tehnică de afișare a textului care depășește dimensiunile containerului. În loc să taie pur și simplu linia la margine (clip), ellipsize adaugă simbolul punctelor de suspensie (trei puncte, Unicode U+2026), indicând utilizatorului existența conținutului ascuns.

Termenul s-a consacrat în Android SDK, unde proprietatea android:ellipsize determină comportamentul TextView la depășire. Pe iOS, funcționalitatea analogă se numește truncation (tăiere) și este gestionată prin NSLineBreakMode. În web se folosește proprietatea CSS text-overflow cu valoarea ellipsis.

Scopul principal al ellipsize este informarea utilizatorului că textul a fost scurtat. Spre deosebire de tăierea la nivel de pixeli, unde cuvântul poate fi rupt în jumătate, ellipsize garantează lizibilitatea: punctele de suspensie sunt plasate după un cuvânt sau caracter întreg, fără a-l întrerupe. Acest lucru este conform cu principiile Material Design și Human Interface Guidelines.

Folosiți ellipsize oriunde lățimea containerului este fixă, iar lungimea textului este dinamică: titluri de articole, celule de tabel, butoane cu etichete, contacte în listă, breadcrumbs și căi de fișiere.

Ellipsize în Android: TextView și moduri

În Android, ellipsize se configurează prin atributul android:ellipsize în XML sau metoda setEllipsize() în cod. Sunt disponibile patru moduri, fiecare determinând din ce parte va fi tăiat textul.

Modul END (implicit în majoritatea cazurilor) taie sfârșitul liniei și plasează punctele de suspensie în partea dreaptă a containerului. Modul START taie începutul — puncte de suspensie în stânga, text vizibil în dreapta. MIDDLE taie mijlocul, lăsând începutul și sfârșitul liniei vizibile. Modul MARQUEE — derulare animată a textului, în care punctele de suspensie nu sunt afișate, iar textul se derulează circular.

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

Important: ellipsize funcționează doar în combinație cu maxLines sau singleLine. Dacă nu limitați numărul de linii, TextView va crește în înălțime, iar ellipsize nu se va activa. Începând cu Android 8.0 (API 26), ellipsize suportă modul multi-linie cu maxLines > 1 — punctele de suspensie sunt plasate la sfârșitul ultimei linii.

Pentru apel programatic, utilizați TextUtils.TruncateAt cu una dintre valorile: END, START, MIDDLE, MARQUEE. Valoarea NONE dezactivează ellipsize.

În practică, END se potrivește în 90% din cazuri — utilizatorii se așteaptă ca textul să fie tăiat la sfârșit. MIDDLE este utilizat pentru căi de fișiere (de exemplu, "/User/.../project/main.kt"), astfel încât sfârșitul căii să fie vizibil. START — pentru nume cu prefix comun (de exemplu, "...@gmail.com").

Tăierea textului pe iOS: NSLineBreakMode

Pe iOS, analogul ellipsize este proprietatea lineBreakMode a clasei UILabel (și NSTextContainer pentru UITextView). Sunt disponibile trei moduri de tăiere: .byTruncatingTail (sfârșit), .byTruncatingMiddle (mijloc) și .byTruncatingHead (început).

Modul .byTruncatingTail corespunde lui android:ellipsize="end". Modul .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. Modul .byClipping — taie textul fără puncte de suspensie, rar utilizat în interfețele moderne. Modul .byCharWrapping — împachetare pe caractere fără tăiere.

let label = UILabel()
label.text = "Textul lung care nu încape în limitele etichetei"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString suportă, de asemenea, lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

În iOS, truncation funcționează împreună cu numberOfLines. Dacă numberOfLines = 1, textul este tăiat pe o singură linie. Dacă numberOfLines = 2 — pe a doua linie. UITextView utilizează NSTextContainer.lineBreakMode, care suportă, de asemenea, toate cele trei moduri de tăiere.

Particularitate iOS: modul .byTruncatingMiddle pe UILabel se poate comporta neașteptat pe linii scurte — dacă linia încape complet, punctele de suspensie nu apar. Pentru afișarea garantată a punctelor de suspensie pe linii scurte, utilizați o logică personalizată prin sizeThatFits.

CSS text-overflow: cum să faci puncte de suspensie în web

În web, ellipsize se implementează prin proprietatea CSS text-overflow: ellipsis în combinație cu overflow: hidden și white-space: nowrap. Aceasta este metoda standard de tăiere a liniei cu puncte de suspensie în interfețele web.

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

Proprietatea text-overflow nu funcționează fără overflow: hidden — browserul trebuie să știe că conținutul este tăiat. white-space: nowrap interzice împachetarea liniei, altfel textul va trece pe linia următoare și nu va avea loc depășirea.

Pentru tăierea pe mai multe linii (de exemplu, 2 linii cu puncte de suspensie la sfârșitul celei de-a doua), anterior se utiliza proprietatea experimentală -webkit-line-clamp, care acum este standardizată ca line-clamp în CSS Overflow Level 4.

În practică, text-overflow: ellipsis este suportat de toate browserele moderne de peste 10 ani și este cea mai fiabilă metodă de tăiere a textului în web.

Cum să alegi modul potrivit de tăiere

Alegerea modului ellipsize influențează UX și poate atât îmbunătăți percepția interfeței, cât și deruta utilizatorul. Regula principală: utilizatorul se așteaptă ca partea tăiată să fie acolo unde este cel mai puțin necesară pentru înțelegere.

Modul END se potrivește pentru titluri, etichete, nume — utilizatorul vede începutul liniei și înțelege contextul. Punctele de suspensie în dreapta înseamnă „există continuare, dar nu a încăput”. Acesta este cel mai intuitiv și răspândit mod.

Modul MIDDLE este de neînlocuit pentru căi de fișiere, adrese de e-mail și identificatori lungi. Când sfârșitul liniei conține informații unice (nume fișier, domeniu), utilizatorul trebuie să vadă exact acesta, iar începutul poate fi scurtat. Exemplu: "/User/.../important_document.pdf" — se vede imediat numele fișierului.

Modul START este rar utilizat, dar util pentru liste de contacte cu prefix comun — de exemplu, "...@gmail.com" în loc de "username@gmail.com", atunci când toate adresele aparțin aceluiași domeniu. Totuși, acest model mai mult derutează decât ajută. Conform Nielsen Norman Group, utilizatorii citesc de la stânga la dreapta și se așteaptă la informații importante la început, astfel că tăierea START crește încărcătura cognitivă.

Modul MARQUEE (text derulant) este potrivit doar pentru elemente pe o singură linie cu frecvență scăzută de actualizare: piesa curentă în player, ticker de știri, bară de stare. Nu utilizați marquee în tabele, liste sau formulare — animația distrage atenția și reduce performanța pe dispozitive slabe.

Probleme tipice și soluțiile lor

Prima problemă — ellipsize nu funcționează. Cel mai adesea, cauza este lipsa limitării numărului de linii. Fără maxLines, TextView crește în înălțime și nu are loc depășirea pe lățime. Soluție: specificați întotdeauna maxLines (sau singleLine="true" pentru o singură linie).

A doua problemă — punctele de suspensie nu apar la modificarea programatică a textului. După apelul setText(), TextView poate să nu se redeseneze corect. Soluție: apelați invalidate() sau post(() -> requestLayout()) după modificarea textului.

A treia problemă — comportament diferit pe versiuni diferite de Android. Înainte de API 23, ellipsize în modul multi-linie (maxLines > 1) nu era suportat. Soluție: pentru compatibilitate, verificați Build.VERSION.SDK_INT și utilizați ViewCompat.setEllipsize() din AndroidX.

A patra problemă — simbolul punctelor de suspensie nu se afișează în fonturi personalizate. Dacă fontul nu conține gliful U+2026, punctele de suspensie sunt înlocuite cu trei puncte. Soluție: verificați fontul pentru prezența glifului ellipsis sau adăugați un font de rezervă prin fontFamily.