লিডিং এবং লাইন স্পেসিং: এটি কী এবং iOS ও Android এ সেটআপ

লিডিং এবং লাইন স্পেসিং কী

লিডিং (উচ্চারণ “লেডিং”) — টাইপোগ্রাফিতে সংলগ্ন লাইনের বেসলাইনের মধ্যে উল্লম্ব দূরত্ব। বেসলাইন হল অদৃশ্য রেখা যার উপর টেক্সটের অক্ষরগুলি অবস্থিত। লিডিং যত বেশি, লাইনগুলি একে অপরের সাপেক্ষে তত মুক্ত থাকে। ডিজিটাল টাইপোগ্রাফিতে লিডিংকে প্রায়শই লাইন ব্যবধান বা লাইন হাইট বলা হয়।

ঐতিহাসিকভাবে শব্দটি মেটালিক টাইপোগ্রাফির যুগে উদ্ভূত হয়েছিল: কম্পোজিটাররা লাইনের মধ্যে ব্যবধান বাড়ানোর জন্য পাতলা সীসার স্ট্রিপ বসাতেন। আধুনিক ফন্টে লিডিং ফন্ট সাইজের অনুপাত হিসাবে নির্ধারিত হয়। ডিফল্ট সিস্টেম মান হল 1.2 (ফন্ট সাইজের 120%), তবে দীর্ঘ টেক্সট এবং মোবাইল ইন্টারফেসের জন্য বড় মান সুপারিশ করা হয়। Material Design Typography Guidelines অনুযায়ী, ওয়েব এবং মোবাইল ইন্টারফেসের জন্য মূল টেক্সটের সর্বোত্তম লাইন হাইট হল 1.4-1.5।

লিডিং এবং লাইন স্পেসিং এর মধ্যে পার্থক্য: লিডিং হল বেসলাইন থেকে বেসলাইন পর্যন্ত সম্পূর্ণ দূরত্ব, লাইন স্পেসিং হল একটি লাইনের নিচের সীমানা থেকে পরবর্তী লাইনের উপরের সীমানার মধ্যে দূরত্ব। বেশিরভাগ মোবাইল API (iOS NSParagraphStyle, Android TextView) লাইন স্পেসিং ব্যবহার করে লাইনের প্রাকৃতিক উচ্চতার উপরে অতিরিক্ত ব্যবধান হিসাবে। এটি মোট লাইন ব্যবধান গণনা করার সময় গুরুত্বপূর্ণ।

মোবাইল ইন্টারফেসের জন্য সর্বোত্তম লিডিং মান

সর্বোত্তম লিডিং নির্বাচন বিভিন্ন ফ্যাক্টরের উপর নির্ভর করে: ফন্টের আকার, লাইনের দৈর্ঘ্য, ব্যবহারের প্রসঙ্গ এবং শ্রোতা। সাধারণ লাইনের দৈর্ঘ্য 40-60 অক্ষর বিশিষ্ট মোবাইল ইন্টারফেসের জন্য ফন্ট সাইজের 1.4 থেকে 1.6 পর্যন্ত লিডিং সুপারিশ করা হয়। ছোট লাইন (লেবেল, বাটন) ছোট লিডিং ব্যবহার করতে পারে — 1.0-1.2। দীর্ঘ টেক্সট (নিবন্ধ, বিবরণ) — সর্বোচ্চ পাঠযোগ্যতার জন্য 1.8 পর্যন্ত বড় লিডিং।

পরীক্ষামূলক তথ্য: Wichita State University Software Usability Laboratory-এর গবেষণায় দেখা গেছে যে লিডিং 1.5 একই লাইনের প্রস্থে লিডিং 1.0 এর তুলনায় পড়ার গতি 7.5% বাড়িয়ে দেয়। ডিসলেক্সিয়া আক্রান্ত ব্যবহারকারীদের জন্য সর্বোত্তম লিডিং আরও বেশি — 1.8 পর্যন্ত। এই তথ্যগুলি WCAG 2.2 সুপারিশ দ্বারা নিশ্চিত করা হয়, যা কন্টেন্ট না হারিয়ে লাইন ব্যবধান 1.5 পর্যন্ত বাড়ানোর সম্ভাবনার প্রয়োজন।

