Ellipsize v mobilním vývoji — co to je a způsoby oříznutí textu

Co je Ellipsize?

Ellipsize (z anglického ellipsis — tři tečky) — je technika zobrazení textu, který přesahuje rozměry kontejneru. Místo prostého oříznutí řádku na hranici (clip) ellipsize přidává symbol tří teček (Unicode U+2026), který uživateli indikuje přítomnost skrytého obsahu.

Termín se ujal v Android SDK, kde vlastnost android:ellipsize určuje chování TextView při přetečení. Na iOS se analogická funkčnost nazývá truncation (oříznutí) a je řízena pomocí NSLineBreakMode. Na webu se používá vlastnost CSS text-overflow s hodnotou ellipsis.

Hlavním cílem ellipsize je informovat uživatele, že text byl zkrácen. Na rozdíl od pixelového ořezávání, kde může být slovo roztrženo na polovinu, ellipsize zaručuje čitelnost: tři tečky jsou umístěny za celým slovem nebo znakem, aniž by ho přerušovaly. To je v souladu s principy Material Design a Human Interface Guidelines.

Používejte ellipsize všude tam, kde je šířka kontejneru pevná a délka textu dynamická: nadpisy článků, buňky tabulek, tlačítka s popisky, kontakty v seznamu, drobečková navigace a cesty k souborům.

Ellipsize v Android: TextView a režimy

V Android se ellipsize konfiguruje pomocí atributu android:ellipsize v XML nebo metody setEllipsize() v kódu. K dispozici jsou čtyři režimy, z nichž každý určuje, ze které strany bude text oříznut.

Režim END (výchozí ve většině případů) ořezává konec řádku a umisťuje tři tečky do pravé části kontejneru. Režim START ořezává začátek — tři tečky vlevo, viditelný text vpravo. MIDDLE ořezává střed, přičemž začátek a konec řádku zůstávají viditelné. Režim MARQUEE — animované posouvání textu, při kterém se tři tečky nezobrazují a text se cyklicky posouvá.

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

Důležité: ellipsize funguje pouze v kombinaci s maxLines nebo singleLine. Pokud neomezíte počet řádků, TextView poroste na výšku a ellipsize se neaktivuje. Od Android 8.0 (API 26) ellipsize podporuje víceřádkový režim s maxLines > 1 — tři tečky jsou umístěny na konec posledního řádku.

Pro programové volání použijte TextUtils.TruncateAt s jednou z hodnot: END, START, MIDDLE, MARQUEE. Hodnota NONE vypíná ellipsize.

V praxi se END hodí pro 90% případů — uživatelé očekávají, že text je oříznut na konci. MIDDLE se používá pro cesty k souborům (např. "/User/.../project/main.kt"), aby byl viditelný konec cesty. START — pro názvy se společnou předponou (např. "...@gmail.com").

Oříznutí textu na iOS: NSLineBreakMode

Na iOS je analogem ellipsize vlastnost lineBreakMode třídy UILabel (a NSTextContainer pro UITextView). K dispozici jsou tři režimy oříznutí: .byTruncatingTail (konec), .byTruncatingMiddle (střed) a .byTruncatingHead (začátek).

Režim .byTruncatingTail odpovídá android:ellipsize="end". Režim .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. Režim .byClipping — ořezává text bez tří teček, zřídka používaný v moderních rozhraních. Režim .byCharWrapping — zalomení po znacích bez oříznutí.

let label = UILabel()
label.text = "Dlouhý text, který se nevejde do hranic popisku"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString také podporuje lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

V iOS truncation funguje ve spojení s numberOfLines. Pokud numberOfLines = 1, text je oříznut na jednom řádku. Pokud numberOfLines = 2 — na druhém řádku. UITextView používá NSTextContainer.lineBreakMode, který také podporuje všechny tři režimy oříznutí.

