فونت های دسترسی پذیر: لطفا از PX برای صفحه‌ی نمایش دست بکشید!

در حرفه‌ی من به عنوان «مشاور دسترسی پذیری»، یکی از مسائل قدیمی که همواره برای وبسایت‌ها مشکل آفرین بوده است، آرتیست‌های بی‌شماری‌اند که با توهمِ «طراح وب» بودن، به ترویج layoutهای بر پایه‌ی پیکسل ادامه می‌دهند.

از دیدگاه دسترسی پذیری، پیکسل‌ها کم کاربردترین واحد اندازه‌گیری هستند. زیرا نمایشگرهای زیادی با اندازه‌های متفاوت هستند که از یک resolution بهره می‌برند، یا نمایشگرهایی با یک اندازه که resolutionهای متفاوتی دارند، در نتیجه هیچ «استاندارد فیزیکی»ای بر پایه‌ی پیکسل وجود ندارد. به این ترتیب، برای منطبق کردن layout با نیاز کاربران، مجبور هستید از بزرگنمایی استفاده کنید (که تصاویر raster را خراب می کند)، در غیر این صورت نمی توانید layoutها را بر اساس نیاز کاربران تعیین کنید.

تصور می‌کنم که بررسی واحدهای مختلف در web design، دلیل بد بودن پیکسل و واحد جایگزین آن را مشخص می‌کند.

پنج واحد رایج

شمار زیادی واحد css وجود دارند که می‌توانید با استفاده از آن‌ها یک فونت را تعریف کنید، اما بحث را با پنج مورد از رایج ترین‌ها آغاز می‌کنیم.

PX(pixel) - واحد نمایشگر فیزیکی 

یک پیکسل کوچک‌ترین نقطه‌ی قابل آدرس‌دهی در نمایشگر شما است (مگر اینکه triadهای رنگ را نیز حساب کنید). یا حداقل باید که اینطور باشد! برخی از منابع می‌گویند که یک پیکسل 1/96ام از اینچ است که گفته‌ای بی‌اساس است.

PT(points) - یک هفتادو دوم از اینچ، ساختار پرینت

به عنوان واحدی بر پایه‌ی اندازه‌گیریِ دنیای واقعی، این واحد برای طراحی screen media کمابیش بی‌فایده است. چرا؟ از این رو که بیشتر سیستم عامل‌ها، اندازه‌ی واقعی نمایشگرِ فیزیکی را نمی‌دانند. تلاش برای شناساندن 1/72ام از اینچ به سیستم عامل میزبانی که هیچ گونه آگاهی‌ای از اندازه‌ی واقعی نمایشگرِ فیزیکی ندارد بیهوده است.

PT به دلیل اینکه در گذشته، تنها واحد اندازه‌گیری‌ای بود که Netscape 4.x (و همچنین نسخه ی بسیار قدیمی Firefox/Mozilla Suite) از آن، بر پایه ی font-size سیستم عاملِ میزبان، پیروی می‌کرد محبوبیت فراوانی داشت. اما آن روزها پایان یافته‌اند.

در حقیقت، point برای پرینت است. همین را می‌توان برای دیگر واحدهای اندازه‌گیری فیزیکیِ دنیای واقعی بیان کرد، مانند میلی‌متر، سانتی‌متر، اینچ، یا هر «واحد اندازه‌گیری دنیای واقعی». زمانی که هدف شما نمایشگر است، آن ها را به کار نبرید.

EM – اندازه‎ی نسبی

از نظر تئوری، «EM» قرار است نماینده‌ی عرضِ حرفِ M باشد، یا برخی ادعا می‌کنند که چیزی شبیه این باید باشد. اما در واقعیت نمی‌دانیم که چرا آن را EM می‌خوانند، حدس و گمان‌های مختلفی در این باره وجود دارد و حتی گفته‌های ویکی‌پدیا نیز مبهم است. اما در عمل برابر است با اندازه‌ی کنونی فونت در یک المان.

اگر شما بنویسید ;font-size:16px در نتیجه 1EM برابر با 16px می‌شود. 

و اگر بنویسید ;font-size:24px در نتیجه 1EM برابر با 24px می‌شود.

بنا بر این اگر شما بنویسید ;font-size:1.5em در حقیقت شما اندازه‌ی فونت المانِ کنونی را 50% نسبت به parent یا والد آن بیشتر کرده‌اید. و جادو اینجاست!