গার্নিচারের প্রভাব: উচ্চ x-height (ছোট হাতের অক্ষরের আপেক্ষিক উচ্চতা) বিশিষ্ট ফন্টের কম x-height বিশিষ্ট ফন্টের তুলনায় বেশি লিডিং প্রয়োজন। উদাহরণস্বরূপ, Helvetica (উচ্চ x-height) বডি টেক্সটের জন্য লিডিং 1.5 সুপারিশ করে, যখন Didot (নিম্ন x-height) — 1.3। এটি এই কারণে যে উচ্চ x-height-এ একই লাইন ব্যবধানে লাইনগুলি দৃশ্যত দ্রুত মিশে যায়।

iOS এ NSParagraphStyle এর মাধ্যমে লিডিং বাস্তবায়ন

iOS এ লাইন ব্যবধান NSMutableParagraphStyle ক্লাসের মাধ্যমে নিয়ন্ত্রিত হয়, যাতে দুটি কী প্রপার্টি রয়েছে: lineSpacing (লাইনের মধ্যে অতিরিক্ত ব্যবধান পয়েন্টে) এবং lineHeightMultiple (লাইন উচ্চতা গুণক)। এই প্রপার্টিগুলি একসাথে কাজ করে: মোট লাইন উচ্চতা ফন্টের প্রাকৃতিক উচ্চতা, lineHeightMultiple দ্বারা গুণিত, প্লাস lineSpacing হিসাবে গণনা করা হয়।

let paragraphStyle = NSMutableParagraphStyle()

// পদ্ধতি 1: লাইন উচ্চতা গুণক
paragraphStyle.lineHeightMultiple = 1.5

// পদ্ধতি 2: লাইনের মধ্যে অতিরিক্ত ব্যবধান
paragraphStyle.lineSpacing = 4.0

// NSAttributedString এর মাধ্যমে প্রয়োগ করুন
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — পছন্দের পদ্ধতি, কারণ এটি ফন্ট সাইজ পরিবর্তনের সময় স্বয়ংক্রিয়ভাবে স্কেল হয়। lineSpacing সম্পূর্ণ পয়েন্টে নির্ধারিত হয় এবং স্কেল হয় না, যা Dynamic Type ব্যবহার করার সময় অসামঞ্জস্য সৃষ্টি করতে পারে। Apple Text Programming Guide অনুযায়ী, অ্যাক্সেসিবিলিটি-সামঞ্জস্যপূর্ণ ইন্টারফেসের জন্য UIFontMetrics এর সাথে lineHeightMultiple ব্যবহার করুন।

SwiftUI Text এবং VStack-এর জন্য .lineSpacing() মডিফায়ার প্রদান করে। UIKit-এর বিপরীতে, SwiftUI-তে লাইন ব্যবধান পয়েন্টে নির্ধারিত হয় এবং এতে বিল্ট-ইন গুণক নেই। গুণক বাস্তবায়নের জন্য ডেভেলপারকে ফন্ট সাইজের উপর ভিত্তি করে ম্যানুয়ালি লাইন স্পেসিং গণনা করতে হবে। সীমাবদ্ধতা: SwiftUI সরাসরি lineHeightMultiple সমর্থন করে না — গণনাকৃত মান সহ .lineSpacing(CGFloat) ব্যবহার করুন।

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // ফন্ট সাইজের 50%
    }

    var body: some View {
        Text("লাইন স্পেসিং")
        Text("1.5 গুণক")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Android এ লাইন ব্যবধান সেটআপ

Android এ লাইন ব্যবধান TextView-এর দুটি অ্যাট্রিবিউটের মাধ্যমে নির্ধারিত হয়: lineSpacingExtra (px-এ অতিরিক্ত ব্যবধান) এবং lineSpacingMultiplier (লাইন উচ্চতা গুণক, ডিফল্ট 1.0)। iOS-এর মতো, গুণক ফন্ট সাইজ পরিবর্তনের সময় স্কেল হয়, আর extra একটি সম্পূর্ণ মান। অ্যাক্সেসিবিলিটি-সামঞ্জস্যপূর্ণ ইন্টারফেসের জন্য গুণক ব্যবহার করাই পছন্দনীয়।

// XML লেআউটে
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Kotlin এ প্রোগ্রামেটিক্যালি
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — আধুনিক Android UI ফ্রেমওয়ার্ক — TextStyle মডিফায়ারে lineHeight প্যারামিটার ব্যবহার করে। XML পদ্ধতির বিপরীতে, Compose-এ lineHeight sp-তে সম্পূর্ণ লাইন উচ্চতা হিসাবে নির্ধারিত হয় (ডিফল্ট = fontSize * 1.2)। গুণক সেট করার জন্য ডেভেলপার fontSize এর শতাংশ হিসাবে lineHeight নির্দেশ করে: উদাহরণ: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) গুণক 1.5 দেয়।

