Leading وتباعد السطور: ما هو والتكوين في iOS وAndroid

ما هو leading وتباعد السطور

Leading (ينطق «ليدنغ») — هو المسافة العمودية بين الأسطر الأساسية للسطور المتجاورة في علم الطباعة. السطر الأساسي هو خط غير مرئي توضع عليه حروف النص. كلما كان الليدنغ أكبر، كلما كانت السطور أكثر حرية في موقعها بالنسبة لبعضها البعض. في علم الطباعة الرقمية، يطلق على الليدنغ عادة اسم تباعد السطور أو ارتفاع السطر.

تاريخيًا، نشأ المصطلح في عصر الطباعة المعدنية: كان الطباعون يدرجون شرائط رصاصية رفيعة بين السطور لزيادة المسافة. في الخطوط الحديثة، يتم تحديد الليدنغ كنسبة لحجم الخط. القيمة الافتراضية للنظام هي 1.2 (120% من حجم الخط)، ولكن للنصوص الطويلة وواجهات الأجهزة المحمولة يوصى بقيمة أكبر. وفقًا لإرشادات الطباعة لتصميم المواد، يبلغ ارتفاع السطر الأمثل لواجهات الويب والأجهزة المحمولة 1.4–1.5 لنص الجسم.

الفرق بين leading وتباعد السطور: leading هو المسافة الكاملة من خط أساسي إلى خط أساسي، بينما تباعد السطور هو المسافة بين الحد السفلي لسطر والحد العلوي للسطر التالي. في معظم برمجيات 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 عالية، تندمج السطور بصريًا بشكل أسرع مع نفس تباعد السطور.

تنفيذ leading في 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 (مسافة إضافية بالبكسل) و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 — يستخدم معلمة 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;
}

المضاعف الرقمي مقابل em: line-height: 1.5 و line-height: 1.5em هما شيئان مختلفان. يتورث المضاعف الرقمي كقيمة محسوبة ويتم إعادة حسابها لكل عنصر تابع بناءً على font-size الخاص به. يتورث em كقيمة محسوبة ثابتة بناءً على font-size العنصر الأصلي. هذا فرق حاسم: عند تدخين font-size: 20px داخل font-size: 16px، line-height: 1.5 يعطي 30px، بينما line-height: 1.5em يعطي 24px (من العنصر الأصلي). توصية: استخدم دائمًا مضاعفًا رقميًا.

مقارنة إعدادات leading في iOS وAndroid والويب

على الرغم من اختلاف برمجيات API، فإن مبدأ تكوين تباعد السطور هو نفسه في جميع المنصات. المضاعف يتم تقييسه عند تغيير حجم الخط وهو صديق لإمكانية الوصول. القيمة المطلقة (المسافة) لا يتم تقييسها وقد تتسبب في مشاكل عند استخدام 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. في الممارسة، يؤدي ذلك إلى اختلافات طفيفة في الليدنس البصري مع نفس قيمة المضاعف. للحصول على تناسق تام في البكسل، استخدم قيمًا مطلقة مع تصحيح حسب المنصة.