Ellipsize in mobiele ontwikkeling — wat is het en methoden voor tekstafkapping

Wat is Ellipsize?

Ellipsize (van Engels ellipsis — weglatingsteken) — is een techniek voor het weergeven van tekst die de containergrenzen overschrijdt. In plaats van simpelweg de regel af te knippen op de grens (clip), voegt ellipsize een weglatingsteken (Unicode U+2026) toe, waarmee de gebruiker wordt geïnformeerd over verborgen inhoud.

De term is verankerd in de Android SDK, waar de eigenschap android:ellipsize het gedrag van TextView bij overloop bepaalt. Op iOS heet de analoge functionaliteit truncation (afkapping) en wordt beheerd via NSLineBreakMode. In het web wordt de CSS-eigenschap text-overflow met de waarde ellipsis gebruikt.

Het belangrijkste doel van ellipsize is de gebruiker informeren dat de tekst is ingekort. In tegenstelling tot pixelsgewijs knippen, waarbij een woord doormidden kan worden gebroken, garandeert ellipsize leesbaarheid: het weglatingsteken wordt na een volledig woord of teken geplaatst, zonder het te breken. Dit is in overeenstemming met de principes van Material Design en Human Interface Guidelines.

Gebruik ellipsize overal waar de containerbreedte vast is en de tekstlengte dynamisch is: artikelkoppen, tabelcellen, knoppen met labels, contacten in lijsten, broodkruimels en bestandspaden.

Ellipsize in Android: TextView en modi

In Android wordt ellipsize geconfigureerd via het attribuut android:ellipsize in XML of de methode setEllipsize() in code. Er zijn vier modi beschikbaar, die elk bepalen aan welke kant de tekst wordt afgekapt.

Modus END (standaard in de meeste gevallen) kapt het einde van de regel af en plaatst het weglatingsteken aan de rechterkant van de container. Modus START kapt het begin af — weglatingsteken links, zichtbare tekst rechts. MIDDLE kapt het midden af, waarbij het begin en einde van de regel zichtbaar blijven. Modus MARQUEE — geanimeerd scrollen van tekst, waarbij het weglatingsteken niet wordt getoond en de tekst cyclisch scrollt.

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

Belangrijk: ellipsize werkt alleen in combinatie met maxLines of singleLine. Als u het aantal regels niet beperkt, groeit TextView in hoogte en wordt ellipsize niet geactiveerd. Vanaf Android 8.0 (API 26) ondersteunt ellipsize de meerregelige modus met maxLines > 1 — het weglatingsteken wordt aan het einde van de laatste regel geplaatst.

Voor programmatische aanroep gebruikt u TextUtils.TruncateAt met een van de waarden: END, START, MIDDLE, MARQUEE. De waarde NONE schakelt ellipsize uit.

In de praktijk is END geschikt voor 90% van de gevallen — gebruikers verwachten dat tekst aan het einde is afgekapt. MIDDLE wordt gebruikt voor bestandspaden (bijv. "/User/.../project/main.kt") zodat het einde van het pad zichtbaar is. START — voor namen met een gemeenschappelijk voorvoegsel (bijv. "...@gmail.com").

Tekstafkapping op iOS: NSLineBreakMode

Op iOS is het equivalent van ellipsize de eigenschap lineBreakMode van de klasse UILabel (en NSTextContainer voor UITextView). Er zijn drie afkapmodi beschikbaar: .byTruncatingTail (einde), .byTruncatingMiddle (midden) en .byTruncatingHead (begin).

Modus .byTruncatingTail komt overeen met android:ellipsize="end". Modus .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. Modus .byClipping — kapt tekst af zonder weglatingsteken, zelden gebruikt in moderne interfaces. Modus .byCharWrapping — omhullen op teken zonder afkapping.

let label = UILabel()
label.text = "Lange tekst die niet binnen de labelgrenzen past"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString ondersteunt ook lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

In iOS werkt truncation samen met numberOfLines. Als numberOfLines = 1, wordt tekst op één regel afgekapt. Als numberOfLines = 2 — op de tweede regel. UITextView gebruikt NSTextContainer.lineBreakMode, dat ook alle drie afkapmodi ondersteunt.