از آن جایی که EM همواره بر پایه‌ی اندازه‌ی parent است (مگر اینکه در المانِ کنونی اندازه‌ی آن را تعیین کنید، مانند مثال بالا)، اگر شما تنها EM را به کار ببرید، فونت شما با تنظیمات مرورگر یا سیستم عامل مقیاس می پذیرد (scale می شود)، که این عمل بدون نیاز به بزرگنمایی یا هر «مقیاس‌دهی دسترسی‌پذیری» دیگری که صورت گرفته، می‌باشد. در واقع اندازه‌ها به صورت درختی از المان root تا پایینی‌ترین المان ها با حفظ نسبت‌ها منتقل می‌شوند. این ویژگی به کاربر کنترل بیشتری می‌دهد و EM را به دسترسی پذیرترین واحد در میان واحدهای اندازه‌ی فونت تبدیل می‌کند.

% - درصد – EM ضرب در 100

;font-size:100% در واقع همان ;font-size:1em  است. واقعا همین است!

به تازگی می‌گویم که درصد را برای font-size به کار نبرید، تنها به این دلیل که در بین ویژگی‌های CSS به گونه‌های متفاوتی رفتار می‌کند. برای اندازه‌ی فونت %100 برابر با  1em است، اما برای width، درصدی از موقعیتی است که المانِ parent آن دارد. برای margin و padding، درصدی از width خود المان در هر دو جهت محور مختصات است، و دیگر مواردی از همین دست. در نتیجه هیچ ثباتی نیست که %100 دقیقا چه معنایی دارد.

از این رو که درصد، در بین ویژگی‌ها بسیار بی‌ثبات رفتار می‌کند، من ترجیح می‌دهم برای متمایز کردن آن در حالات مختلف، EM را به کار ببرم. بسیاری از توسعه دهندگان به قصد به کار بردن vw و vh، از درصد دست می کشند – دو معیار اندازه‌گیریِ دیگری که می‌توانیم به کار ببریم.

گاهی اوقات به این گفته‌ی بی‌اساس برمی‌خورید که «0.625em» یا «62.5%» به شما 10px را می‌دهد. این گفته سراسر بی‌اساس است، زیرا اندازه‌ی پیش‌فرض فونت در المان root می‌تواند هر چیزی باشد، نه تنها اندازه‌ی پیش‌فرضِ 16px. در بیشتر سیستم های من  1REM (root em، اندازه‌ی پیش‌فرض مرورگر) 20px است. در media center من با نمایشگر 4k، اندازه‌ی پیش‌فرض را تا 32px بالا برده‌ام.

این همه‌ی هدف به کار بردن % یا EM است! هیچ پیوند ثابتی با پیکسل، یا اینچ، یا میلی‌متر، یا هیچ چیز دیگری ندارد. به کاربر اجازه می‌دهد که انتخاب کند تا چه اندازه نوشته‌ها بزرگ باشند، بدون اینکه نیاز به بزرگنمایی داشته باشد. 

و این دلیلی است که EM را دسترسی پذیرترین واحد فونت می‌کند. پس آن را به کار ببرید!

بخش زیبای دیگر آن، این است که اگر اندازه‌ی سراسر صفحه را تغییر دهید – به دلیل تغییر دادن font-family یا هنگام طراحی برای یک مشتری که زیاد نظرش را تغییر می‌دهد – تغییر اندازه‌ی المانِ parent، به همه‌ی layout منتقل می‌شود (ساختار درختی که پیش‌تر از آن گفتیم).

دقت نمایید که بین تغییر اندازه‌ی فونت و بزرگنمایی تفاوت وجود دارد؛ بزرگنمایی که اکنون در مرورگرهای مدرن پیاده سازی شده است، چیزی نیست جز «کشیده شدن» پیکسل‌ها. به بیانی دیگر، بزرگنمایی 200% یا دو برابر، باعث می شود تا 1px چهار برابر اندازه‌ی یک پیکسل در آن دستگاه کشیده شود (دو برابر از width و دو برابر از height، که روی هم می‌شود چهار برابر)، اما اندازه‌ی حقیقی المان، در حقیقت همانی که پیش‌تر بود باقی می‌ماند.

REM – Root EM

REM بر پایه‌ی مقداری که EM در المان «root» به خود می‌گیرد، تعریف خواهد شد؛ منظور از المان root شبهِ المانی است که در بالای HTML و به هنگام استفاده از CSS به کار می گیرید. این مسئله به هر قصد و نیتی که باشد، تصوری است که مرورگر در ابتدای کار از EM دارد.

