انتقل إلى محتوى الدرس

Typographic First Line and Letter تنسيق أول سطر وأول حرف

تعلم استخدام العناصر الزائفة في لغة CSS لتنسيق أجزاء محددة من النصوص وتوليد الشارات الزخرفية وعلامات الاقتباس ثنائية اللغة وتلوين رموز القوائم وتظليل القراءة دون إضافة وسوم فائضة.
2 صفوف تعليمية
لغة CSS
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تعتمد المقالات التحريرية كثيراً على إبراز بداية النص عبر ::first-line لتنسيق السطر الافتتاحي و::first-letter لتكبير الحرف الاستهلالي. ويعمل كلا العنصرين حصرياً على الحاويات الكتلية مثل <p> ولا يعملان على العناصر السطرية الصرفة display: inline. وبما أن طول السطر الأول يتغير بتغير عرض الشاشة، يعيد المتصفح حساب الكلمات المشمولة بتنسيق ::first-line لحظياً عند تكبير النافذة أو تصغيرها.

ورغم جمال الحرف الاستهلالي العائم عبر ::first-letter في المقالات الإنجليزية، يجب الحذر الشديد عند تطبيقه على النصوص العربية؛ لأن الحروف العربية متصلة بطبيعتها داخل الكلمة الواحدة، وفصل الحرف الأول بصندوق عائم أو حشوة جانبية قد يكسر اتصال الحرف بما بعده في بعض المحركات، لذا يُفضل في العربية الاكتفاء بتمييز السطر الأول عبر ::first-line.

الصف 2 معاينة حية

مختبر العناصر الزائفة التفاعلي