التتبع في تطوير التطبيقات المحمولة — الجوهر وضبط المسافة بين الأحرف

ما هو التتبع في الطباعة

التتبع (Tracking) هو تعديل المسافة بين الأحرف، يُطبق بشكل موحد على جميع أحرف كتلة النص. على عكس الكيرنينغ، حيث يتلقى كل زوج من الأحرف تعديلًا فرديًا بناءً على جدول الكيرنينغ للخط، يُحدد التتبع بقيمة رقمية واحدة للنطاق بأكمله. التتبع الإيجابي يزيد المسافة (تباعد موسع)، التتبع السلبي يقللها (تباعد مضغوط).

يعود المصطلح إلى الطباعة المعدنية، حيث كانت المسافة بين الأحرف تُضبط بالمسافة المادية بين قوالب الحروف. في الطباعة الرقمية، يُطبق التتبع فوق جدول الكيرنينغ: أولاً يطبق الخط أزواج الكيرنينغ المدمجة، ثم يضيف النظام تتبعًا موحدًا لجميع الأحرف. المسافة الناتجة = الكيرنينغ + التتبع، وهو أمر مهم يجب مراعاته عند ضغط النص بقوة.

وحدات القياس: يمكن تحديد التتبع بوحدات مطلقة (نقاط، بكسل، مليمتر) ووحدات نسبية (em، نسبة مئوية من حجم الخط). في تطوير التطبيقات المحمولة، يُحدد التتبع عادةً بالنقاط (iOS) أو sp (Android) كقيم مطلقة، وفي الويب بـ em كقيم نسبية. الوحدات النسبية مفضلة لإمكانية الوصول لأنها تتدرج عندما يغير المستخدم حجم الخط.

التتبع والكيرنينغ: الاختلافات الجوهرية

الخلط بين التتبع والكيرنينغ هو أحد أكثر الأخطاء شيوعًا بين المصممين والمطورين المبتدئين. يعمل الكيرنينغ على المستوى المجهري — يضبط المسافة بين أزواج محددة من الأحرف (AV، Te، To) بناءً على هندستها. يعمل التتبع على المستوى الكلي — يزيح جميع أحرف الجزء بشكل موحد دون النظر إلى شكلها.

التأثير البصري: مع الكيرنينغ، تختلف المسافات بين أزواج الأحرف المختلفة — بين A وV تكون أصغر من بين A وI، لأن أشكال الحروف تعوض بعضها البعض. مع التتبع، جميع المسافات متساوية — بين A وV، A وI، T وo — نفس الإزاحة في كل مكان. هذا يجعل التتبع أداة للضبط العالمي والكيرنينغ أداة للضبط الدقيق.

الاستخدام المشترك: في طباعة الواجهات، يُستخدم التتبع والكيرنينغ معًا. يحتوي الخط على جدول كيرنينغ للتحسين الأساسي، ويضيف المطور التتبع للتصميم أو إمكانية الوصول. يُطبق جدول الكيرنينغ أولاً، ثم يُضاف التتبع فوقه. مع التتبع السلبي (الضغط)، يمكن لأزواج الكيرنينغ إنشاء تداخلات غير مرغوب فيها — تحقق من التركيبات الإشكالية.

التتبع الإيجابي والسلبي: متى يُستخدم

التتبع الإيجابي يزيد المسافة بين الأحرف. يُستخدم لتحسين قراءة النص الصغير (10–13pt)، حيث تتداخل الأحرف بصريًا مع التباعد القياسي. يُستخدم أيضًا في إمكانية الوصول للمستخدمين المصابين بعُسر القراءة — المسافة المتزايدة بين الأحرف تسهل التعرف على الحروف. القيم النموذجية: 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. الخطوط الاحترافية تحتوي بالفعل على تباعد مثالي لنص الجسم. أي تدخل في تتبع نص الجسم يجب أن يكون مبررًا بالتصميم أو متطلبات إمكانية الوصول. العناوين (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، يُطبق 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 وهو مفضل لإمكانية الوصول. px لا يتدرج وقد يسبب عدم تناسق عند تكبير النص بواسطة المتصفح (Zoom). توصية: استخدم دائمًا em لـ letter-spacing. الاستثناء هو الحالات التي يجب أن يبقى فيها التتبع ثابتًا بغض النظر عن الحجم، كما في الشعارات.

تحريك letter-spacing: الخاصية تدعم انتقالات ورسوم متحركة CSS، مما يتيح تأثيرات ظهور سلسة للنص. التحريك من letter-spacing: -0.05em إلى letter-spacing: 0.01em عند تحميل عنوان هو تقنية شائعة في الواجهات الحديثة. الأداء: تحريك letter-spacing يسبب إعادة تدفق (إعادة حساب التخطيط) لأنه يغير عرض النص. استخدم transform وopacity للرسوم المتحركة عالية الأداء حيثما أمكن.

إمكانية الوصول والتتبع في واجهات المحمول

يؤثر التتبع مباشرة على قراءة النص للمستخدمين ذوي الإعاقات البصرية وعُسر القراءة. تتطلب إرشادات WCAG 2.2 1.4.12 (تباعد النص) ألا يفقد النص محتواه عند زيادة التباعد بين الأحرف والأسطر والفقرات إلى قيم معينة. يجب أن يتحمل letter-spacing زيادة إلى 0.12em دون قص المحتوى أو تداخل العناصر.

عُسر القراءة: تظهر أبحاث الجمعية البريطانية لعُسر القراءة أن زيادة letter-spacing إلى 0.12em تحسن سرعة القراءة لدى المستخدمين المصابين بعُسر القراءة بنسبة 10–15%. ومع ذلك، هذا فردي — بعض المستخدمين يفضلون التباعد القياسي. يوفر iOS وAndroid إعدادات نظام لإمكانية الوصول لزيادة التباعد بين الأحرف والتي يجب على التطبيق احترامها.

قواعد للمطور: لا تستخدم عرضًا/ارتفاعًا ثابتًا قد ينكسر عند زيادة letter-spacing. تجنب overflow: hidden على حاويات النص دون التحقق من إمكانية الوصول. اختبر الواجهة مع letter-spacing مضبوطًا على 0.12em على جميع الشاشات. إذا انكسر التصميم، راجع التخطيط بدلاً من تجاهل إمكانية الوصول.

دعم المنصة: iOS يزيد تلقائيًا letter-spacing عند تفعيل ميزة النص الأكبر في إعدادات إمكانية الوصول، إذا تم استخدام UIFont.preferredFont. Android يوفر خيارًا مشابهًا عبر FontScale. يجب على المطور عدم تعطيل هذه الإعدادات. سيناريو الاختبار: فعِّل الحد الأقصى لحجم النص في إعدادات الجهاز وتحقق من أن التتبع لا يكسر تخطيط الواجهة.