Zvláštnost iOS: režim .byTruncatingMiddle na UILabel se může chovat neočekávaně na krátkých řádcích — pokud se řádek zcela vejde, tři tečky se nezobrazí. Pro zaručené zobrazení tří teček na krátkých řádcích použijte vlastní logiku přes sizeThatFits.

CSS text-overflow: jak udělat tři tečky na webu

Na webu je ellipsize implementováno pomocí CSS vlastnosti text-overflow: ellipsis v kombinaci s overflow: hidden a white-space: nowrap. Toto je standardní způsob oříznutí řádku se třemi tečkami ve webových rozhraních.

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

Vlastnost text-overflow nefunguje bez overflow: hidden — prohlížeč musí vědět, že obsah je oříznut. white-space: nowrap zakazuje zalomení řádku, jinak by text přešel na další řádek a nedošlo by k přetečení.

Pro víceřádkové oříznutí (např. 2 řádky se třemi tečkami na konci druhého) se dříve používala experimentální vlastnost -webkit-line-clamp, která je nyní standardizována jako line-clamp v CSS Overflow Level 4.

V praxi je text-overflow: ellipsis podporováno všemi moderními prohlížeči více než 10 let a je nejspolehlivějším způsobem oříznutí textu na webu.

Jak vybrat správný režim oříznutí

Výběr režimu ellipsize ovlivňuje UX a může jak zlepšit vnímání rozhraní, tak uživatele zmást. Hlavní pravidlo: uživatel očekává, že oříznutá část je tam, kde je nejméně potřebná k pochopení.

Režim END se hodí pro nadpisy, popisky, názvy — uživatel vidí začátek řádku a rozumí kontextu. Tři tečky vpravo znamenají „existuje pokračování, ale nevešlo se“. Toto je nejintuitivnější a nejrozšířenější režim.

Režim MIDDLE je nepostradatelný pro cesty k souborům, e-mailové adresy a dlouhé identifikátory. Když konec řádku obsahuje jedinečnou informaci (název souboru, doménu), uživatel by měl vidět právě ji a začátek lze zkrátit. Příklad: "/User/.../important_document.pdf" — okamžitě je vidět název souboru.

Režim START se používá zřídka, ale je užitečný pro seznam kontaktů se společnou předponou — například "...@gmail.com" místo "username@gmail.com", když všechny adresy patří ke stejné doméně. Tento vzor však spíše mate, než pomáhá. Podle Nielsen Norman Group uživatelé čtou zleva doprava a očekávají důležité informace na začátku, proto START oříznutí zvyšuje kognitivní zátěž.

Režim MARQUEE (běžící text) je vhodný pouze pro jednořádkové prvky s nízkou frekvencí aktualizace: aktuální skladba v přehrávači, zpravodajský ticker, stavový řádek. Nepoužívejte marquee v tabulkách, seznamech nebo formulářích — animace rozptyluje a snižuje výkon na slabých zařízeních.

Typické problémy a jejich řešení

První problém — ellipsize nefunguje. Nejčastější příčinou je chybějící omezení počtu řádků. Bez maxLines TextView roste na výšku a nedochází k přetečení na šířku. Řešení: vždy uvádějte maxLines (nebo singleLine="true" pro jeden řádek).

Druhý problém — tři tečky se nezobrazují při programové změně textu. Po volání setText() se TextView nemusí správně překreslit. Řešení: po změně textu zavolejte invalidate() nebo post(() -> requestLayout()).

Třetí problém — odlišné chování na různých verzích Android. Před API 23 nebylo ellipsize ve víceřádkovém režimu (maxLines > 1) podporováno. Řešení: pro kompatibilitu zkontrolujte Build.VERSION.SDK_INT a použijte ViewCompat.setEllipsize() z AndroidX.

Čtvrtý problém — symbol tří teček se nezobrazuje ve vlastních fontech. Pokud font neobsahuje glyf U+2026, tři tečky jsou nahrazeny třemi tečkami. Řešení: zkontrolujte font na přítomnost glyfu ellipsis nebo přidejte záložní font pomocí fontFamily.