Ellipsize στην κινητή ανάπτυξη — τι είναι και τρόποι περικοπής κειμένου

Τι είναι το Ellipsize;

Ellipsize (από το αγγλικό ellipsis — αποσιωπητικά) — είναι μια τεχνική εμφάνισης κειμένου που υπερβαίνει τις διαστάσεις του δοχείου. Αντί να κόβει απλά τη γραμμή στο όριο (clip), το ellipsize προσθέτει το σύμβολο αποσιωπητικών (Unicode U+2026), υποδεικνύοντας στον χρήστη την ύπαρξη κρυφού περιεχομένου.

Ο όρος έχει καθιερωθεί στο Android SDK, όπου η ιδιότητα android:ellipsize καθορίζει τη συμπεριφορά του TextView κατά την υπερχείλιση. Στο iOS, η ανάλογη λειτουργία ονομάζεται 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, η περικοπή λειτουργεί μαζί με το 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 είναι απαραίτητη για διαδρομές αρχείων, διευθύνσεις email και μεγάλα αναγνωριστικά. Όταν το τέλος της γραμμής περιέχει μοναδικές πληροφορίες (όνομα αρχείου, τομέας), ο χρήστης πρέπει να βλέπει ακριβώς αυτές, και η αρχή μπορεί να συντομευτεί. Παράδειγμα: "/User/.../important_document.pdf" — αμέσως φαίνεται το όνομα αρχείου.

Η λειτουργία START χρησιμοποιείται σπάνια, αλλά είναι χρήσιμη για λίστα επαφών με κοινό πρόθεμα — για παράδειγμα, "...@gmail.com" αντί για "username@gmail.com", όταν όλες οι διευθύνσεις ανήκουν στον ίδιο τομέα. Ωστόσο, αυτό το μοτίβο μπερδεύει περισσότερο από όσο βοηθά. Σύμφωνα με το Nielsen Norman Group, οι χρήστες διαβάζουν από αριστερά προς τα δεξιά και περιμένουν σημαντικές πληροφορίες στην αρχή, επομένως η περικοπή START αυξάνει το γνωστικό φορτίο.

Η λειτουργία MARQUEE (κυλιόμενο κείμενο) είναι κατάλληλη μόνο για μονογραμμικά στοιχεία με χαμηλή συχνότητα ενημέρωσης: τρέχον κομμάτι στη συσκευή αναπαραγωγής, ticker ειδήσεων, γραμμή κατάστασης. Μη χρησιμοποιείτε marquee σε πίνακες, λίστες ή φόρμες — το animation αποσπά την προσοχή και μειώνει την απόδοση σε αδύναμες συσκευές.

Τυπικά προβλήματα και λύσεις

Πρώτο πρόβλημα — το 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 ή προσθέστε μια εφεδρική γραμματοσειρά μέσω fontFamily.