REM به نظر کاربردی می‌آید، چرا که می‌تواند به شما یک پایه و معیار بدهد، اما در عمل تنها باعث می‌شود که نیاز به ویرایش‌های بیشتر پیدا کنید. معمولا اگر font-size را تغییر دهید، می‌خواهید هر چیزی که داخل آن است نیز به همان نسبت تغییر کند. REM این کار را نمی‌کند. در حالی که در موارد نادری می‌تواند کاربردی باشد، اما روی هم رفته بهتر است در بیشتر موارد EM را به کار ببرید و اجازه دهید تا EM کارش را انجام دهد.

اینکه فایرفاکس EM را نیز همانند سایر نسخه های منتشر شده‌ی دیگر بر روی سیستم عامل‌های خاص، به هم می‌ریزد، امری مشکل آفرین است. البته تا کنون بدترین عملکرد را در مرورگر آیس ویزل داشته است. بنا بر دلایلی نامعلوم REM گاهی اوقات، فارغ از اینکه مرورگر بر چه مقداری تنظیم شده باشد، 16px را نشان می دهد و این مسئله به این معنی است که 1REM و 1EM در BODY حتی با یکدیگر نیز همسو نمی شوند!

اگر قرار است EM را به کار ببرید، همه جا به کار ببرید!

و این یعنی همه چی، حتی هر چیزی که به محتوا مربوط است. Margin ،Padding ،Max-Widthها، Media Queryها! EM را به کار ببرید! به این ترتیب، همه چیز، متناسب با font-size انتخابی شما برای screen media تطبیق پیدا می‌کند.

همچنین به این معنا است که آن را با دیگر واحدها ترکیب نکنید. اگر یک font-size بر پایه ی PX در <body> تعریف کنید، به کار بردن EM در هر جای دیگری از stylesheet خود را، به امری بیهوده تبدیل کرده‌اید!

به مثال رایج Bootstrap 5 Alpha نگاه کنید، که اکنون بیشتر آن ها با فونت‌هایی بر پایه‌ی % یا EM هستند، اما همچنان gridهای پیکسلیِ بر پایه‌ی media query را دارند. از این رو، همه‌ی مثال‌ها برای کسانی از ما که font-size پیش فرض را از 16px به 20px یا بیشتر تغییر داده‌اند، بهم ریخته و بیهوده است. media queryها بر اساس فضای مورد نیاز محتوا همسو نمی‌شوند، زیرا اندازه‌ی فونت افزایش یافته، اما PX نه.

اثبات دیگری از اینکه سازندگان Bootstrap، شایستگی نوشتن یک خط HTML یا CSS را ندارند.

چرا کاربران اندازه‌ی پیش فرض فونت را تغییر می دهند؟

در بسیاری از موارد، این تغییر از سیستم عامل ناشی می‌شود که scaling engine جدید به بسیاری از کاربران هشدار می‌دهد که بزنند به چاک! چرا که آن ها در حال بزرگنمایی هستند و نه تغییر اندازه‌ی فونت. در دیگر موارد چنین هشداری زمانی رخ می‌دهد که کاربر می‌خواهد اندازه فونت را از scaling سیستم عامل جدا کند، زیرا اندازه ی فونت در سیستم عامل خوب و مناسب است، اما برای مشاهده‌ی وبسایت‌ها، نیاز به کمک دارند. بعضی‌ها نیز از بهم‌ریختگی تصاویرِ raster که با تغییر مقیاس یا بزرگنمایی ایجاد می‌شود، خوششان نمی‌آید. البته امروزه به دلیل اینکه مرورگرها بهتر شده‌اند، این مورد کمتر مشکل ساز است و همچنین، تصاویرِ دارای دو resolution محبوبیت بیشتری پیدا کرده‌اند.

دسترسی پذیری وب قرار است درباره‌ی دادن حق انتخاب به کاربر باشد. به همین دلیل است که نباید ویژگیِ target را به هر المان anchor بدهید و حق انتخابِ مشاهده‌ی آن در یک window جدید یا همان window را از کاربر بگیرید. به همین دلیل است که widthهای ثابت، بدون هیچ پشتیبانی‌ای برای نمایشگرهای کوچک را نباید تعریف کنید. و به همین دلیل است که نباید PX را در هر موردی در ساختار خود به کار ببرید.

