মোবাইল ডেভেলপমেন্টে Ellipsize — এটি কী এবং টেক্সট ট্রাঙ্কেট করার উপায়

Ellipsize কী?

Ellipsize (ellipsis — এলিপসিস থেকে) হল এমন একটি কৌশল যা কন্টেইনারের আকারের চেয়ে বেশি টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়। কেবল সীমানায় লাইন কাটার পরিবর্তে, ellipsize একটি এলিপসিস ক্যারেক্টার (তিনটি বিন্দু, Unicode U+2026) যোগ করে, যা ব্যবহারকারীকে লুকানো বিষয়বস্তুর উপস্থিতি নির্দেশ করে।

শব্দটি Android SDK-তে প্রতিষ্ঠিত, যেখানে android:ellipsize প্রপার্টি ওভারফ্লো হলে TextView-এর আচরণ নির্ধারণ করে। iOS-এ, একই কার্যকারিতাকে ট্রাঙ্কেশন বলা হয় এবং এটি NSLineBreakMode-এর মাধ্যমে পরিচালিত হয়। ওয়েবে, ellipsis মান সহ CSS প্রপার্টি text-overflow ব্যবহার করা হয়।

Ellipsize-এর মূল উদ্দেশ্য হল ব্যবহারকারীকে জানানো যে টেক্সটটি ছোট করা হয়েছে। পিক্সেল-ভিত্তিক ক্লিপিংয়ের বিপরীতে, যেখানে একটি শব্দ অর্ধেক ভেঙে যেতে পারে, ellipsize পঠনযোগ্যতা নিশ্চিত করে: এলিপসিস একটি সম্পূর্ণ শব্দ বা ক্যারেক্টারের পরে রাখা হয় এটি না ভেঙে। এটি Material Design এবং Human Interface Guidelines-এর নীতির সাথে সামঞ্জস্যপূর্ণ।

Ellipsize ব্যবহার করুন যেখানে কন্টেইনারের প্রস্থ স্থির এবং টেক্সটের দৈর্ঘ্য গতিশীল: নিবন্ধ শিরোনাম, টেবিল কোষ, লেবেলযুক্ত বাটন, তালিকায় যোগাযোগ, ব্রেডক্রাম্ব এবং ফাইল পাথ।

Android এ Ellipsize: TextView এবং মোড

Android-এ, ellipsize XML-এ android:ellipsize অ্যাট্রিবিউট বা কোডে 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-এর সমতুল্য হল UILabel ক্লাসের lineBreakMode প্রপার্টি (এবং UITextView-এর জন্য NSTextContainer)। তিনটি ট্রাঙ্কেশন মোড উপলব্ধ: .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-এর বিশেষত্ব: UILabel-এ .byTruncatingMiddle মোড ছোট স্ট্রিংয়ে অপ্রত্যাশিত আচরণ করতে পারে — যদি স্ট্রিং সম্পূর্ণভাবে ফিট হয়, এলিপসিস দেখা যায় না। ছোট স্ট্রিংয়ে এলিপসিসের নিশ্চিত প্রদর্শনের জন্য, 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 প্রপার্টি ব্যবহার করা হত, যা এখন CSS Overflow Level 4-এ line-clamp হিসেবে মানকীকৃত হয়েছে।

অনুশীলনে, 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-এর আগে, মাল্টিলাইন মোডে (maxLines > 1) ellipsize সমর্থিত ছিল না। সমাধান: সামঞ্জস্যের জন্য, Build.VERSION.SDK_INT চেক করুন এবং AndroidX থেকে ViewCompat.setEllipsize() ব্যবহার করুন।

চতুর্থ সমস্যা — কাস্টম ফন্টে এলিপসিস ক্যারেক্টার প্রদর্শিত হয় না। যদি ফন্টে U+2026 গ্লিফ না থাকে, এলিপসিস তিনটি বিন্দু দ্বারা প্রতিস্থাপিত হয়। সমাধান: এলিপসিস গ্লিফের উপস্থিতির জন্য ফন্ট চেক করুন বা fontFamily-এর মাধ্যমে ফলব্যাক ফন্ট যোগ করুন।