مراعاة حجم النص في نظام التشغيل

نظرة عامة

غالبًا ما يضبط المستخدمون الذين يعانون من عجز بصري ميزة تغيير حجم النص على مستوى نظام التشغيل (مثل ميزة Dynamic Type على iOS أو ميزة تغيير حجم الخط على Android/ChromeOS). تتجاهل متصفّحات الأجهزة الجوّالة تلقائيًا إعدادات تسهيل الاستخدام هذه على مستوى نظام التشغيل لمنع حدوث مشاكل في عرض المواقع الإلكترونية القديمة ذات وحدات البكسل الثابتة.

بدلاً من إبقاء صفحتك ثابتة أو الاعتماد على عمليات حسابية مخصّصة وهشة لتنسيق JavaScript، يمكنك تفعيل ميزة تغيير حجم النص في نظام التشغيل الأصلي باستخدام العلامة <meta name="text-scale">. عند تفعيل هذه الميزة، يغيّر المتصفّح حجم الخط الأساسي (1rem) ديناميكيًا ليتطابق مع الإعدادات المفضّلة للمستخدم في نظام التشغيل، ما يسمح بتغيير حجم جميع أحجام الخطوط والتنسيقات والمسافات النسبية (rem/em) تلقائيًا وبشكل سلس.

التنفيذ

1. الموافقة على ميزة "تغيير حجم النص في نظام التشغيل"

ضَع العنصر <meta name="text-scale"> داخل <head> في المستند. يشير ذلك إلى المتصفحات المتوافقة بأنّ التنسيق حديث وقابل للتكيّف وآمن لتغيير الحجم:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. استخدام أسلوب الخط والمسافات النسبية

حدِّد أحجام الخطوط باستخدام وحدات نسبية (rem أو em) بدلاً من وحدات البكسل الثابتة (px). استخدِم قيمًا بدون وحدات لارتفاعات الأسطر لكي يتم تغيير حجمها بشكل متناسب مع حجم الخط المحسوب لكل عنصر.

استخدِم وحدات نسبية للهوامش والحشو عندما يكون التباعد مرتبطًا بحجم النص أو يجب أن يتكيّف مع حجم النص. يمكن أن تستخدم المسافات المستقلة عن النص وحدات ثابتة عند الاقتضاء، بشرط ألا يؤدي تغيير الحجم إلى اقتصاص النص أو تداخله أو فقدان المحتوى أو ظهور تنسيق غير قابل للاستخدام:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

اضبط حجم النص الأساسي على body فقط عندما يتطلب التصميم حجمًا مختلفًا عن الإعداد التلقائي للمتصفّح، وإلا اتركه كما هو. اضبط الأحجام على عناصر معيّنة، مثل العناوين، باستخدام وحدات نسبية مثل rem أو em. استخدِم rem للحصول على حجم نسبي لحجم الخط الجذر، وem عندما يعتمد الحجم على حجم خط العنصر الرئيسي. لا تضبط حجم خط مخصّصًا على :root أو html.

أسلوب الخط المرن

قد تستخدم أساليب الخطوط المرنة وحدات نسبية لإطار العرض، مثل vw، شرط أن تتضمّن أحجام الخطوط أيضًا مكوّنًا نسبيًا للخط، مثل rem أو em. لمزيد من تقنيات تغيير الحجم المرن، بما في ذلك وحدات طلبات البحث عن الحاويات وclamp()، يُرجى الاطّلاع على تغيير الحجم المرن.

تجنَّب تحديد حجم النص باستخدام وحدات إطار العرض فقط:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

بدلاً من ذلك، يمكنك دمج قيمة نسبية للخط مع تغيير الحجم بالنسبة إلى إطار العرض واستخدام حدود دنيا وقصوى نسبية:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

اختبِر إمكانية تغيير حجم النص إلى% 200 على الأقل من حجمه التلقائي بدون فقدان المحتوى أو الوظائف. بالنسبة إلى أسلوب الطباعة المرن، من المفيد ألا يتجاوز الحد الأقصى لحجم الخط 2.5 ضعف الحد الأدنى. يجب أيضًا اختبار إعادة التدفق عند عرض إطار بعرض 320 بكسل في CSS (أي ما يعادل تكبيرًا بنسبة% 400 من إطار عرض بعرض 1280 بكسل في CSS). يجب أن يظل المحتوى متاحًا بدون التمرير ثنائي الأبعاد، إلا في الحالات الضرورية.

