Ellipsize a mobilfejlesztésben — mi ez és a szövegvágás módszerei

Mi az Ellipsize?

Ellipsize (az angol ellipsis — három pont szóból) — egy technika a konténer méreteit meghaladó szöveg megjelenítésére. Ahelyett, hogy egyszerűen a határnál vágná le a sort (clip), az ellipsize hozzáad egy három pont szimbólumot (Unicode U+2026), jelezve a felhasználónak a rejtett tartalom létezését.

A kifejezés az Android SDK-ban győkerezett meg, ahol az android:ellipsize tulajdonság határozza meg a TextView viselkedését túlcsorduláskor. Az iOS-en a hasonló funkció neve truncation (levágás) és a NSLineBreakMode-on keresztül kezelhető. Az interneten a CSS text-overflow tulajdonságot használják ellipsis értékkel.

Az ellipsize fő célja a felhasználó tájékoztatása arról, hogy a szöveg le lett rövidítve. A pixel alapú levágással ellentétben, ahol egy szó kettétörhet, az ellipsize biztosítja az olvashatóságot: a három pont egy teljes szó vagy karakter után kerül elhelyezésre, anélkül, hogy megtörné azt. Ez összhangban van a Material Design és a Human Interface Guidelines elveivel.

Használja az ellipsize-t mindenhol, ahol a konténer szélessége rögzített és a szöveg hossza dinamikus: cikkcímek, táblázatcellák, feliratos gombok, lista kapcsolatok, kenyérmorzsa és fájlútvonalak.

Ellipsize Androidban: TextView és módok

Androidban az ellipsize az android:ellipsize attribútummal XML-ben vagy a setEllipsize() metódussal konfigurálható. Négy mód érhető el, amelyek mindegyike meghatározza, hogy a szöveg melyik oldalról kerül levágásra.

Az END mód (a legtöbb esetben alapértelmezett) levágja a sor végét és a három pontot a konténer jobb oldalára helyezi. A START mód levágja az elejét — három pont balra, látható szöveg jobbra. A MIDDLE a közepét vágja le, a sor elejét és végét láthatóvá téve. A MARQUEE mód — a szöveg animált görgetése, ahol a három pont nem jelenik meg, és a szöveg ciklikusan görög.

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

Fontos: az ellipsize csak maxLines vagy singleLine kombinációjában működik. Ha nem korlátozza a sorok számát, a TextView magasságban nő, és az ellipsize nem aktiválódik. Az Android 8.0-tól (API 26) kezdve az ellipsize támogatja a többsoros módot maxLines > 1-gyel — a három pont az utolsó sor végére kerül.

Programozott híváshoz használja a TextUtils.TruncateAt a következő értékek egyikével: END, START, MIDDLE, MARQUEE. A NONE érték kikapcsolja az ellipsize-t.

A gyakorlatban az END az esetek 90%-ában megfelelő — a felhasználók azt várják, hogy a szöveg a végén van levágva. A MIDDLE fájlútvonalakhoz használatos (pl. "/User/.../project/main.kt"), hogy látható legyen az út vége. START — közös előtaggal rendelkező nevekhez (pl. "...@gmail.com").

Szövegvágás iOS-ben: NSLineBreakMode

Az iOS-en az ellipsize megfelelője a lineBreakMode tulajdonság az UILabel osztályból (és NSTextContainer az UITextView számára). Három vágási mód érhető el: .byTruncatingTail (vége), .byTruncatingMiddle (közepe) és .byTruncatingHead (eleje).

A .byTruncatingTail mód az android:ellipsize="end"-nek felel meg. A .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. A .byClipping mód — szöveget három pont nélkül vágja le, ritkán használatos modern interfészekben. A .byCharWrapping mód — karakteren kénti törés levágás nélkül.

let label = UILabel()
label.text = "Hosszú szöveg, amely nem fér el a címke határain belül"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// Az NSAttributedString szintén támogatja a lineBreakMode-ot
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

Az iOS-ben a truncation a numberOfLines számmal együtt működik. Ha numberOfLines = 1, a szöveg egy sorban van levágva. Ha numberOfLines = 2 — a második sorban. Az UITextView az NSTextContainer.lineBreakMode-ot használja, amely szintén támogatja mindhárom vágási módot.

