لیدینگ و فاصله بین خطوط: چیست و تنظیمات آن در iOS و Android

لیدینگ و فاصله بین خطوط چیست

لیدینگ (Leading) (تلفظ می‌شود «لِدینگ») — فاصله عمودی بین خطوط پایه سطرهای مجاور در تایپوگرافی است. خط پایه — خط نامرئی که نمادهای متن روی آن قرار می‌گیرند. هرچه لیدینگ بیشتر باشد، سطرها نسبت به یکدیگر آزادتر قرار می‌گیرند. در تایپوگرافی دیجیتال، لیدینگ اغلب فاصله بین خطوط یا ارتفاع خط نامیده می‌شود.

از نظر تاریخی، این اصطلاح در عصر تایپوگرافی فلزی ظاهر شد: حروف‌چین‌ها نوارهای نازک سربی بین سطرها برای افزایش فاصله قرار می‌دادند. در قلم‌های مدرن، لیدینگ به عنوان نسبت به اندازه قلم تعیین می‌شود. مقدار پیش‌فرض سیستم 1.2 (120% از اندازه قلم) است، اما برای متون طولانی و رابط‌های موبایل مقدار بیشتری توصیه می‌شود. بر اساس راهنمای تایپوگرافی Material Design، ارتفاع خط بهینه برای رابط‌های وب و موبایل 1.4-1.5 برای متن اصلی است.

تفاوت بین لیدینگ و فاصله خطوط: لیدینگ — فاصله کامل از خط پایه تا خط پایه، فاصله خطوط — فاصله بین مرز پایین یک سطر و مرز بالای سطر بعدی. در اکثر API‌های موبایل (iOS NSParagraphStyle، Android TextView) دقیقاً از فاصله خطوط به عنوان فاصله اضافی روی ارتفاع طبیعی سطر استفاده می‌شود. این نکته هنگام محاسبه فاصله کل بین خطوط مهم است.

مقادیر بهینه لیدینگ برای رابط‌های موبایل

انتخاب لیدینگ بهینه به چند عامل بستگی دارد: اندازه قلم، طول سطر، زمینه استفاده و مخاطب. برای رابط‌های موبایل با طول سطر معمولی 40-60 کاراکتر، لیدینگ از 1.4 تا 1.6 از اندازه قلم توصیه می‌شود. سطرهای کوتاه (برچسب‌ها، دکمه‌ها) می‌توانند از لیدینگ کمتر — 1.0-1.2 استفاده کنند. متون طولانی (مقالات، توضیحات) — لیدینگ بیشتر، تا 1.8 برای حداکثر خوانایی.

داده‌های تجربی: تحقیقات آزمایشگاه قابلیت استفاده نرم‌افزار دانشگاه ایالتی ویچیتا نشان داد که لیدینگ 1.5 سرعت خواندن را 7.5% در مقایسه با لیدینگ 1.0 در عرض سطر یکسان افزایش می‌دهد. برای کاربران مبتلا به نارساخوانی، لیدینگ بهینه حتی بیشتر است — تا 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، برای رابط‌های سازگار با دسترسی‌پذیری از lineHeightMultiple در ترکیب با UIFontMetrics استفاده کنید.

SwiftUI اصلاح‌کننده .lineSpacing() را برای Text و VStack ارائه می‌دهد. برخلاف 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 — چارچوب مدرن UI اندروید — از پارامتر lineHeight در اصلاح‌کننده TextStyle استفاده می‌کند. برخلاف رویکرد XML، در Compose lineHeight به عنوان ارتفاع کامل خط به sp تعیین می‌شود (پیش‌فرض = fontSize * 1.2). برای تنظیم ضریب، توسعه‌دهنده lineHeight را به درصدی از fontSize مشخص می‌کند: مثال: 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 به عنوان fixed computed value بر اساس font-size والد ارث‌بری می‌شود. این تفاوت بحرانی است: وقتی font-size: 20px داخل font-size: 16px قرار دارد، line-height: 1.5 مقدار 30px و line-height: 1.5em مقدار 24px (از والد) می‌دهد. توصیه: همیشه از ضریب عددی استفاده کنید.

مقایسه تنظیمات لیدینگ در iOS، Android و وب

با وجود API‌های مختلف، اصل تنظیم فاصله بین خطوط در همه پلتفرم‌ها یکسان است. ضریب (multiplier) با تغییر اندازه قلم مقیاس می‌شود و برای دسترسی‌پذیری مناسب است. مقدار مطلق (spacing) مقیاس نمی‌شود و ممکن است هنگام استفاده از Dynamic Type یا تنظیمات متن بزرگ منجر به مشکلات شود.

استراتژی بین‌پلتفرمی: lineHeight را در سیستم طراحی به عنوان ضریبی از fontSize تعیین کنید. به عنوان مثال، در توکن‌های طراحی: 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 از مقادیر مطلق با تصحیح پلتفرم استفاده کنید.