3- استخدام نقاط توقّف متجاوبة قابلة للتوسيع

يجب ألا تفترض نقاط التوقف المتجاوبة أن النص سيظل بحجمه التلقائي. عندما تهدف نقطة التوقف إلى الاستجابة للمساحة المتاحة للنص، يُفضَّل استخدام التنسيقات المستندة إلى المحتوى أو طلبات البحث عن الحاويات أو الاستعلامات عن الوسائط المستندة إلى em بدلاً من الحدود القصوى الثابتة لوحدات البكسل.

اختبِر التنسيقات المتجاوبة مع تفعيل ميزة "تكبير النص" في نظام التشغيل وميزة "التكبير/التصغير" في المتصفّح. يجب أن يظل النص قابلاً للقراءة وأن يظل المحتوى مرئيًا بدون تداخل أو اقتصاص أو تمرير أفقي.

4. التأكّد من التفاف المحتوى واستخدام ارتفاعات مرنة

عند تكبير النص، تتطلّب العناصر مساحة أكبر عموديًا وأفقيًا لمنع اقتطاع النص أو تداخله. للحفاظ على قوة مكوّناتك، صمِّم التنسيقات لتتوسّع ديناميكيًا حول المحتوى بدلاً من فرض إحداثيات جامدة:

• السماح بتوسيع حاويات النصوص: يجب أن تكون المكوّنات والحاويات التي تحتوي على نصوص قادرة على التوسّع لاستيعاب النص الذي تم تكبير حجمه. تجنَّب استخدام قيم ثابتة لـ height أو block-size وقيم تقييدية لـ max-height أو max-block-size يمكن أن تؤدي إلى اقتصاص المحتوى أو تجاوزه الحد المسموح به. يُفضَّل استخدام الحجم المستند إلى المحتوى، واستخدام min-height أو min-block-size فقط عند الحاجة إلى حد أدنى للحجم.
• السماح بالتفاف النص بشكل طبيعي: لا تفرض قيودًا على التفاف النص في المحور المضمّن باستخدام white-space: nowrap في المجموعات التي تحتوي على جُمل. اسمح للنص بالانتقال إلى أسطر جديدة بشكل طبيعي.
• استخدام التفاف مرن لنموذج Flexbox والشبكة (مثال اختياري): بالنسبة إلى معارض البطاقات المتعددة الأعمدة، استخدِم أعمدة قابلة لإعادة التدفق مثل repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) بحيث يتم تجميع العناصر عموديًا إذا تم تجاوز حدود العرض النسبي:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5- عدم إلغاء حجم الخط الأساسي

عند الموافقة من خلال العنصر <meta name="text-scale" content="scale">، لا تضبط الجذر font-size بشكل صريح في ورقة الأنماط. ويشمل ذلك البيانات في السمة :root أو html، وينطبق على الوحدات المطلقة والوحدات النسبية والقيم المحسوبة.

على سبيل المثال، لا تلغِ حجم الخط الأساسي بقيمة ثابتة:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

لا تدمج خيار الموافقة على <meta name="text-scale" content="scale"> مع env(preferred-text-scale) لتطبيق ميزة "تكبير النص" في نظام التشغيل يدويًا. يطبّق المتصفّح المقياس من خلال علامة meta التي تتيح الموافقة، لذا قد يؤدي استخدام كليهما إلى تطبيق المقياس مرّتين:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

اترك حجم خط الجذر للمتصفح. يتعامل المتصفّح مع مقياس النص في نظام التشغيل تلقائيًا ويطبّقه على المحتوى الذي تم تحديد حجمه بالنسبة إلى حجم الخط الأساسي.

الاستراتيجيات الاحتياطية

في المتصفّحات التي لا تتوافق مع <meta name="text-scale" content="scale">، يتم عرض التنسيق بشكل سلس. ستعرض الصفحة التنسيق بحجم الخط الأساسي التلقائي في المتصفّح (عادةً 16 بكسل)، وسيظل بإمكان المستخدم استخدام خيارات التكبير أو التصغير اليدوية العادية للصفحة أو خيارات التكبير أو التصغير بإصبعين.