ترکینگ در توسعه موبایل — مفهوم و تنظیم فاصله بین نویسه‌ها

ترکینگ در تایپوگرافی چیست

Tracking (ترکینگ، فاصله‌گذاری) — تغییر فاصله بین نویسه‌ها است که به طور یکنواخت بر همه نویسه‌های یک بلوک متن اعمال می‌شود. بر خلاف کرنینگ که هر جفت نویسه بر اساس جدول کرنینگ قلم تصحیح فردی دریافت می‌کند، ترکینگ با یک مقدار عددی واحد برای کل محدوده تعیین می‌شود. ترکینگ مثبت فاصله را افزایش می‌دهد (فاصله‌گذاری)، منفی — کاهش (تراکم).

این اصطلاح از تایپوگرافی فلزی ریشه می‌گیرد، جا که فاصله بین نویسه‌ها توسط فاصله فیزیکی بین حروف تنظیم می‌شد. در تایپوگرافی رقومی، ترکینگ بر روی جدول کرنینگ اعمال می‌شود: ابتدا قلم جفت‌های کرنینگ داخلی را اعمال می‌کند، سپس سیستم ترکینگ یکنواختی را به همه نویسه‌ها اضافه می‌کند. فاصله نهایی = کرنینگ + ترکینگ، که در تراکم شدید متن باید مد نظر قرار گیرد.

واحدهای اندازه‌گیری: ترکینگ می‌تواند به واحدهای مطلق (پوانت، پیکسل، میلی‌متر) و نسبی (em، درصد از اندازه قلم) تعیین شود. در توسعه موبایل، ترکینگ معمولاً به عنوان مقادیر مطلق به پوانت (iOS) یا sp (Android) و در وب به عنوان نسبی به em تعیین می‌شود. واحدهای نسبی برای accessibility ترجیح دارند، چون با تغییر اندازه قلم توسط کاربر مقیاس می‌شوند.

ترکینگ و کرنینگ: تفاوت‌های اصولی

اشتباه در تفکیک ترکینگ و کرنینگ یکی از رایج‌ترین اشتباهات طراحان و توسعه‌دهندگان مبتدی است. کرنینگ در سطح کلان کار می‌کند — فاصله بین جفت‌های مشخص نویسه (AV، Te، To) را بر اساس هندسه آنها تصحیح می‌کند. ترکینگ در سطح کلان کار می‌کند — به طور یکنواخت همه نویسه‌های بخش را جابجا می‌کند، بدون توجه به شکل آنها.

اثر بصری: در کرنینگ، فاصله بین جفت‌های مختلف متفاوت است — بین A و V کمتر از بین A و I است، زیرا شکل حروف یکدیگر را جبران می‌کنند. در ترکینگ، همه فاصله‌ها یکسان است — بین A و V، A و I، T و o — همه جا یک جابجایی یکسان. این ترکینگ را به ابزاری جهانی و کرنینگ را به ابزاری تنظیم ظریف تبدیل می‌کند.

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

ترکینگ مثبت و منفی: کی استفاده کنیم

ترکینگ مثبت (فاصله‌گذاری) فاصله بین نویسه‌ها را افزایش می‌دهد. برای بهبود خوانایی متن کوچک (10–13pt) استفاده می‌شود، جا که نویسه‌ها در فاصله پیش‌فرض بصری به هم می‌چسبند. همچنین در accessibility برای کاربران دارای دیسلکسی استفاده می‌شود — فاصله افزایش‌یافته بین نویسه‌ها تشخیص حروف را آسان‌تر می‌کند. مقادیر معمولی: 0.3–1pt برای iOS، 0.02–0.05em برای وب.

ترکینگ منفی (تراکم) فاصله بین نویسه‌ها را کاهش می‌دهد. در عناوین (از 24pt) و متنهای تأکیدی استفاده می‌شود، جا که نوشته متراکم یکپارچه و مدرن به نظر می‌رسد. اندازه‌های بزرگ قلم تراکم را خوب تحمل می‌کنند، چون فاصله‌های بین نویسه‌ها بصری بزرگ است. مقادیر معمولی: از -0.3 تا -1pt. محدودیت: در ترکینگ کمتر از -1pt، نویسه‌ها می‌توانند بر روی یکدیگر بیافتند، خصوصاً در جفت‌هایی که عناصر برجسته دارند (fi، fj، TT).

