شبکه جهانی وب برای همه افراد در جهان در دسترس است - این همان نام است! این بدان معناست که وب سایت شما به طور بالقوه در دسترس هر کسی است که به اینترنت دسترسی دارد، صرف نظر از اینکه کجا هستند، از چه دستگاهی استفاده می کنند یا به چه زبانی صحبت می کنند.
هدف از طراحی ریسپانسیو این است که محتوای شما در دسترس همه باشد. به کار بردن همین فلسفه برای زبان های انسانی، نیروی محرکه بین المللی سازی است – آماده سازی محتوا و طرح های شما برای مخاطبان بین المللی.
خواص منطقی
انگلیسی از چپ به راست و از بالا به پایین نوشته می شود، اما همه زبان ها به این شکل نوشته نمی شوند. برخی از زبان‌ها مانند عربی و عبری از راست به چپ می‌خوانند و برخی حروف ژاپنی به جای افقی، عمودی خوانده می‌شوند. برای تطبیق این حالت های نوشتن، ویژگی های منطقی در 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 استفاده کنید. در اینجا، متن "نسخه دویچه" به عنوان به زبان آلمانی و لینک مقصد نیز به عنوان آلمانی علامت گذاری شده است:
<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در مرحله بعد، نحوه نزدیک شدن به طرح‌بندی‌های سطح صفحه، که به‌عنوان طرح‌بندی کلان نیز شناخته می‌شوند، را یاد خواهید گرفت.