وب برای همه در جهان در دسترس است - این دقیقاً در نام آن نهفته است! این بدان معناست که وب‌سایت شما به طور بالقوه برای هر کسی که به اینترنت دسترسی دارد، صرف نظر از مکان، دستگاهی که استفاده می‌کند یا زبانی که صحبت می‌کند، در دسترس است.
هدف طراحی واکنش‌گرا این است که محتوای شما در دسترس همه قرار گیرد. اعمال همین فلسفه به زبان‌های انسانی، نیروی محرکه بین‌المللی‌سازی است - آماده‌سازی محتوا و طرح‌های شما برای مخاطبان بین‌المللی.
ویژگی‌های منطقی
زبان انگلیسی از چپ به راست و از بالا به پایین نوشته می‌شود، اما همه زبان‌ها به این شکل نوشته نمی‌شوند. برخی از زبان‌ها مانند عربی و عبری از راست به چپ خوانده می‌شوند و برخی از فونت‌های ژاپنی به جای افقی، عمودی خوانده می‌شوند. برای تطبیق با این حالت‌های نوشتاری، ویژگی‌های منطقی در CSS معرفی شدند.
اگر CSS می‌نویسید، ممکن است از کلمات کلیدی جهت‌دار مانند "چپ"، "راست"، "بالا" و "پایین" استفاده کرده باشید. این کلمات کلیدی به طرح فیزیکی دستگاه کاربر اشاره دارند.
از سوی دیگر، ویژگی‌های منطقی به لبه‌های یک کادر اشاره دارند، زیرا به جریان محتوا مربوط می‌شوند. اگر حالت نوشتاری تغییر کند، CSS نوشته شده با ویژگی‌های منطقی نیز بر اساس آن به‌روزرسانی می‌شود. اما این در مورد ویژگی‌های جهت‌دار صدق نمی‌کند.
در حالی که ویژگی جهت‌دار margin-left همیشه به حاشیه سمت چپ کادر محتوا اشاره دارد، ویژگی منطقی margin-inline-start به حاشیه سمت چپ کادر محتوا در زبان‌های چپ به راست و حاشیه سمت راست کادر محتوا در زبان‌های راست به چپ اشاره دارد.
برای اینکه طرح‌های شما با حالت‌های مختلف نوشتاری سازگار شوند، از ویژگی‌های جهت‌دار اجتناب کنید. در عوض از ویژگی‌های منطقی استفاده کنید.
.byline { text-align: right; }
.byline { text-align: end; }
وقتی CSS یک مقدار جهت‌دار خاص مانند left یا right دارد، یک ویژگی منطقی متناظر با آن وجود دارد. قبلاً margin-left داشتیم، اما اکنون margin-inline-start نیز داریم.
در زبانی مانند انگلیسی که متن از چپ به راست جریان دارد، inline-start معادل "چپ" و inline-end معادل "راست" است.
به همین ترتیب، در زبانی مانند انگلیسی که متن از بالا به پایین نوشته می‌شود، block-start معادل «بالا» و block-end معادل «پایین» است.
اگر از ویژگی‌های منطقی در CSS خود استفاده کنید، می‌توانید از همان شیوه‌نامه برای ترجمه صفحات خود استفاده کنید. حتی اگر صفحات شما به زبان‌هایی که از راست به چپ یا از پایین به بالا نوشته شده‌اند ترجمه شوند، طراحی شما بر اساس آن تنظیم خواهد شد. نیازی نیست برای هر زبان طرح‌های جداگانه‌ای بسازید. با استفاده از ویژگی‌های منطقی، طراحی شما به هر حالت نوشتاری پاسخ می‌دهد. این بدان معناست که طراحی شما می‌تواند به افراد بیشتری برسد بدون اینکه مجبور باشید برای هر زبان طرح‌های جداگانه‌ای بسازید.
تکنیک‌های مدرن طرح‌بندی CSS مانند grid و flexbox به طور پیش‌فرض از ویژگی‌های منطقی استفاده می‌کنند. اگر به جای left و top به inline-start و block-start فکر کنید، درک این تکنیک‌های مدرن برایتان آسان‌تر خواهد بود.
یک الگوی رایج مانند یک آیکون در کنار متن یا یک برچسب در کنار یک فیلد فرم را در نظر بگیرید. به جای اینکه فکر کنید «برچسب باید حاشیه‌ای در سمت راست داشته باشد»، به این فکر کنید که «برچسب باید حاشیه‌ای در انتهای محور درون‌خطی خود داشته باشد».
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
اگر آن صفحه به زبانی از راست به چپ ترجمه شود، نیازی به به‌روزرسانی استایل‌ها نخواهد بود. شما می‌توانید با استفاده از ویژگی dir در عنصر html خود، جلوه دیدن صفحات خود را به زبان راست به چپ تقلید کنید. مقدار ltr به معنای "چپ به راست" است. مقدار "rtl" به معنای "راست به چپ" است.
اگر می‌خواهید با تمام جایگشت‌های جهت سند (محور بلوک) و حالت‌های نوشتاری (محور درون‌خطی) آزمایش کنید، در اینجا یک نمایش تعاملی ارائه شده است.
شناسایی زبان صفحه
ایده خوبی است که زبان صفحه خود را با استفاده از ویژگی lang در عنصر html شناسایی کنید.
<html lang="en">
این مثال برای یک صفحه به زبان انگلیسی است. شما می‌توانید دقیق‌تر هم باشید. در اینجا نحوه اعلام اینکه یک صفحه از انگلیسی آمریکایی استفاده می‌کند، آورده شده است:
<html lang="en-us">
اعلام زبان سند شما برای موتورهای جستجو مفید است. همچنین برای فناوری‌های کمکی مانند صفحه‌خوان‌ها و دستیارهای صوتی نیز مفید است. با ارائه فراداده‌های زبان، به این نوع از موتورهای تبدیل گفتار کمک می‌کنید تا محتوای شما را به درستی تلفظ کنند.
ویژگی lang می‌تواند روی هر عنصر HTML، نه فقط html ، قرار گیرد. اگر زبان صفحه وب خود را تغییر می‌دهید، این تغییر را نشان دهید. در این مورد، یک کلمه به زبان آلمانی است:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
زبان یک سند لینک‌شده را شناسایی کنید
ویژگی دیگری به نام hreflang وجود دارد که می‌توانید در لینک‌ها از آن استفاده کنید. hreflang همان کد زبان ویژگی lang را می‌گیرد و زبان سند لینک‌شده را توصیف می‌کند. اگر ترجمه‌ای از کل صفحه شما به زبان آلمانی موجود است، به این صورت به آن لینک دهید:
<a href="/path/to/german/version" hreflang="de">German version</a>
اگر از متنی به زبان آلمانی برای توصیف لینک به نسخه آلمانی استفاده می‌کنید، از هر دو hreflang و lang استفاده کنید. در اینجا، متن "Deutsche Version" به عنوان متن آلمانی علامت‌گذاری شده است و لینک مقصد نیز به عنوان لینک آلمانی علامت‌گذاری شده است:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
همچنین می‌توانید از ویژگی hreflang در عنصر link استفاده کنید. این ویژگی در head سند شما قرار می‌گیرد:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
اما برخلاف ویژگی lang که می‌تواند روی هر عنصری اعمال شود، hreflang فقط می‌تواند روی عناصر a و link اعمال شود.
بین‌المللی بودن را در طراحی خود در نظر بگیرید
وقتی وب‌سایت‌هایی طراحی می‌کنید که قرار است به زبان‌ها و سبک‌های نوشتاری دیگر ترجمه شوند، به این عوامل فکر کنید:
- بعضی از زبان‌ها، مانند آلمانی، کلمات طولانی‌ای دارند که معمولاً استفاده می‌شوند. رابط کاربری شما باید با این کلمات سازگار شود، بنابراین از طراحی ستون‌های باریک خودداری کنید. همچنین می‌توانید از CSS برای معرفی خط فاصله استفاده کنید .
- مطمئن شوید که مقادیر
line-heightشما می‌توانند کاراکترهایی مانند لهجه‌ها و سایر علائم تفکیکی را در خود جای دهند. خطوط متنی که در انگلیسی خوب به نظر می‌رسند، ممکن است در زبان دیگری با هم همپوشانی داشته باشند. - اگر از یک فونت وب استفاده می‌کنید، مطمئن شوید که طیف وسیعی از کاراکترها را دارد که زبان‌هایی را که به آنها ترجمه خواهید کرد، پوشش دهد.
- تصاویری که متن دارند ایجاد نکنید. اگر این کار را انجام دهید، باید برای هر زبان تصاویر جداگانه ایجاد کنید. در عوض، متن و تصویر را از هم جدا کنید و از CSS برای همپوشانی متن روی تصویر استفاده کنید.
بین‌المللی فکر کنید
ویژگی‌هایی مانند lang و hreflang HTML شما را برای بین‌المللی‌سازی معنادارتر می‌کنند. به همین ترتیب، ویژگی‌های منطقی، CSS شما را سازگارتر می‌کنند.
اگر به فکر کردن بر اساس top ، bottom ، left و right عادت دارید، ممکن است فکر کردن به block start ، block end ، inline start و inline end به جای آن سخت باشد. اما ارزشش را دارد. ویژگی‌های منطقی کلید ایجاد طرح‌بندی‌های واقعاً واکنش‌گرا هستند.
درک خود را بررسی کنید
دانش خود را در مورد بین‌المللی شدن بیازمایید.
در زبان انگلیسی، سمت right فیزیکی یک کادر، از نظر منطقی کدام طرف است؟
block-starttop است.block-endbottom استinline-startleft است!inline-endکدام ویژگی را باید به HTML خود اضافه کنید تا برای بین‌المللی‌سازی معنادارتر شود؟
englishlanglanguagei18nدر مرحله بعد، یاد خواهید گرفت که چگونه طرح‌بندی‌های سطح صفحه، که به عنوان طرح‌بندی‌های ماکرو نیز شناخته می‌شوند، را انجام دهید.