قاعده تجربی: برای هر اندازه قلم، محدوده ترکینگ مجاز وجود دارد. هر چه قلم بزرگ‌تر باشد، ترکینگ کمتری برای خوانایی بهینه مورد نیاز است. فرمول: ترکینگ بهینه ≈ font-weight * 0.01 – font-size * 0.001. برای قلم ضخیم (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84، که با تنظیم بر اساس قرنیتور تقریباً 0.5pt ترکینگ مثبت می‌دهد.

ترکینگ برای انواع مختلف متن

متن اصلی (14–18pt): ترکینگ مورد نیاز نیست یا حداقل مثبت 0.1–0.3pt. قلم‌های حرفه‌ای در حال حاضر شامل فاصله‌های بهینه برای متن اصلی هستند. هر دخالت در ترکینگ متن اصلی باید توسط نیازهای طراحی یا accessibility تایید شود. عناوین (20–36pt): ترکینگ منفی از -0.3 تا -0.8pt بسته به قرنیتور و وزن مجاز است. حروف بزرگ (ALL CAPS): ترکینگ مثبت 0.5–2pt توصیه می‌شود، زیرا حروف بزرگ در حالت کاپس بدون فاصله اضافی بصری به هم می‌چسبند.

ویژگی‌های قرنیتورها: قلم‌های با هندسه گروتسک (Helvetica، Inter، SF Pro) ترکینگ منفی را بهتر از قرنیتورهای انتیکوا با سریف (Times، Georgia، PT Serif) تحمل می‌کنند. در قلم‌های انتیکوا، سریف‌ها ارتباط بصری اضافی بین حروف ایجاد می‌کنند و تراکم متن را ناخوانا می‌کند. برای قرنیتورهای انتیکوا، تنها ترکینگ مثبت توصیه می‌شود.

پیاده‌سازی ترکینگ در iOS و Android

در iOS، ترکینگ از طریق همان ویژگی .kern در NSAttributedString مانند کرنینگ انجام می‌شود، اما با یک تفاوت: برای ترکینگ مقدار عددی متفاوت از nil مشخص می‌شود. nil — کرنینگ پیش‌فرض (از جدول قلم)، 0 — غیرفعال‌سازی کرنینگ، هر عدد دیگر — ترکینگ بر روی جدول کرنینگ. این به آن معنی است که با تنظیم .kern = 2، تمام نویسه‌ها +2pt فاصله بین نویسه‌ای روی جفت‌های کرنینگ داخلی دریافت می‌کنند.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// ترکینگ مثبت +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel با ترکینگ
label.attributedText = attributedString

SwiftUI از مودیفیکاتور .tracking() برای Text استفاده می‌کند که CGFloat می‌پذیرد. بر خلاف UIKit، ترکینگ SwiftUI به کل متن داخل مودیفیکاتور اعمال می‌شود و بدون تقسیم به چند بلوک Text نمی‌تواند جزئی باشد. SwiftUI به طور خودکار ترکیب کرنینگ و ترکینگ را با اعمال ترکینگ بر روی جدول کرنینگ قلم مدیریت می‌کند.

Android از ویژگی letterSpacing در TextView استفاده می‌کند که به em (ضریب نسبت به اندازه قلم) تعیین می‌شود. مقدار 0 — ترکینگ پیش‌فرض، 0.05 — افزایش 5% از em، -0.02 — کاهش. در Android، letterSpacing مانند ترکینگ کار می‌کند (به طور یکنواخت برای همه نویسه‌ها)، و جدول کرنینگ قلم به طور خودکار در سطح موتور رندر Minikin اعمال می‌شود.

// در چیدمان XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// به صورت برنامه‌ای در Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose در Android از پارامتر letterSpacing در TextStyle استفاده می‌کند که به sp تعیین می‌شود. به عنوان مثال، TextStyle(letterSpacing = 0.5.sp) ترکینگ 0.5 sp را می‌دهد. بر خلاف روش XML، Compose امکان ترکیب letterSpacing با سایر پارامترهای تایپوگرافیکی در یک شیء TextStyle واحد را فراهم می‌کند که ایجاد سیستم‌های طراحی را ساده می‌کند.

تنظیم letter-spacing در توسعه وب

در وب، ترکینگ از طریق ویژگی CSS letter-spacing انجام می‌شود که هر واحد طولی یا کلمه کلیدی normal را می‌پذیرد. مقدار normal معادل 0 است (بدون فاصله اضافی بین نویسه‌ها). ویژگی به ارث می‌رسد، از مقادیر منفی پشتیبانی می‌کند و قابل انیمیشن است. بر اساس CSS Specification، letter-spacing پس از جدول کرنینگ قلم اعمال می‌شود.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em در مقابل px: letter-spacing به em با تغییر font-size مقیاس می‌شود و برای accessibility ترجیح دارد. px مقیاس نمی‌شود و می‌تواند با بزرگنمایی متن توسط مرورگر (Zoom) ناهماهنگ ایجاد کند. توصیه: همیشه از em برای letter-spacing استفاده کنید. استثنا — مواردی که ترکینگ باید بدون توجه به اندازه قلم ثابت بماند، مانند لوگوها.

انیمیشن letter-spacing: ویژگی از CSS transitions و animations پشتیبانی می‌کند که ایجاد افکت‌های حرکتی ظهور متن را ممکن می‌سازد. انیمیشن از letter-spacing: -0.05em به letter-spacing: 0.01em در بارگیری عنوان یک تکنیک محبوب در رابط‌های مدرن است. کارایی: انیمیشن letter-spacing باعث reflow (محاسبه مجدد layout) می‌شود، زیرا عرض متن تغییر می‌کند. در جایی که ممکن است، برای انیمیشن‌های با کارایی بالا از transform و opacity استفاده کنید.

accessibility و ترکینگ در رابط‌های موبایل

ترکینگ به طور مستقیم بر خوانایی متن برای کاربران با محدودیت بینایی و دیسلکسی تاثیر می‌گذارد. WCAG 2.2 Guideline 1.4.12 (Text Spacing) ایجاب می‌کند که متن با افزایش فاصله‌های بین نویسه‌ای، بین سطری و بین بندی تا مقادیر مشخص محتوای خود را از دست ندهد. letter-spacing باید افزایش تا 0.12em را بدون حذف محتوا و انباشت عناصر تحمل کند.

دیسلکسی: تحقیقات British Dyslexia Association نشان می‌دهد که افزایش letter-spacing تا 0.12em سرعت خواندن را در کاربران دارای دیسلکسی تا 10–15% بهبود می‌بخشد. اما این امر فردی است — بعضی کاربران فاصله پیش‌فرض را ترجیح می‌دهند. iOS و Android تنظیمات سیستمی accessibility را برای افزایش فاصله بین نویسه‌ها ارائه می‌دهند که برنامه باید به آن‌ها احترام بگذارد.

قوانین برای توسعه‌دهنده: از عرض‌ها/ارتفاع‌های ثابتی استفاده نکنید که ممکن است با افزایش letter-spacing مشکل داشته باشند. از overflow: hidden در کانتینرهای متن بدون بررسی accessibility خودداری کنید. رابط را با letter-spacing افزایش‌یافته تا 0.12em در همه صفحات آزمایش کنید. اگر طراحی می‌شکند — layout را مجدداً بررسی کنید، نه accessibility را نادیده بگیرید.

پشتیبانی سیستمی: iOS به طور خودکار letter-spacing را با فعال‌سازی ویژگی متن بزرگ‌تر در تنظیمات دسترسی افزایش می‌دهد، اگر از UIFont.preferredFont استفاده شود. Android گزینه مشابهی را از طریق FontScale فراهم می‌کند. توسعه‌دهنده نباید این تنظیمات را غیرفعال کند. سناریوی آزمایشی: حداکثر اندازه متن را در تنظیمات دستگاه فعال کنید و بررسی کنید که ترکینگ layout رابط را نمی‌شکند.