সীমাবদ্ধতা: Android API 28 পর্যন্ত lineSpacingExtra এবং lineSpacingMultiplier কিছু ফন্টের সাথে, বিশেষ করে কাস্টম (TTF/OTF) ফন্টের সাথে সঠিকভাবে কাজ করে না। প্রকৃত ডিভাইসে পরীক্ষা করার পরামর্শ দেওয়া হয় এবং মনে রাখবেন যে systemTextView ডিফল্টভাবে lineSpacingMultiplier 1.0 ব্যবহার করে — কোনো অতিরিক্ত ব্যবধান ছাড়াই। ScrollView-এ দীর্ঘ টেক্সটের জন্য স্পষ্টভাবে লাইন ব্যবধান সেট করা আবশ্যক।

CSS line-height এর মাধ্যমে ওয়েব ডেভেলপমেন্টে লাইন ব্যবধান

ওয়েবে লাইন ব্যবধান CSS প্রপার্টি line-height এর মাধ্যমে নির্ধারিত হয়, যা একটি সংখ্যা (গুণক), শতাংশের মান, দৈর্ঘ্যের একক (px, em) বা কীওয়ার্ড normal হতে পারে। সংখ্যাসূচক গুণক — পছন্দের পদ্ধতি, কারণ এটি উত্তরাধিকার সূত্রে প্রাপ্ত হয় এবং চাইল্ড এলিমেন্টের ফন্ট সাইজের সাপেক্ষে স্কেল হয়। normal মান অধিকাংশ ফন্টের জন্য প্রায় 1.2 এর সাথে মিলে যায়।

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

সংখ্যাসূচক গুণক vs em: line-height: 1.5 এবং line-height: 1.5em — ভিন্ন জিনিস। সংখ্যাসূচক গুণক computed value হিসাবে উত্তরাধিকার সূত্রে প্রাপ্ত হয় এবং প্রতিটি চাইল্ড এলিমেন্টের জন্য তার font-size এর ভিত্তিতে পুনরায় গণনা করা হয়। em প্যারেন্টের font-size এর ভিত্তিতে fixed computed value হিসাবে উত্তরাধিকার সূত্রে প্রাপ্ত হয়। এটি একটি গুরুত্বপূর্ণ পার্থক্য: font-size: 20px যখন font-size: 16px এর ভিতরে থাকে, line-height: 1.5 দেবে 30px, আর line-height: 1.5em দেবে 24px (প্যারেন্ট থেকে)। সুপারিশ: সর্বদা সংখ্যাসূচক গুণক ব্যবহার করুন।

iOS, Android এবং ওয়েবে লিডিং সেটিংসের তুলনা

ভিন্ন API সত্ত্বেও, লাইন ব্যবধান সেটআপের নীতি সব প্ল্যাটফর্মে একই। গুণক (multiplier) ফন্ট সাইজ পরিবর্তনের সময় স্কেল হয় এবং অ্যাক্সেসিবিলিটি-বান্ধব। সম্পূর্ণ মান (spacing) স্কেল হয় না এবং Dynamic Type বা বড় টেক্সট সেটিংস ব্যবহার করার সময় সমস্যা সৃষ্টি করতে পারে।

ক্রস-প্ল্যাটফর্ম কৌশল: ডিজাইন-সিস্টেমে fontSize এর গুণক হিসাবে lineHeight নির্ধারণ করুন। উদাহরণস্বরূপ, ডিজাইন টোকেনে: line-height-body = 1.5, line-height-heading = 1.1। প্রতিটি প্ল্যাটফর্ম এই গুণকটি নিজস্ব API মাধ্যমে বাস্তবায়ন করে: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5। এটি সব প্ল্যাটফর্মে একই ভিজ্যুয়াল ফলাফল নিশ্চিত করে।

গুরুত্বপূর্ণ সূক্ষ্মতা: iOS-এ lineHeightMultiple সম্পূর্ণ লাইন উচ্চতায় (ফন্টের ascender + descender সহ) প্রয়োগ করা হয়, আর Android-এ lineSpacingMultiplier — Minikin রেন্ডার ইঞ্জিন দ্বারা গণনা করা লাইন উচ্চতায়। বাস্তবে এটি একই গুণক মানতে ভিজ্যুয়াল লিডিংয়ে সামান্য পার্থক্য সৃষ্টি করে। pixel-perfect সামঞ্জস্যের জন্য প্ল্যাটফর্ম অনুযায়ী সমন্বয় সহ সম্পূর্ণ মান ব্যবহার করুন।