Ellipsize dalam pengembangan mobile — apa itu dan cara pemotongan teks

Apa itu Ellipsize?

Ellipsize (dari Inggris ellipsis — elipsis) — adalah teknik menampilkan teks yang melebihi ukuran wadah. Alih-alih memotong baris begitu saja di batas (clip), ellipsize menambahkan simbol elipsis (Unicode U+2026), yang menunjukkan kepada pengguna adanya konten tersembunyi.

Istilah ini melekat di Android SDK, di mana properti android:ellipsize menentukan perilaku TextView saat meluap. Di iOS, fungsionalitas serupa disebut truncation (pemotongan) dan dikelola melalui NSLineBreakMode. Di web, properti CSS text-overflow dengan nilai ellipsis digunakan.

Tujuan utama ellipsize adalah menginformasikan pengguna bahwa teks telah dipersingkat. Berbeda dengan pemotongan piksel di mana kata dapat terbelah dua, ellipsize menjamin keterbacaan: elipsis ditempatkan setelah kata atau karakter utuh, tanpa memotongnya. Ini sesuai dengan prinsip Material Design dan Human Interface Guidelines.

Gunakan ellipsize di mana pun lebar wadah tetap dan panjang teks dinamis: judul artikel, sel tabel, tombol dengan label, kontak di daftar, breadcrumbs, dan jalur file.

Ellipsize di Android: TextView dan mode

Di Android, ellipsize dikonfigurasi melalui atribut android:ellipsize di XML atau metode setEllipsize() di kode. Tersedia empat mode, yang masing-masing menentukan dari sisi mana teks akan dipotong.

Mode END (default di sebagian besar kasus) memotong akhir baris dan menempatkan elipsis di sisi kanan wadah. Mode START memotong awal — elipsis di kiri, teks terlihat di kanan. MIDDLE memotong tengah, membiarkan awal dan akhir baris terlihat. Mode MARQUEE — pengguliran teks animasi, di mana elipsis tidak ditampilkan dan teks bergulir secara siklis.

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

Penting: ellipsize hanya bekerja dalam kombinasi dengan maxLines atau singleLine. Jika jumlah baris tidak dibatasi, TextView akan bertambah tinggi dan ellipsize tidak akan aktif. Mulai Android 8.0 (API 26), ellipsize mendukung mode multi-baris dengan maxLines > 1 — elipsis ditempatkan di akhir baris terakhir.

Untuk panggilan programatik, gunakan TextUtils.TruncateAt dengan salah satu nilai: END, START, MIDDLE, MARQUEE. Nilai NONE menonaktifkan ellipsize.

Dalam praktiknya, END cocok untuk 90% kasus — pengguna mengharapkan teks dipotong di akhir. MIDDLE digunakan untuk jalur file (misalnya, "/User/.../project/main.kt") sehingga akhir jalur terlihat. START — untuk nama dengan prefiks umum (misalnya, "...@gmail.com").

Pemotongan teks di iOS: NSLineBreakMode

Di iOS, padanan ellipsize adalah properti lineBreakMode dari kelas UILabel (dan NSTextContainer untuk UITextView). Tersedia tiga mode pemotongan: .byTruncatingTail (akhir), .byTruncatingMiddle (tengah), dan .byTruncatingHead (awal).

Mode .byTruncatingTail sesuai dengan android:ellipsize="end". Mode .byTruncatingHead — START, .byTruncatingMiddle — MIDDLE. Mode .byClipping — memotong teks tanpa elipsis, jarang digunakan di antarmuka modern. Mode .byCharWrapping — pembungkusan per karakter tanpa pemotongan.

let label = UILabel()
label.text = "Teks panjang yang tidak muat di batas label"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString juga mendukung lineBreakMode
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

Di iOS, truncation bekerja bersama dengan numberOfLines. Jika numberOfLines = 1, teks dipotong pada satu baris. Jika numberOfLines = 2 — pada baris kedua. UITextView menggunakan NSTextContainer.lineBreakMode, yang juga mendukung ketiga mode pemotongan.

