في هذا الدرس 6تصفّح المواضيع
حتى عندما تختار حجم خط مناسب ولوناً واضح التباين، تتحول المقالات الطويلة سريعاً إلى عبء بصري مرهق إذا التصقت الأسطر ببعضها رأسياً أو ازدحمت الكلمات أفقياً بلا متنفس. تعتمد الطباعة الرقمية المريحة على منح الفقرة فراغات مدروسة تقود عين القارئ بسلاسة من نهاية السطر الحالي إلى مطلع السطر التالي دون تشتت.
توفر لغة CSS خمس خصائص متخصصة للتحكم في أبعاد التباعد النصي داخل الفقرة الواحدة: ضبط المسافة الرأسية بين الأسطر عبر line-height، والتحكم في تباعد الحروف عبر letter-spacing، وتوسيع أو تضييق الفراغ بين الكلمات عبر word-spacing، وإزاحة مطلع السطر الأول عبر text-indent، وتحديد اتساع مسافة الجدولة داخل مقاطع الكود عبر tab-size.
تضبط خاصية line-height الارتفاع الرأسي المخصص لكل سطر داخل العنصر. ورغم أنها تقبل وحدات ثابتة مثل 24px أو نسباً مئوية مثل 150%، فإن القاعدة الهندسية المعتمدة في واجهات الويب الحديثة هي كتابتها كأرقام مجردة بلا وحدة (Unitless Numbers) مثل 1.5 أو 1.6 أو 1.75.
يكمن السر في آلية التوريث للأبناء؛ فعند كتابة قيمة بوحدة البكسل أو النسبة المئوية على عنصر أب، يرث الأبناء الناتج النهائي المحسوب بالبكسل، فإذا وُجد عنوان فرعي كبير بحجم 32px داخل حاوية ارتفاع سطرها المحسوب 24px فسيتداخل سطرا العنوان فوق بعضهما! أما عند كتابة معامل مجرد مثل line-height: 1.6، فيرث كل عنصر ابن المعامل 1.6 نفسه ويضربه تلقائياً في حجم خطه الخاص.
.comfortable-copy {
font-size: 18px;
line-height: 1.7;
color: #261f36;
}
.cramped-copy {
font-size: 18px;
line-height: 1.05;
color: #584775;
}تتحكم خاصية letter-spacing في زيادة أو إنقاص المسافة الأفقية الدقيقة بين كل حرف والحرف الذي يليه. في الواجهات الإنجليزية، يمنح دمج text-transform: uppercase مع قيمة موجبة خفيفة مثل letter-spacing: 2px أو 0.08em الشارات القصيرة والعناوين الفرعية مظهراً أنيقاً واضح المعالم.
تحذير هندسي حاسم للنصوص العربية: إيّاك وتطبيق قيم موجبة لخاصية letter-spacing على الجمل والعناوين العربية! فالأبجدية العربية خط متصل يعتمد في جماله ومقروئيته على تلاحم الحروف وتشكيلاتها المتصلة؛ وإقحام مسافة إضافية بين الحروف يؤدي إلى تقطيع الكلمة العربية أو تشويه وصلاتها الطباعية بشكل منفر للقارئ. التزم دائماً بالقيمة letter-spacing: normal أو 0 في الواجهات العربية.
انتقل بين الحالات الثلاث في المختبر التفاعلي التالي لتقارن بصرياً بين إيقاع الفقرة المريح، وتباعد العناوين اللاتينية، وأثر الخطأ الشائع عند فرض letter-spacing موجب على الكلمات العربية المتصلة:
عندما ترغب في منح عنوان رئيسي عربي أو ثنائي اللغة اتساعاً أفقياً فخماً دون المساس بترابط الحروف داخل الكلمة الواحدة، فإن الخيار الهندسي الصحيح هو خاصية word-spacing. فعلى عكس تباعد الأحرف، تستهدف هذه الخاصية محرف المسافة الفاصلة بين الكلمات المستقلة فقط (U+0020) وتترك بنية كل كلمة متماسكة تماماً.
القيمة الافتراضية للخاصية هي normal، وتعادل إضافة 0px فوق عرض المسافة الأصلي المصمم داخل الخط. تزيد القيم الموجبة مثل 4px أو 0.25em من وضوح الفصل بين الكلمات، في حين تُستخدم القيم السالبة الطفيفة مثل -1px أحياناً لتقريب كلمات العناوين ذات الفراغات العريضة.
.eyebrow-label {
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 4px;
}
.airy-slogan {
font-size: 22px;
word-spacing: 8px;
}في الكتب والمقالات المطولة والتقارير الصحفية، تُستخدم المسافة البادئة في مطلع كل فقرة لإرشاد القارئ بصرياً إلى بداية فكرة جديدة. تتكفل خاصية text-indent بإزاحة السطر الأول فقط من العنصر الكتلي بمقدار محدد مثل 28px أو 2em أو نسبة مئوية مثل 8%، بينما تبدأ بقية أسطر الفقرة من الحافة الأصلية المعتادة. ومن مزاياها الذكية أنها تحترم اتجاه اللغة تلقائياً؛ فتبدأ الإزاحة من اليمين في الفقرات العربية ومن اليسار في الفقرات الإنجليزية.
وإلى جانب إزاحة الفقرات، توفر لغة CSS خاصية tab-size لضبط اتساع محارف الجدولة (Tab) داخل مقاطع الكود المحاطة بوسم <pre>؛ إذ تعرض المتصفحات محرف الجدولة افتراضياً بعرض ضخم يعادل 8 مسافات، ويمكنك تقليصه عبر tab-size: 2 أو tab-size: 4 ليبدو الكود رشيقاً ومنظماً.
.editorial-para {
text-indent: 2em;
line-height: 1.65;
}
.code-snippet {
tab-size: 2;
background-color: #f2ebf9;
}تشترك خصائص التباعد الخمس جميعاً في كونها خصائص موروثة (Inherited) تنتقل تلقائياً من العنصر الأب إلى الأبناء، مما يتيح لك تأسيس إيقاع قراءة موحد للصفحة بأقل قدر من الكود. وعند فحص أي فقرة داخل تبويب Computed في أدوات المطور DevTools، تذكر أن المتصفح يعرض النتيجة النهائية بالبكسل حتى لو كتبت line-height: 1.6 كرقم مجرد.
| الخاصية | نطاق التأثير | القيمة الموصى بها | القاعدة مع النصوص العربية |
|---|---|---|---|
line-height | الارتفاع الرأسي لصندوق كل سطر | رقم مجرد من 1.5 إلى 1.8 | آمنة؛ يُفضل 1.65 فأكثر لراحة التشكيل |
letter-spacing | المسافة الأفقية بين الحروف المتجاورة | normal أو 1px..3px للاتيني | اتركها normal أو 0 لمنع تقطيع الحروف |
word-spacing | اتساع الفراغ الفاصل بين الكلمات | normal أو 2px..6px | آمنة تماماً لأنها لا تمس اتصال الكلمة |
text-indent | إزاحة بداية السطر الأول فقط | 0 أو 1.5em..2em | تنعكس تلقائياً لتبدأ من جهة اليمين |
tab-size | عرض مسافة الجدولة في النص المنسق مسبقاً | عدد صحيح 2 أو 4 | مثالية لضبط مقاطع الكود داخل <pre> |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أصبحت الآن قادراً على ضبط راحة قراءة الفقرات عبر الأرقام المجردة في line-height، وتوسيع المسافة بين الكلمات بأمان عبر word-spacing، وإزاحة أول سطر عبر text-indent، وتقليص الجدولة عبر tab-size مع حماية اتصال الحروف العربية. في الخطوة التالية ننتقل إلى درس المساحات البيضاء للنصوص في لغة CSS للتحكم في دمج المسافات والتفاف الأسطر.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Unitless Line Height ارتفاع السطر المجرد
- قيمة عددية بلا وحدة قياس تُسند لخاصية line-height مثل 1.6، فتورّث النسبة ذاتها للأبناء ليحسب كل عنصر ارتفاع سطره بناءً على حجم خطه الخاص.
- للمراجعة
- 02 Leading (Half-Leading) فراغ ما بين الأسطر (Leading)
- الفارق الرأسي الناتج عن طرح حجم الخط من ارتفاع السطر، ويقسمه المتصفح بالتساوي أعلى صندوق السطر وأسفله.
- للمراجعة
- 03 Character Tracking (letter-spacing) تتبع الأحرف (letter-spacing)
- تعديل المسافة الأفقية بين الحروف المتجاورة؛ يفيد العناوين اللاتينية الكبيرة لكن قيمه الموجبة تقطع اتصال الحروف العربية.
- للمراجعة
- 04 First-Line Indentation (text-indent) إزاحة السطر الأول (text-indent)
- إزاحة أفقية تُطبق على مطلع السطر الأول فقط داخل العنصر الكتلي، وتنعكس تلقائياً لتبدأ من اليمين في العربية ومن اليسار في الإنجليزية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات نفاذية محتوى الويب الصادرة عن W3C، ويحدد معيارها 1.4.12 الحدود الموصى بها لارتفاع السطر وتباعد النصوص لسهولة القراءة.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- لغة أوراق الأنماط المتتالية المسؤولة عن ضبط التباعد الطباعي والإيقاع البصري وتنسيق عناصر صفحات الويب.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- اتجاه الكتابة من اليمين إلى اليسار المعتمد في اللغة العربية، حيث تبدأ إزاحة text-indent تلقائياً من الحافة اليمنى.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر التجريب وأنشئ الفئة .story-copy مع font-size: 18px وارتفاع سطر مجرد line-height: 1.75 وبادئة text-indent: 2em، وتحقق من انزياح السطر الأول وحده.
-
جرّب تطبيق word-spacing: 6px مع إبقاء letter-spacing: normal على عنوان رئيسي، ثم افحص القيم المحسوبة داخل تبويب Computed في DevTools.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.