Baseline در توسعه موبایل: چیست، اهمیت و عملکردها

Baseline در تایپوگرافی چیست

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

خط پایه تنها راهنما در متریک فونت نیست. علاوه بر آن موارد زیر نیز وجود دارند: x-height (ارتفاع حروف کوچک)، cap-height (ارتفاع حروف بزرگ)، ascender-line (خط عناصر بالارونده) و descender-line (خط عناصر پایین‌رونده). فاصله بین baseline و descender-line عنصر پایین‌رونده را تعیین می‌کند و فاصله بین baseline و ascender-line عنصر بالارونده را. این متریک‌ها ارتفاع کامل خط را تشکیل می‌دهند و بر محاسبه line-height تأثیر می‌گذارند.

طبق Bringhurst — The Elements of Typographic Style (2024)، baseline تنها متریک جهانی و یکسان برای تمام فونت‌های یک خانواده است. در حالی که x-height و cap-height از یک سبک به سبک دیگر تغییر می‌کنند، baseline موقعیت ثابت خود را نسبت به شبکه مختصات فونت حفظ می‌کند. این باعث می‌شود baseline یک راهنمای قابل اعتماد برای ترازبندی بین‌عنصری در رابط‌ها باشد.

Baseline در رابط‌های موبایل

در رابط‌های موبایل baseline به عنوان خط مرجع برای ترازبندی متن با عناصر غیرمتنی استفاده می‌شود. وقتی در کنار متن یک آیکون، دکمه یا تصویر قرار می‌گیرد، صرفاً تراز کردن آنها به مرکز کافی نیست — متن به صورت بصری جابجا شده به نظر می‌رسد اگر baseline آن با مرکز یا baseline مؤلفه مجاور مطابقت نداشته باشد.

سناریوی معمول — یک خط با آیکون و متن در لیست تنظیمات یا ناوبری. اگر آیکون و متن را به مرکز تراز کنید، متن از نظر بصری بالاتر به نظر می‌رسد زیرا baseline پایین‌تر از مرکز هندسی کانتینر قرار دارد. راه حل — تراز کردن آیکون بر اساس baseline متن. Material Design (2025) این رویکرد را برای تمام خطوط ترکیبی با متن و آیکون‌ها در برنامه‌های موبایل توصیه می‌کند.

تراز نوری بر اساس baseline به ویژه برای فرم‌های صفحه مهم است: فیلدهای ورودی، برچسب‌ها و پیام‌های خطا یک شبکه تایپوگرافی پیچیده تشکیل می‌دهند و جابجایی baseline حتی به میزان ۱–۲ پیکسل به طور قابل توجهی درک را بدتر می‌کند.

Baseline در iOS: UIKit و SwiftUI

در توسعه iOS، baseline از طریق چندین مکانیزم از Auto Layout تا سیستم layout SwiftUI پشتیبانی می‌شود. در UIKit برای موقعیت‌دهی متن نسبت به عناصر مجاور از NSLayoutConstraint با ویژگی‌های .firstBaseline و .lastBaseline استفاده می‌شود. اولی برای متن تک‌خطی مناسب است، دومی — برای متن چندخطی که خط آخر در آن مهم است.

// UIKit: تراز کردن برچسب و آیکون با baseline
let label = UILabel()
label.text = "تنظیمات"

let icon = UIImageView(image: UIImage(systemName: "gear"))

let constraint = label.lastBaselineAnchor
    .constraint(equalTo: icon.lastBaselineAnchor)
constraint.isActive = true

در SwiftUI تراز بر اساس baseline از طریق AlignmentGuide سفارشی پیاده‌سازی می‌شود. SwiftUI به طور پیش‌فرض عناصر را به مرکز تراز می‌کند، اما برای برچسب‌های متنی با آیکون‌ها baseline نتیجه دقیق‌تری می‌دهد. SwiftUI VerticalAlignment.firstTextBaseline و .lastTextBaseline داخلی را فراهم می‌کند.

// SwiftUI: تراز baseline در HStack
HStack(alignment: .firstTextBaseline) {
    Image(systemName: "gear")
    Text("تنظیمات")
        .font(.title3)
}

طبق Apple HIG — Typography (2025)، استفاده از firstTextBaseline در SwiftUI تعداد تنظیمات دستی را در مقایسه با تراز به مرکز ۴۰٪ کاهش می‌دهد. این به ویژه در لیست‌های دارای نوع پویا که اندازه فونت بر اساس تنظیمات دسترسی کاربر تغییر می‌کند، قابل توجه است.

به‌دست آوردن مقدار Baseline

مقدار baseline را می‌توان از طریق API فونت به‌دست آورد. در UIKit ویژگی UIFont.ascender فاصله از baseline تا بالای خط را برمی‌گرداند و UIFont.descender — فاصله از baseline تا پایین (مقدار منفی). مجموع ascender و descender با در نظر گرفتن leading ارتفاع کامل خط را می‌دهد.

let font = UIFont.systemFont(ofSize: 17)
let baseline = font.ascender // فاصله از baseline تا بالا
let descent = font.descender // منفی، پایین baseline
let totalHeight = font.lineHeight // ارتفاع کامل خط

Baseline در Android: سیستم View و Compose