پس اصلا PX را به کار نبریم؟

نه، نه کاملا! اما بسیار به ندرت آن را به کار ببرید. اگر یک تصویر raster دارید که به اندازه‌ای کوچک است که اهمیت چندانی ندارد (مانند آیکون) پس PX، تنها برای آن ممکن است مناسب باشد. یک border با 1px تا 3px اگر از درست به کار بردن آن آگاه باشید، مشکلی ایجاد نخواهد کرد.

اما هرگز PX را برای width، height، font-size، line-height، margin، padding، max/min-width/height، یا هر چیز دیگری که ممکن است محتوایی متنی در آن قرار دهید، به کار نبرید. این کار، حداقل برای «screen media»، مختص EM است.

Screen Media چیست؟

به این معنا است که CSS شما برای نمایشگرها (screens) طراحی شده است، که در این صورت باید صفتِ ”media=”screen را در تگِ <style> یا <link> خود، همراه کنید. دقت کنید که <style> را باید برای هر چیزی به غیر از «CSS in JS» به کار ببرید.

اگر یک <link> که یک stylesheet را لود می کند، یا یک <style> را در markup بدون یک ویژگی media دیدید، یا دیدید که ”media=”all است، شما به قطع و یقین در حال نگاه کردن به یک کم دقتی یا نقص در کار هستید. که یا کورکورانه و بدون یادگیری شیوه ی کار آن کپی شده است، یا کورکورانه و بدون یادگیری شیوه ی کار آن، کپی شده است!

آگاه هستم که هر دو مورد فوق در واقع یک مورد است، اما این نکته آن‌چنان مهم است که احساس کردم دو بار تکرار کردن آن، تضمین کننده رعایت آن توسط کاربران خواهد شد!

CSSای که برای چیدمان screen به کار برده شده، بعید است که برای print مناسب باشد، اهمیتی هم ندارد که فایرفاکس و اینترنت اکسپلورر در واقع علاقه به نادیده گرفتن چگونگی کارِ HTML و CSS دارند.

از نخستین روز عرضه‌ی style> ،CSS> و <link> دارای ویژگی media بودند و تا به امروز عده‎ ی زیادی از ناآگاهان که markup نمایشی سبکِ 1990، classهای نمایشی (همانند مواردی که در frameworkهای افتضاح مورد استفاده قرار گرفته‌اند) و نقطه‌ی عطف روش شناسی‌های سال 1997 را که وانمود می کردند HTML 5 هستند استفاده کرده‌اند، هنوز به نظر می‌رسد که ویژگی ضروری و مهم media را حذف کرده یا به درستی از آن استفاده نکرده‌اند. 

این همچنین ضربه‌ای دیگر بر ویژگی style است، زیرا style هیچ درکی ندارد که برای چه نوع mediaای به کار می رود. اگر برای دو سه مورد نادر مانند ابرِ تگ‌ها و چارت‌های تولید شده از DIV نبود، براستی فکر می‌کنم که ””=style می‌بایست از HTMLبرداشته می‌شد.

شاید بخواهید که "projection,tv" را نیز به media بیفزایید، چرا که نمایشگرهای دکه‌های عمومی، کنسول‌ها، گیرنده‌های دیجیتال (یا در واقع set-top box) قواعد خود را به screen stylesheet شما ترجیح می‌دهند. با اینکه بیشتر این دستگاه‌ها قدیمی هستند، افزودن آن‌ها ضرری نخواهد داشت. حتی اگر ارزیابیِ (validation) HTML 5 آن‌ها را نامعتبر و منسوخ شده بداند.

موردی دیگر از W3C که فراموش کرده‌اند چرا بعضی از موارد در وهله نخست وجود دارند. در این مورد، media target معتبر باید خارج از حوزه‌یHTML specification باشد، زیرا باعث جلوگیری از نوآوری در دستگاه‌ها می‌شود. User agentsها باید تعیین کنند که چه چیزی هستند، در نتیجه می‌توانند راه‌های تازه و متفاوتی برای دسترسی و به کار بردن وبسایت ایجاد کنند. آن‌ها عاشق این هستند که ابزار validation را به هشدارها و خطاهای بی‌معنی که ارتباطی با markupهای خوب ندارند تبدیل کنند. 

””=Media چه ربطی به font-size دارد؟

دقت کردید که ما چگونه درباره‌ی PT(points) به عنوان معیار سنجشی برای پرینت صحبت کردیم؟

