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 در هر جایی که عرض ظرف ثابت و طول متن پویا است استفاده کنید: عنوان مقالات، سلول‌های جدول، دکمه‌های دارای برچسب، مخاطبین در لیست، مسیرهای ناوبری و مسیرهای فایل.

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 truncation همراه با 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 برای مسیرهای فایل، آدرس‌های ایمیل و شناسه‌های طولانی ضروری است. وقتی انتهای خط حاوی اطلاعات منحصر به فرد است (نام فایل، دامنه)، کاربر باید دقیقاً آن را ببیند و ابتدا می‌تواند کوتاه شود. مثال: "/User/.../important_document.pdf" — بلافاصله نام فایل مشخص است.

حالت START به ندرت استفاده می‌شود، اما برای لیست مخاطبین با پیشوند مشترک مفید است — مثلاً «...@gmail.com» به جای «username@gmail.com» وقتی همه آدرس‌ها به یک دامنه تعلق دارند. با این حال این الگو بیشتر گیج‌کننده است تا مفید. طبق Nielsen Norman Group، کاربران از چپ به راست می‌خوانند و اطلاعات مهم را در ابتدا انتظار دارند، بنابراین برش START بار شناختی را افزایش می‌دهد.

حالت MARQUEE (خط متحرک) فقط برای عناصر تک‌خطی با فرکانس به‌روزرسانی کم مناسب است: آهنگ فعلی در پخش‌کننده، تیکر اخبار، نوار وضعیت. از marquee در جداول، لیست‌ها یا فرم‌ها استفاده نکنید — انیمیشن حواس را پرت می‌کند و عملکرد را در دستگاه‌های ضعیف کاهش می‌دهد.

مشکلات رایج و راه‌حل‌های آنها

مشکل اول — 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 یک فونت جایگزین اضافه کنید.