فن الطباعة

ميزات الويب: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min()‎ وmax()‎ وclamp()‎ وحدات إطار العرض

أفضل الممارسات عمومًا

  • استخدِم أرقامًا بدون وحدات لسمة line-height (مثل 1.5) لضمان ضبط الحجم النسبي أثناء اكتساب حجم الخط.
  • استخدِم overflow-wrap: break-word (أو anywhere) لتضمين عناوين URL الطويلة.
  • لا تستخدِم px لحجم الخط. يُفضَّل استخدام rem لمراعاة الإعدادات المفضّلة للمستخدم في ما يتعلّق بحجم الخط في المتصفّح (حجم الخط الأساسي)، أو em/النسب المئوية لتحديد الحجم حسب السياق.

الوضوح وسهولة القراءة

  • تجنَّب الأسطر الطويلة من النص: يجب ألا يتجاوز عرض الفقرات 80 حرفًا كحد أقصى.
  • تجنُّب الفراغات المتتالية: تجنَّب استخدام text-align: justify لأنّها قد تجعل قراءة النص أكثر صعوبة. إذا كان عليك استخدامها، ادمجها مع hyphens: auto لتجنُّب المسافات البيضاء الزائدة بين الكلمات.
  • لا تستخدِم الخطوط المزخرفة: تجنَّب استخدام الخطوط المائلة في المحتوى الرئيسي.
  • لا تعتمد على الكتابة بأحرف كبيرة للتأكيد: يُفضَّل استخدام الخط الغامق للتأكيد المرئي، واستخدام <em>/<strong> عندما يكون التأكيد دلاليًا.
  • الحدّ من استخدام التوكيد بشكل عام: يفقد التوكيد معناه عندما يتم استخدامه في كل مكان، لذا يجب تطبيقه فقط في المواضع التي يغيّر فيها طريقة قراءة المحتوى.
  • إتاحة إعدادات التكبير المفضّلة للمستخدمين: اسمح للمستخدمين بتغيير حجم النص بنسبة تصل إلى% 200 بدون فقدان المحتوى أو الوظائف.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

التفاف النص

  • استخدِم text-wrap: balance للعناوين المتوازنة والمحتوى الذي يشبه العناوين (مثل <th>)
  • استخدِم text-wrap: pretty للنصوص الأساسية الطويلة (الفقرات والاقتباسات وما إلى ذلك)
  • استخدِم text-wrap: balance أو text-wrap: pretty بشكل مدروس، ولا تطبّقه على * لأنّه يؤثر في الأداء.
  • تجنَّب استخدام السمة text-wrap: balance على العناصر التي تحتوي على مربّع مرئي (الخلفيات والحدود والظلال وما إلى ذلك) لأنّها لا تغيّر عرض الحاوية، بل تؤثر فقط في كيفية التفاف النص ضمن هذا العرض. يمكن أن يترك هذا مساحة فارغة في نهاية الحاوية، وهو أمر غير مرغوب فيه عادةً.

أسلوب الخط المتجاوب

  • يُفضَّل الجمع بين الوحدات المرتبطة بإطار العرض والوحدات المرتبطة بالخط في clamp() لأحجام الخطوط التي تتغيّر مع حجم إطار العرض مع ضمان بقائها ضمن النطاق المطلوب. على سبيل المثال، clamp(2rem, 1rem + 5vw, 4rem). اضبط نسبة الوحدات المرتبطة بإطار العرض والوحدات المرتبطة بالخط للتحكّم في سرعة تغيير حجم الخط.
  • لا تستخدِم vw وحدها لحجم الخط بدون clamp()، لأنّها قد تؤدي إلى تكبير النص أو تصغيره بشكل مفرط على الشاشات الكبيرة أو الصغيرة جدًا.