پس توجه شما را به کاربرد زیر جلب می‌کنم:

<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<link rel="stylesheet" href="print.css" media="print">

در stylesheet نخست که برای screenها است، همه‌ی اندازه‌ها را با EM انجام دهید. برای بعدی، همه را با PT، PC(picas) و IN انجام دهید. یا میلی‌متر/سانتی‌متر برای کسانی که در کشورهایی هستند که این واحد اندازه گیری را به کار می برند.

پیاده سازی EM

نکته‌ی مهمی که در مورد EM باید بخاطر بسپارید این است که ویژگی font-size، بر پایه‌ی font-size از المان parent است، و برای هر چیز دیگری بر پایه‌ی font-sizeاز خود آن المان است.

فرض کنیم که مرورگر شما روی 1em == 16px که پیش فرض است قرار دارد و markup زیر را داریم:

<header id="top">
	<h1>Test Title<br><small>tagline</small></h1>
	<nav id="mainMenu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blogs</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Forums</a></li>
		</ul>
	<!-- #mainMenu --></nav>
<!-- #top --></header>

اگر EM را در CSS قرار دهیم داریم:

h1 {
 font-size:2em; /* 32px */
 padding:0.25em 0.5em; /* 8px 16px */
}
h1 small {
 font-size:0.625em; /* 20px aka 1.25REM */
 }
#mainMenu {
 font-size:1.25em; /* 20px */
 padding:0.4em 0.8em; /* 8px 16px */
}

ممکن است به نظر پیچیده برسد، اما اینگونه نیست. تنها ریاضیِ ابتدایی است که هر کسی که برنامه‌نویسی می‌کند باید بتواند انجام دهد، اگر نمی‌توانند یا باید یک ماشینِ حساب بگیرند، یا باید دست از برنامه نویسی بکشند، زیرا مناسبشان نیست!

25% از 32 می شود 8.

62.5% از 32 می شود 20.

40% از 20 می شود 8.

متوجه شدید؟

اگر همواره به شماری از اندازه‌های رایج پایبند باشید و font-size را تنها برای پشتیبانیِ جهت یابی(navigational aids) تغییر دهید، این شیوه سخت و آزار دهنده نخواهد بود. اندازه‌ای که من توصیه می‌کنم طراحان به آن پایبند باشند 1.25، 1.5 و 2 است. اگر اندازه‌ای بیشتر از این سه مورد نیاز دارید، استفاده از سایت خود و دنبال کردن آن را دشوارتر می‌کنید. مدیریتِ خُردِ(Micro-managing) صدها اندازه‌ی مختلف، سایت شما را مفیدتر یا کاربردی‌تر نمی‌کند.

همچنین بخاطر بسپارید که این اندازه‌ها بر پایه‌ی اندازه‌ی پیش‌فرض مرورگر یا تنظیمات کاربر است، و به این ترتیب همواره با 16px آغاز نمی‌شود. برای شمار زیادی از کاربران، این مقدار با 20px آغاز می‌شود، در نتیجه:

/* assuming 20px default */
h1 {
 font-size:2em; /* 40px */
 padding:0.25em 0.5em; /* 10px 20px */
}
h1 small {
 font-size:0.625em; /* 25px aka 1.25REM */
}
#mainMenu {
 font-size:1.25em; /* 25px */
 padding:0.4em 0.8em; /* 10px 20px */
}  

که باری دیگر، همه‌ی دلیل وجود EM و دلیل به کاربردن آن همین است! همچنین پاسخ به این پرسش که «چرا کسانی که می‌گویند 62.5% == 10px است، بی اساس سخن می گویند».

نتیجه گیری

EM دسترسی پذیرترین واحد برای فونت است، و هیچ بهانه‌ی قابل قبولی برای به کار نبردن آن برای کل layout نداریم. افرادی که هنوز layoutها را با واحدهای PX در کنار هم تلنبار می‌کنند، تنها نتیجه‌ی کارشان این است که به طور غیرمستقیم به گروه انبوهی از کاربران می‌گویند که بروند رد کارشان! یادتان باشد که هیچ بهانه و تفسیر من درآوردی‌ای هم نمی‌تواند این حقیقت را تغییر دهد.

اگر شما جزو آن دسته از افرادی هستید که هنوز PX را برای layout به کار می‌برید، توصیه من به شما این است:«از 1990 بکشید بیرون!» 

منبع