Line Height في تطوير التطبيقات — ما هو وتأثيره على الطباعة

ما هو Line Height في الطباعة

Line Height (ارتفاع السطر) هو معامل طباعي أساسي يحدد المسافة بين الخطوط الأساسية (baseline) للأسطر المتتالية. في تطوير الويب والتطبيقات المحمولة، يحدد line height الإيقاع الرأسي للنص: كل سطر يشغل ارتفاعًا معينًا، ويتراكم هذا المعامل عند الانتقال إلى السطر التالي. يشمل line height ليس فقط الارتفاع الفعلي للحروف (صاعد + هابط) ولكن أيضًا المساحة الإضافية التي تحسن قابلية القراءة.

رياضيًا، يُعبر عن line height كالتالي: line-height = font-size × multiplier. إذا كان font-size = 16 px و multiplier = 1.5، فإن line-height = 24 px. التباعد بين الأسطر (leading) في هذه الحالة سيكون 24 - (صاعد + هابط) بكسل. تستخدم معظم أنظمة التصميم والمنصات المضاعف لأنه يتدرج تلقائيًا عند تغيير حجم الخط.

وفقًا لـ Material Design Type Scale (2025)، يعد line height أحد المعاملات الرئيسية الثلاثة لنظام الطباعة في التطبيق إلى جانب font-size و font-weight. القيم المتسقة لـ line height لجميع مستويات التسلسل الهرمي الطباعي تخلق إيقاعًا رأسيًا يجعل الواجهة متماسكة بصريًا. انحراف line-height بنسبة 10% عن القيمة المثلى ملحوظ بالفعل بالعين المجردة ويقلل من الجودة المدركة للواجهة.

Line Height مقابل Leading: ما الفرق

Leading (يُنطق «لِدِنغ») هو مصطلح طباعي تاريخي يشير إلى المسافة بين الأسطر من خط أساس إلى خط أساس مطروحًا منها ارتفاع الحروف. في التركيب المعدني، كان leading عبارة عن شرائح رصاص تُدرج بين الأسطر لزيادة المسافة. Line height هو مفهوم أكثر حداثة يشمل كلاً من ارتفاع الخط والـ leading.

من الناحية العملية، يهم الفرق عند ترجمة التصاميم من Figma أو Sketch إلى كود. أدوات التصميم عادة ما تحدد line-height (أو ببساطة ارتفاع السطر). قد تستخدم واجهات برمجة التطبيقات للمنصات المحمولة مصطلحات مختلفة: iOS تستخدم lineSpacing (الأقرب إلى leading) مع minimumLineHeight/maximumLineHeight، Android تستخدم LineHeightStyle مع alignment و trim، Flutter تستخدم height (مضاعف بدون وحدة).

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

الفرق الرئيسي: إذا قمت بتعيين minimumLineHeight، فستستخدم جميع الأسطر نفس الارتفاع، وهو أمر جيد للشبكة الإيقاعية. إذا قمت بتعيين lineSpacing فقط، فسيختلف ارتفاع السطر حسب حجم الخط — وهذا نهج أكثر مرونة ولكنه أقل قابلية للتنبؤ. بالنسبة لأنظمة التصميم، يوصى باستخدام minimumLineHeight لأنه يعطي نتيجة مضبوطة بدقة.

وفقًا لـ IBM Carbon Design System — Typography Guidelines (2025)، فإن الفرق بين line height و leading ملحوظ بشكل خاص عند استخدام الخطوط المخصصة. إذا كان الخط يحتوي على leading داخلي كبير (مثل SF Pro)، فإن lineSpacing = 0 يعطي نتيجة مقبولة. إذا كان leading الخط صغيرًا (بعض الخطوط مفتوحة المصدر)، فستظهر الأسطر متلاصقة بدون lineSpacing إضافي.

Line Height الأمثل لواجهات الأجهزة المحمولة