Kekhasan iOS: mode .byTruncatingMiddle di UILabel dapat berperilaku tidak terduga pada baris pendek — jika baris muat sepenuhnya, elipsis tidak muncul. Untuk menampilkan elipsis secara terjamin pada baris pendek, gunakan logika kustom melalui sizeThatFits.

CSS text-overflow: cara membuat elipsis di web

Di web, ellipsize diimplementasikan melalui properti CSS text-overflow: ellipsis dalam kombinasi dengan overflow: hidden dan white-space: nowrap. Ini adalah cara standar untuk memotong baris dengan elipsis di antarmuka web.

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

Properti text-overflow tidak berfungsi tanpa overflow: hidden — browser perlu tahu bahwa konten dipotong. white-space: nowrap melarang pembungkusan baris, jika tidak teks akan pindah ke baris berikutnya dan luapan tidak akan terjadi.

Untuk pemotongan multi-baris (misalnya, 2 baris dengan elipsis di akhir baris kedua) sebelumnya digunakan properti eksperimental -webkit-line-clamp, yang sekarang telah distandarisasi sebagai line-clamp di CSS Overflow Level 4.

Dalam praktiknya, text-overflow: ellipsis didukung oleh semua browser modern selama lebih dari 10 tahun dan merupakan metode pemotongan teks yang paling andal di web.

Cara memilih mode pemotongan yang tepat

Pemilihan mode ellipsize memengaruhi UX dan dapat meningkatkan persepsi antarmuka sekaligus membingungkan pengguna. Aturan utama: pengguna mengharapkan bagian yang dipotong berada di tempat yang paling tidak diperlukan untuk pemahaman.

Mode END cocok untuk judul, label, nama — pengguna melihat awal baris dan memahami konteksnya. Elipsis di kanan berarti "ada kelanjutan, tetapi tidak muat". Ini adalah mode yang paling intuitif dan tersebar luas.

Mode MIDDLE sangat diperlukan untuk jalur file, alamat email, dan pengidentifikasi panjang. Ketika akhir baris berisi informasi unik (nama file, domain), pengguna harus melihatnya, dan awal dapat dipersingkat. Contoh: "/User/.../important_document.pdf" — langsung terlihat nama file.

Mode START jarang digunakan, tetapi berguna untuk daftar kontak dengan prefiks umum — misalnya, "...@gmail.com" alih-alih "username@gmail.com", ketika semua alamat milik domain yang sama. Namun, pola ini lebih sering membingungkan daripada membantu. Menurut Nielsen Norman Group, pengguna membaca dari kiri ke kanan dan mengharapkan informasi penting di awal, sehingga pemotongan START meningkatkan beban kognitif.

Mode MARQUEE (teks berjalan) hanya cocok untuk elemen satu baris dengan frekuensi pembaruan rendah: lagu saat ini di pemutar, ticker berita, bilah status. Jangan gunakan marquee di tabel, daftar, atau formulir — animasi mengganggu dan mengurangi kinerja di perangkat yang lemah.

Masalah umum dan solusinya

Masalah pertama — ellipsize tidak berfungsi. Paling sering penyebabnya adalah tidak adanya batasan jumlah baris. Tanpa maxLines, TextView bertambah tinggi dan tidak terjadi luapan lebar. Solusi: selalu tentukan maxLines (atau singleLine="true" untuk satu baris).

Masalah kedua — elipsis tidak muncul saat perubahan teks secara programatik. Setelah memanggil setText(), TextView mungkin tidak menggambar ulang dengan benar. Solusi: panggil invalidate() atau post(() -> requestLayout()) setelah mengubah teks.

Masalah ketiga — perilaku berbeda di versi Android yang berbeda. Sebelum API 23, ellipsize dalam mode multi-baris (maxLines > 1) tidak didukung. Solusi: untuk kompatibilitas, periksa Build.VERSION.SDK_INT dan gunakan ViewCompat.setEllipsize() dari AndroidX.

Masalah keempat — simbol elipsis tidak ditampilkan di font kustom. Jika font tidak mengandung glyph U+2026, elipsis digantikan oleh tiga titik. Solusi: periksa font untuk keberadaan glyph ellipsis atau tambahkan font cadangan melalui fontFamily.