HTML وCSS / واجهات متكيفة / الدرس 10
الخطوط والألوان واتجاه الكتابة
ابن نظام نص مقروء يتكيف مع التفضيلات واللغة والنص ثنائي الاتجاه وحالات التفاعل.
في هذه الصفحة
أهداف الدرس
- الخط منظومة علاقات
- كتلة نثر مقروءة
- اللون يدعم المعلومات
الخط منظومة علاقات
تجمع القراءة اختيار الخط والحجم وارتفاع السطر وطوله والتباعد والتدرج. لا يعوض خط جميل أسطرا مزدحمة أو تباينا ضعيفا. ابدأ بخطوط نظام وحجم مناسب واختبر اللغات الفعلية. تختلف الأشكال بين النصوص وقد يزاحم ارتفاع مناسب للاتينية تشكيل العربية. لا تعامل النص صورة داخل مستطيل دقيق؛ يستطيع المستخدم التكبير واستبدال الخط والتباعد ويجب أن يبقى المحتوى متاحا.
أحجام نسبية بحدود
تتبع rem الجذر وتتأثر em بالسياق. يتناسب line-height بلا وحدة مع حجم الخط ويتوارث عادة أفضل من قيمة بكسلية. تقرب ch عرض الصفر في الخط وليست عدادا دقيقا لمحارف كل لغة. تحد clamp قيما مرنة، لكن تجنب وحدات الشاشة وحدها للنص لأنها قد تضعف التحجيم المتوقع. اختبر التكبير وتفضيلات الخط ولا تفترض أن الوحدة النسبية تحل الإتاحة تلقائيا.
كتلة نثر مقروءة
يضبط المثال خطوط النظام وحجما نسبيا وارتفاعا بلا وحدة وعرض قراءة محدودا. يبقى العنوان h1 دلاليا رغم تنسيقه. تتقلص الكتلة عند الضيق ويحفظ الحشو الحواف. لا تضمن قيمة الارتفاع تطابق الخطوط؛ اختبر البدائل والتشكيل. تجنب ارتفاعا ثابتا للفقرات بلا سياسة تجاوز لأن الترجمة والتكبير يحتاجان أسطرا إضافية، واترك المحتوى يحدد الارتفاع.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prose typography</title>
<style>
body { font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.6; } .prose { max-inline-size: 65ch; margin-inline: auto; padding: 1rem; } h1 { font-size: 2rem; line-height: 1.2; }
</style>
</head>
<body>
<main class="prose"><h1>Readable content</h1><p>Text should remain available when users choose a larger font or a narrower reading window.</p><p>A content-sized block can grow naturally.</p></main>
</body>
</html>
A readable prose column that can grow with text.يستخدم النص عرضا وارتفاعا مرنين ويتبع ارتفاع السطر حجم الخط. النتيجة المتوقعة: عمود قراءة ينمو مع النص.
الاتجاه بيانات للمحتوى
تحدد lang اللغة وdir اتجاه النص الأساسي. تتبع الخصائص المنطقية مثل margin-inline-start الاتجاه، بينما يشير margin-left إلى جانب مادي. تعزل bdi مقطعا مجهول الاتجاه، وقد تفيد dir="auto" للنص الخارجي بعد فهم سلوكها. يعزل المثال مرجعا لاتينيا داخل العربية. لا تعكس السلسلة أو صفوف flex كلها لإصلاح العربية؛ فالاتجاه وترتيب التخطيط وتسلسل المحتوى أمور مختلفة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bidirectional content</title>
<style>
.note { border-inline-start: .3rem solid #174e9a; padding-inline-start: 1rem; }
</style>
</head>
<body>
<main lang="ar" dir="rtl"><h1>مرجع الطلب</h1><p>رقم الطلب: <bdi>AB-123</bdi></p><p class="note">تتبع الحافة المنطقية اتجاه المحتوى.</p></main>
</body>
</html>
Arabic flows right to left with an isolated Latin reference.تصف اللغة والاتجاه العربية ويحفظ المرجع المعزول ترتيبه وتتبع الحدود والحشو البداية المنطقية. النتيجة المتوقعة: تتدفق العربية يمينا لليسار مع مرجع لاتيني معزول.
اللون يدعم المعلومات
اختر تباينا كافيا بحسب حجم النص ودوره ومتطلبات الإتاحة. لا تنقل الخطأ أو الاختيار أو فئات الرسم باللون وحده؛ أضف كلمات أو علامة مفيدة. ميز الروابط والتركيز. اختبر الألوان القسرية والتباين العالي لأن الخلفيات والظلال قد تتغير. لا يثبت اسم رمز «خطر» وضوح ألوانه في كل سياق. راجع الأزواج الفعلية والحالات المعطلة والمزارة والمركزة والخاطئة.
الأخطاء الشائعة وإصلاحها
يختفي النص المكبر عند الحافة
- لماذا يحدث؟
- يفترض ارتفاع ثابت قياسات الخط الأصلية.
- كيف تصلحه؟
- اسمح بالنمو أو تجاوز ميسر مقصود.
- كيف تتجنب تكراره؟
- اختبر الخط البديل والتكبير.
تحتاج العربية تجاوزات جوانب كثيرة
- لماذا يحدث؟
- ترمز الخصائص المادية اتجاها واحدا.
- كيف تصلحه؟
- استخدم الخصائص المنطقية وبيانات الاتجاه.
- كيف تتجنب تكراره؟
- راجع الاتجاهين.
لا يعرف الخطأ إلا باللون الأحمر
- لماذا يحدث؟
- يحمل اللون المعنى وحده.
- كيف تصلحه؟
- أضف رسالة وعلاقة برمجية.
- كيف تتجنب تكراره؟
- راجع الحالات دون الاعتماد على اللون.
اختبر فهمك
1. لماذا لا تضمن 65ch خمسة وستين محرفا عربيا بالسطر؟
اعرض الحل المشروح
تعتمد ch قياس الصفر وتتغير العروض باللغة والخط والتشكيل والمحتوى. استخدمها تقريبا وافحص نثرا عربيا وعدل بحسب القراءة لا عدد حرفي.
2. يعرض الخيار المحدد بخلفية خضراء فقط. أضف معلومة مكافئة.
اعرض الحل المشروح
استخدم حالة الاختيار الأصلية المناسبة وعلامة مرئية نصية أو شكلية عند الحاجة، واحفظ التباين والدلالة الحقيقية. تعزز CSS الحالة ولا تنشئ عقد تفاعل مفقودا.
أهم ما تعلمته
- يجب أن يصمد الخط أمام تغير القياسات.
- اللغة والاتجاه بيانات منفصلة.
- يعزز اللون المعنى ولا يحمله وحده.