Eigenschap van iOS: modus .byTruncatingMiddle op UILabel kan zich onvoorspelbaar gedragen op korte regels — als de regel volledig past, verschijnt het weglatingsteken niet. Voor gegarandeerde weergave van het weglatingsteken op korte regels, gebruikt u aangepaste logica via sizeThatFits.

CSS text-overflow: weglatingsteken maken in het web

In het web wordt ellipsize geïmplementeerd via de CSS-eigenschap text-overflow: ellipsis in combinatie met overflow: hidden en white-space: nowrap. Dit is de standaardmethode voor het afkappen van regels met weglatingsteken in webinterfaces.

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

De eigenschap text-overflow werkt niet zonder overflow: hidden — de browser moet weten dat inhoud wordt afgekapt. white-space: nowrap voorkomt regelsomloop, anders gaat de tekst naar de volgende regel en vindt er geen overloop plaats.

Voor meerregelige afkapping (bijv. 2 regels met weglatingsteken aan het einde van de tweede) werd vroeger de experimentele eigenschap -webkit-line-clamp gebruikt, die nu is gestandaardiseerd als line-clamp in CSS Overflow Level 4.

In de praktijk wordt text-overflow: ellipsis al meer dan 10 jaar door alle moderne browsers ondersteund en is het de meest betrouwbare methode voor tekstafkapping in het web.

De juiste afkapmodus kiezen

De keuze van de ellipsize-modus beïnvloedt UX en kan zowel de perceptie van de interface verbeteren als de gebruiker verwarren. Hoofdregel: de gebruiker verwacht dat het afgekapte deel zich bevindt waar het het minst nodig is voor begrip.

Modus END is geschikt voor koppen, labels, namen — de gebruiker ziet het begin van de regel en begrijpt de context. Het weglatingsteken rechts betekent „er is vervolg, maar het past niet“. Dit is de meest intuïtieve en wijdverbreide modus.

Modus MIDDLE is onmisbaar voor bestandspaden, e-mailadressen en lange identificaties. Wanneer het einde van de regel unieke informatie bevat (bestandsnaam, domein), moet de gebruiker juist dat zien, en het begin kan worden ingekort. Voorbeeld: "/User/.../important_document.pdf" — direct de bestandsnaam zichtbaar.

Modus START wordt zelden gebruikt, maar is nuttig voor een contactlijst met een gemeenschappelijk voorvoegsel — bijvoorbeeld „...@gmail.com“ in plaats van „username@gmail.com“, wanneer alle adressen tot hetzelfde domein behoren. Dit patroon verwart echter vaker dan het helpt. Volgens Nielsen Norman Group lezen gebruikers van links naar rechts en verwachten ze belangrijke informatie aan het begin, dus START-afkapping verhoogt de cognitieve belasting.

Modus MARQUEE (lopende tekst) is alleen geschikt voor eenregelige elementen met een lage vernieuwingsfrequentie: huidig nummer in de speler, nieuwsticker, statusbalk. Gebruik marquee niet in tabellen, lijsten of formulieren — animatie leidt af en vermindert prestaties op zwakkere apparaten.

Veelvoorkomende problemen en oplossingen

Eerste probleem — ellipsize werkt niet. Meestal is de oorzaak het ontbreken van een regellimiet. Zonder maxLines groeit TextView in hoogte en vindt er geen overloop in de breedte plaats. Oplossing: geef altijd maxLines op (of singleLine="true" voor één regel).

Tweede probleem — weglatingsteken verschijnt niet bij programmatische tekstwijziging. Na het aanroepen van setText() kan TextView mogelijk niet correct opnieuw worden getekend. Oplossing: roep invalidate() of post(() -> requestLayout()) aan na het wijzigen van de tekst.

Derde probleem — verschillend gedrag op verschillende Android-versies. Vóór API 23 werd ellipsize in de meerregelige modus (maxLines > 1) niet ondersteund. Oplossing: controleer voor compatibiliteit Build.VERSION.SDK_INT en gebruik ViewCompat.setEllipsize() uit AndroidX.

Vierde probleem — weglatingsteken wordt niet weergegeven in aangepaste lettertypen. Als het lettertype de glyph U+2026 niet bevat, wordt het weglatingsteken vervangen door drie punten. Oplossing: controleer het lettertype op de aanwezigheid van de ellipsis-glyph of voeg een fallback-lettertype toe via fontFamily.