رعایت کردن مقیاس نوشتار سیستم‌عامل

نمای کلی

کاربران دارای اختلالات بینایی اغلب مقیاس‌بندی نوشتار را در سطح سیستم‌عامل پیکربندی می‌کنند (مانند Dynamic Type در iOS یا مقیاس‌بندی «اندازه قلم» در Android/ChromeOS). به‌طور پیش‌فرض، مرورگرهای تلفن همراه این تنظیمات دسترس‌پذیری سطح سیستم‌عامل را نادیده می‌گیرند تا از به‌هم ریختن ظاهر وب‌سایت‌های قدیمی با پیکسل ثابت جلوگیری کنند.

به‌جای ثابت نگه داشتن صفحه‌تان یا تکیه بر محاسبات چیدمان جاوا اسکریپت سفارشی و شکننده، بااستفاده از برچسب <meta name="text-scale">، مقیاس‌بندی نوشتار سیستم‌عامل بومی را انتخاب کنید. وقتی فعال باشد، مرورگر به‌طور پویا اندازه قلم ریشه (1rem) را مقیاس‌بندی می‌کند تا با اولویت سیستم‌عامل کاربر مطابقت داشته باشد، و به همه اندازه‌های قلم، چیدمان‌ها، و فاصله‌گذاری‌های نسبی (rem/em) اجازه می‌دهد به‌طور خودکار و به‌خوبی مقیاس‌بندی شوند.

پیاده‌سازی

۱. شرکت کردن در مقیاس‌بندی نوشتار سیستم‌عامل

عنصر <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>

۲. استفاده از فاصله‌گذاری و تایپوگرافی نسبی

اندازه قلم‌ها را بااستفاده از واحدهای نسبی (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);
}

آزمایش کنید که اندازه نوشتار را بتوان حداقل تا ۲۰۰٪ اندازه پیش‌فرض آن بدون ازدست رفتن محتوا یا عملکرد تغییر داد. برای تایپوگرافی سیال، یک قانون سرانگشتی مفید این است که حداکثر اندازه قلم را بیش از ۲٫۵ برابر حداقل نگه ندارید. همچنین، بازآرایی را در عرض نمای ۳۲۰ پیکسل CSS (معادل بزرگ‌نمایی ۴۰۰٪ از نمای ۱۲۸۰ پیکسل CSS) آزمایش کنید؛ محتوا باید بدون پیمایش دوبعدی دردسترس باقی بماند، مگر در موارد ضروری.

۳. استفاده از نقاط توقف واکنش‌گرای مقیاس‌پذیر

نقاط شکست واکنش‌گرا نباید فرض کنند که نوشتار در اندازه پیش‌فرض خود باقی خواهد ماند. وقتی هدف از نقطه شکست پاسخ دادن به فضای دردسترس برای نوشتار است، چیدمان‌های محتوا-محور، پُرسمان‌های محفظه، یا پُرسمان‌های رسانه مبتنی بر em را به آستانه‌های پیکسل ثابت ترجیح دهید.

طرح‌بندی‌های واکنش‌گرا را با فعال کردن مقیاس‌بندی نوشتار سیستم‌عامل و بزرگ‌نمایی مرورگر آزمایش کنید. نوشتار باید خوانا باقی بماند و محتوا باید بدون هم‌پوشانی، برش، یا پیمایش افقی قابل‌مشاهده باقی بماند.

۴. اطمینان از پیچیدن محتوا و ارتفاع‌های انعطاف‌پذیر

وقتی نوشتار بزرگ می‌شود، عناصر به فضای عمودی و افقی بیشتری نیاز دارند تا از بریده شدن یا هم‌پوشانی جلوگیری شود. برای اینکه مؤلفه‌هایتان قوی بمانند، چیدمان‌هایتان را طوری طراحی کنید که به‌جای اجبار به مختصات ثابت، به‌طور پویا در اطراف محتوا گسترش یابند:

• اجازه دادن به بزرگ شدن محفظه‌های نوشتار: محفظه‌ها و مؤلفه‌های حاوی نوشتار باید بتوانند برای جا دادن نوشتار مقیاس‌بندی‌شده بزرگ شوند. از مقادیر ثابت height یا block-size و مقادیر محدودکننده max-height یا max-block-size که می‌توانند باعث برش یا سرریز شوند خودداری کنید. اندازه مبتنی بر محتوا را ترجیح دهید؛ از min-height یا min-block-size فقط زمانی استفاده کنید که حداقل اندازه لازم باشد.
• مجاز کردن شکست طبیعی: شکست نوشتار محور درون‌خطی را با white-space: nowrap در بلوک‌هایی که حاوی جمله هستند محدود نکنید. اجازه دهید نوشتار به‌طور طبیعی به خطوط جدید منتقل شود.
• استفاده از Flexbox انعطاف‌پذیر و پیچیدن Grid (نمونه اختیاری): برای گالری‌های کارت چندستونی، از ستون‌های بازآرایی‌شده مانند 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;
}

۵. اندازه قلم ریشه را لغو نکنید

هنگام موافقت کردن ازطریق عنصر <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) ترکیب نکنید. مرورگر مقیاس را ازطریق موافقت متا اعمال می‌کند، بنابراین استفاده از هر دو می‌تواند منجر به مقیاس‌بندی دوگانه شود:

/* ❌ 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"> پشتیبانی نمی‌شود، چیدمان به‌خوبی تنزل می‌کند. صفحه، چیدمان را با اندازه قلم پایه پیش‌فرض استاندارد مرورگر (معمولاً ۱۶ پیکسل) نمایش می‌دهد و کاربر همچنان می‌تواند از گزینه‌های استاندارد بزرگ‌نمایی دستی صفحه یا بزرگ‌نمایی با نیشگون استفاده کند.