يعتمد line height الأمثل على عدة عوامل: حجم الخط، طول السطر، نوع الخط، والجمهور المستهدف. للنص الرئيسي على الأجهزة المحمولة (طول السطر 35–55 حرفًا)، النطاق الموصى به هو 1.4–1.6 من font-size. توفر هذه القيمة مسافة رأسية كافية لحركة العين المريحة بين الأسطر دون فقدان التماسك البصري للنص.

بالنسبة للعناوين، حيث يكون طول السطر عادة أقصر (2–6 كلمات)، يمكن أن يكون line height أصغر — 1.1–1.25 من font-size. لا تتطلب العناوين تباعدًا كبيرًا بين الأسطر لأن وظيفتها الأساسية هي جذب الانتباه وليس القراءة المطولة. بالإضافة إلى ذلك، فإن أحجام الخطوط الكبيرة للعناوين (24–32 pt) مع line-height 1.5 ستخلق مسافات زائدة تكسر الإيقاع الرأسي للصفحة.

• النص الرئيسي (16–18 pt) — line-height 1.4–1.6. الحد الأدنى للقراءة المريحة على الأجهزة المحمولة حيث يكون طول السطر محدودًا بعرض الشاشة.
• النص الصغير (11–13 pt) — line-height 1.3–1.5. حجم الخط الصغير يتطلب مضاعفًا أصغر لأن الأسطر أقصر وتجد العين السطر التالي بشكل أسرع.
• النص الكبير (20–32 pt) — line-height 1.1–1.25. كلما كان الخط أكبر، قل التباعد النسبي بين الأسطر المطلوب لقابلية القراءة.
• النص أحادي المسافة — line-height 1.3–1.5. الخطوط أحادية المسافة (للكود) عادة ما تحتوي على مقاييس أكبر، لذلك يمكن تقليل line-height إلى 1.3.

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

وفقًا لـ W3C — Accessibility Requirements for Typography (2025)، يعتبر line height أقل من 1.2 للنص الرئيسي عائقًا أمام إمكانية الوصول: يواجه المستخدمون المصابون بعسر القراءة وضعف البصر صعوبات كبيرة في قراءة النص الكثيف. يوصي WCAG 2.2 بـ line-height لا يقل عن 1.5 للمحتوى الرئيسي، ومع ذلك في واجهات الأجهزة المحمولة يمكن خفض هذه القيمة إلى 1.4 مع مراعاة عرض الشاشة المحدود.

Line Height في iOS: UIKit و SwiftUI

في iOS، يتم التحكم في line height من خلال NSMutableParagraphStyle أو معدّلات SwiftUI المدمجة. يوفر UIKit ثلاث خصائص رئيسية: minimumLineHeight و maximumLineHeight (تحدد الارتفاع الدقيق للسطر) و lineSpacing (مسافة إضافية بين الأسطر). عند استخدام TextKit (NSTextStorage، NSLayoutManager)، يتم أخذ line height في الاعتبار في lineFragmentRect ويؤثر على حساب هندسة كتلة النص.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

في SwiftUI، يتم تعيين line height من خلال المعدّل .lineSpacing(value)، الذي يضيف مساحة إضافية بين الأسطر، أو من خلال .font مع TextStyle مخصص يتضمن line height. تدعم SwiftUI أيضًا الأنواع الديناميكية: يتدرج line height المحدد عندما يغير المستخدم حجم الخط في الإعدادات.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

وفقًا لـ Apple HIG — Typography Implementation (2025)، عند استخدام line-height ثابت عبر minimumLineHeight، يجب التأكد من أن القيمة لا تقل عن line-height الطبيعي للخط. إذا كان minimumLineHeight أقل من صاعد + هابط، يتجاهل UIKit الإعداد ويستخدم الارتفاع الطبيعي. قد يؤدي هذا إلى نتائج غير متوقعة عند تغيير الخط أو حجمه.

Line Height في Android: نظام View و Compose

في تطوير Android، تتم إدارة line height بشكل مختلف في نظام View الكلاسيكي و Jetpack Compose. في نظام View، يتم استخدام طريقة TextView.setLineSpacing(extra, multiplier). المعامل extra هو مساحة إضافية بالبكسل، multiplier هو عامل من الارتفاع الطبيعي للسطر. الارتفاع الناتج = line-height طبيعي × multiplier + extra.

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

