Ellipsize у мобилном развоју — шта је то и начини скраћивања текста

Шта је Ellipsize?

Ellipsize (од енгл. ellipsis — три тачке) — је техника приказивања текста који премашује димензије контејнера. Уместо једноставног одсецања линије по граници (clip), ellipsize додаје симбол три тачке (Unicode U+2026), указујући кориснику на постојање скривеног садржаја.

Термин се учврстио у Android SDK, где својство android:ellipsize одређује понашање TextView при преливању. На iOS аналогиa функционалност се назива truncation (скраћивање) и управља се преко NSLineBreakMode. У вебу се користи CSS својство text-overflow са вредношћу ellipsis.

Главни циљ ellipsize је информисање корисника да је текст скраћен. За разлику од пикселског одсецања, где реч може бити преполовљена, ellipsize гарантује читљивост: три тачке се постављају после целе речи или знака, не разбијајући је. Ово је у складу са принципима Material Design и Human Interface Guidelines.

Користите ellipsize свуда где је ширина контејнера фиксна, а дужина текста динамичка: наслови чланака, ћелије табела, дугмад са натписима, контакти у листи, breadcrumbs и путање фајлова.

Ellipsize у Android: TextView и режими

У Android ellipsize се подешава преко атрибута android:ellipsize у XML или методе 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-а је својство lineBreakMode класе UILabel (и NSTextContainer за UITextView). Доступна су три режима скраћивања: .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 truncation ради у пару са numberOfLines. Ако је numberOfLines = 1, текст се скраћује на једној линији. Ако је numberOfLines = 2 — на другој линији. UITextView користи NSTextContainer.lineBreakMode, који такође подржава сва три режима скраћивања.

Особеност iOS: режим .byTruncatingMiddle на UILabel се може понашати неочекивано на кратким линијама — ако линија у потпуности стане, три тачке се не појављују. За гарантовано приказивање три тачке на кратким линијама користите прилагођену логику преко 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, које је сада стандардизовано као line-clamp у CSS Overflow Level 4.

У пракси 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 ellipsize у вишелинијском режиму (maxLines > 1) није био подржан. Решење: за компатибилност проверите Build.VERSION.SDK_INT и користите ViewCompat.setEllipsize() из AndroidX.

Четврти проблем — симбол три тачке се не приказује у прилагођеним фонтовима. Ако фонт не садржи глиф U+2026, три тачке се замењују са три тачке. Решење: проверите фонт за присуство ellipsis глифа или додајте fallback фонт преко fontFamily.