در توسعه Android، baseline هم در سیستم View کلاسیک و هم در Jetpack Compose پشتیبانی می‌شود. در سیستم View برای تراز بر اساس baseline از RelativeLayout.LayoutParams با قوانین ALIGN_BASELINE و ALIGN_TOP استفاده می‌شود. برای TextView ویژگی android:baselineAligned در دسترس است که تراز خودکار عناصر متنی را در LinearLayout کنترل می‌کند.

<!-- Android XML: baseline alignment in LinearLayout -->
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:baselineAligned="true">

    <TextView
        android:id="@+id/label"
        android:text="Price"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/value"
        android:text="$24.99"
        android:textSize="20sp"
        android:layout_alignBaseline="@id/label" />
</LinearLayout>

در Jetpack Compose تراز بر اساس baseline از طریق Modifier.alignWithBaseline یا AlignmentLine در layoutهای سفارشی پیاده‌سازی می‌شود. Compose FirstBaseline و LastBaseline داخلی را فراهم می‌کند که می‌توان در Column و Row برای تراز کردن عناصر متنی با اندازه‌های مختلف استفاده کرد.

// Jetpack Compose: تراز baseline از طریق Modifier
Row(
    verticalAlignment = Alignment.FirstBaseline
) {
    Icon(
        imageVector = Icons.Default.Settings,
        contentDescription = null
    )
    Text(
        text = "تنظیمات",
        style = MaterialTheme.typography.titleMedium
    )
}

طبق Android Developers — Typography and Alignment (2025)، تراز بر اساس baseline در Jetpack Compose تعداد باگ‌های مربوط به موقعیت‌یابی نادرست متن در تست‌های UI را در مقایسه با تنظیم دستی padding یا offset ۳۰٪ کاهش می‌دهد.

Baseline در Flutter: TextBaseline و alignWithBaseline

Flutter دو مکانیزم داخلی برای کار با خط پایه فراهم می‌کند: enum TextBaseline برای انتخاب قرارداد تایپوگرافی (alphabetic یا ideographic) و CrossAxisAlignment.baseline برای تراز در Row و Column. TextBaseline.alphabetic با تایپوگرافی غربی و TextBaseline.ideographic با تایپوگرافی شرق آسیا مطابقت دارد.

// Flutter: تراز baseline
Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
        Icon(Icons.settings),
        Text('تنظیمات', style: TextStyle(fontSize: 20)),
    ],
)

برای موقعیت‌یابی دقیق، Flutter همچنین ویجت Baseline را ارائه می‌دهد که عنصر فرزند را طوری جابجا می‌کند که baseline آن در فاصله معینی از بالای کانتینر قرار گیرد. این برای ایجاد layoutهای متنی سفارشی با تراز غیراستاندارد مفید است.

// Flutter: ویجت Baseline
Baseline(
    baseline: 40.0,
    baselineType: TextBaseline.alphabetic,
    child: Text(
        'متن تراز شده',
        style: TextStyle(fontSize: 24),
    ),
)

طبق Flutter Documentation — Layout and Typography (2025)، CrossAxisAlignment.baseline — تنها راه تراز دقیق متن با اندازه‌های مختلف در Flutter بدون محاسبه دستی padding است. این به ویژه برای خطوطی که عنوان‌ها و زیرنویس‌ها را ترکیب می‌کنند، مانند کارت‌های محصول با قیمت و تخفیف، مهم است.

خطاهای معمول هنگام کار با Baseline

یکی از رایج‌ترین خطاها — تراز کردن متن به مرکز در خطوط با آیکون‌ها یا تصاویر است. وقتی آیکون و متن به مرکز کانتینر تراز می‌شوند، متن از نظر بصری نسبت به آیکون به سمت بالا جابجا می‌شود. این به این دلیل رخ می‌دهد که مرکز متن بالاتر از baseline آن است در حالی که مرکز آیکون با مرکز هندسی مطابقت دارد.

• نادیده گرفتن baseline در لیست‌های چندخطی — خطوط با اندازه‌های مختلف اگر از baseline alignment استفاده نشود، آشفته به نظر می‌رسند. راه حل: همیشه برای ستون‌های متنی از firstTextBaseline یا lastTextBaseline استفاده کنید.
• ترکیب baseline و center alignment — اگر بخشی از خطوط بر اساس baseline و بخشی به مرکز تراز شده باشند، رابط شبکه تایپوگرافی یکپارچه خود را از دست می‌دهد. یک رویکرد برای کل صفحه انتخاب کنید.
• پردازش نادرست localeهای RTL — برای زبان‌های راست به چپ (عربی، عبری) baseline alignment مانند LTR کار می‌کند اما جهت تراز تغییر می‌کند. موقعیت آیکون‌ها نسبت به متن را در هر دو جهت بررسی کنید.
• فونت‌های سفارشی فراموش شده — baseline استاندارد ممکن است با baseline فونت سفارشی متفاوت باشد. همیشه متریک‌های فونت استفاده شده را از طریق API پلتفرم بررسی کنید، به ویژه برای فونت‌های تزئینی.

طبق NN Group — Typography in UI Design (2025)، تراز نادرست baseline زمان اسکن لیست توسط کاربر را در مقایسه با رابط به درستی تراز شده ۲۲٪ افزایش می‌دهد. این یک متریک قابل توجه برای لیست‌ها و فرم‌هایی است که اساس اکثر برنامه‌های موبایل را تشکیل می‌دهند.