في Jetpack Compose، يتم استخدام فئة LineHeightStyle لإدارة line height، والتي تسمح بتعيين المحاذاة (Alignment) والقص (Trim) للمسافة بين الأسطر. يوفر هذا تحكمًا أدق من مضاعف بسيط. على سبيل المثال، يمكن تحديد أن المساحة الإضافية بين الأسطر يجب توزيعها بالتساوي أعلى وأسفل السطر (align.Center) أو إضافتها بالكامل أعلاه (align.Top).

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

وفقًا لـ Android Developers — Compose Text Styling (2025)، يحتفظ LineHeightStyle.Trim.None (الافتراضي) بالمسافة في السطر الأول والأخير، مما قد يكسر المحاذاة في Card أو Column. يوصى باستخدام Trim.Both للحاويات ذات الارتفاع الثابت و Trim.LastLine لكتل النص حيث تكون الحافة السفلية مهمة.

Line Height في Flutter: TextStyle و StrutStyle

في Flutter، يتم تعيين line height من خلال خاصية height لفئة TextStyle. إنه مضاعف بدون وحدة لـ font-size: height: 1.5 مع fontSize: 16 يعطي line-height 24.0. قيمة height تضرب ضمنيًا في fontSize، لذلك يتدرج line-height نسبيًا عند تغيير حجم الخط. يقدم Flutter أيضًا StrutStyle — آلية لفرض line-height ثابت بغض النظر عن الحروف الفعلية في السطر.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle مفيد بشكل خاص للقوائم ذات أحجام الخطوط المختلفة (مثل الدردشات، خلاصات الأخبار)، حيث يجب أن تحتوي جميع الأسطر على نفس الارتفاع بغض النظر عن المحتوى. بدون StrutStyle، سيكون للسطر الذي يحتوي على أحرف فقط بدون هابط ارتفاع فعلي أصغر من السطر الذي يحتوي على أحرف مثل «p» و «y»، مما يسبب اهتزاز النص أثناء التمرير.

وفقًا لـ Flutter Documentation — Text Layout (2025)، يضمن StrutStyle مع forceStrutHeight: true أن ارتفاع كل سطر يساوي القيمة المحددة، ويتم محاذاة الحروف الفعلية حسب الخط الأساسي داخل هذه المساحة. هذا هو النهج القياسي لقوائم النص حيث يكون الإيقاع الرأسي حاسمًا للإدراك البصري.

Line Height متكيف مع الشاشات المختلفة

تعمل تطبيقات الأجهزة المحمولة على أجهزة بأحجام شاشات مختلفة وكثافات بكسلات وإعدادات وصول. يجب أن يتكيف line height مع هذه التغييرات مع الحفاظ على قابلية القراءة. القاعدة الرئيسية: استخدم مضاعفات بدون وحدة (unitless)، وليس قيمًا ثابتة بـ px أو pt، بحيث يتدرج line-height مع font-size.

عند استخدام Dynamic Type (iOS) أو fontScale (Android)، يمكن أن يزيد حجم الخط بنسبة 20–50% عن القيمة الأساسية. يتدرج line-height المحدد عبر مضاعف تلقائيًا. إذا تم تعيين line-height كقيمة ثابتة (مثل 24 px عند font-size 16 pt)، فعند زيادة الخط إلى 22 pt سينخفض line-height النسبي إلى 1.09 — وهو بالفعل أقل من عتبة قابلية القراءة.

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

وفقًا لـ Material Design — Responsive Typography (2025)، للأجهزة اللوحية والشاشات الكبيرة (أكثر من 600 dp عرضًا)، يوصى بزيادة line-height للنص الرئيسي بمقدار 0.1–0.2 مقارنة بالهواتف، لأن طول السطر يصبح أكبر. للأجهزة القابلة للطي، حيث يتغير عرض الشاشة ديناميكيًا، يجب إعادة حساب line-height عند كل تغيير في التكوين.