Az iOS sajátossága: a .byTruncatingMiddle mód az UILabel-en váratlanul viselkedhet rövid sorokon — ha a sor teljesen elfér, a három pont nem jelenik meg. A három pont garantált megjelenítéséhez rövid sorokon használjon egyedi logikát a sizeThatFits segítségével.

CSS text-overflow: három pont készítése az interneten

Az interneten az ellipsize a CSS text-overflow: ellipsis tulajdonsággal valósul meg overflow: hidden és white-space: nowrap kombinációjában. Ez a szabványos módszer a sor három pontos levágására webes interfészekben.

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

A text-overflow tulajdonság overflow: hidden nélkül nem működik — a böngészőnek tudnia kell, hogy a tartalom le van vágva. A white-space: nowrap megtiltja a sor törését, különben a szöveg a következő sorba kerülne, és nem történne túlcsordulás.

A többsoros vágáshoz (pl. 2 sor három ponttal a második végén) korábban a kísérleti -webkit-line-clamp tulajdonságot használták, amely most line-clamp ként standardizálva van a CSS Overflow Level 4-ben.

A gyakorlatban a text-overflow: ellipsis több mint 10 éve támogatott minden modern böngésző által, és ez a legmegbízhatóbb módszer a szövegvágásra az interneten.

Hogyan válasszuk ki a megfelelő vágási módot

Az ellipsize mód kiválasztása befolyásolja az UX-et és mind javíthatja a felület észlelését, mind összezavarhatja a felhasználót. Fő szabály: a felhasználó azt várja, hogy a levágott rész ott van, ahol a legkevésbé szükséges a megértéshez.

Az END mód alkalmas címekhez, címkékhez, nevekhez — a felhasználó látja a sor elejét és érti a kontextust. A jobb oldali három pont jelentése: „folytatása van, de nem fért el“. Ez a legintuitívabb és legelterjedtebb mód.

A MIDDLE mód nélkülözhetetlen fájlútvonalakhoz, e-mail címekhez és hosszú azonosítókhoz. Amikor a sor vége egyedi információt tartalmaz (fájlnév, domain), a felhasználónak pontosan azt kell látnia, az eleje pedig lerövidíthető. Példa: "/User/.../important_document.pdf" — azonnal látszik a fájlnév.

A START módot ritkán használják, de hasznos a közös előtagú kapcsolati listához — például "...@gmail.com" a "username@gmail.com" helyett, amikor az összes cím ugyanahhoz a domainhez tartozik. Azonban ez a minta többnyire összezavar, mint segít. A Nielsen Norman Group szerint a felhasználók balról jobbra olvasnak és fontos információt várnak az elején, így a START vágás növeli a kognitív terhelést.

A MARQUEE mód (futó szöveg) csak egysoros elemekhez alkalmas alacsony frissítési gyakorisággal: aktuális szám a lejátszóban, hír ticker, állapotsor. Ne használja a marquee-t táblázatokban, listákban vagy űrlapokban — az animáció eltereli a figyelmet és csökkenti a teljesítményt gyenge eszközökön.

Tipikus problémák és megoldásaik

Első probléma — az ellipsize nem működik. Legtöbbször az oka a sorok számának korlátozásának hiánya. MaxLines nélkül a TextView magasságban nő, és nem történik szélességi túlcsordulás. Megoldás: mindig adja meg a maxLines-t (vagy singleLine="true" egy sorhoz).

Második probléma — a három pont nem jelenik meg programozott szövegmódosításkor. A setText() hívása után a TextView nem biztos, hogy megfelelően úrajzolódik. Megoldás: hívja meg az invalidate() vagy post(() -> requestLayout()) függvényt a szöveg módosítása után.

Harmadik probléma — különböző viselkedés különböző Android verziókon. API 23 előtt az ellipsize többsoros módban (maxLines > 1) nem volt támogatott. Megoldás: a kompatibilitás érdekében ellenőrizze a Build.VERSION.SDK_INT-t és használja a ViewCompat.setEllipsize() az AndroidX-ből.

Negyedik probléma — a három pont szimbólum nem jelenik meg egyedi betűtípusokban. Ha a betűtípus nem tartalmazza az U+2026 glifumot, a három pont három pontra cserélődik. Megoldás: ellenőrizze a betűtípust az ellipsis glifum meglétére, vagy adjon hozzá tartalék betűtípust a fontFamily-n keresztül.