بین المللی سازی و بومی سازی

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

اطمینان حاصل کنید که فرم شما به زبان های مختلف کار می کند

بیایید ببینیم چگونه می توانید مطمئن شوید که فرم شما با زبان های مختلف کار می کند.

اولین قدم برای آماده سازی محلی سازی سایت شما این است که ویژگی زبان lang در عنصر <html> تعریف کنید. این ویژگی به خوانندگان صفحه امکان می دهد تا تلفظ صحیح را فراخوانی کنند و به مرورگرها کمک می کند اگر زبان تعریف شده زبان پیش فرض مرورگر نباشد، ترجمه صفحه را ارائه دهند.

<html lang="en-us">

درباره ویژگی lang بیشتر بدانید.

بگو فرمی را به آلمانی ترجمه کردی. چگونه می توانید مطمئن شوید که موتورهای جستجو و مرورگرها از نسخه ترجمه شده اطلاع دارند؟ می توانید عناصر <link> را در <head> سایت خود اضافه کنید که نسخه های جایگزین را توصیف می کند.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

به کاربرانی که به زبان دیگری صحبت می کنند کمک کنید تا از فرم شما استفاده کنند

شما نمی توانید فرم خود را به هر زبانی ترجمه کنید، اما می توانید مطمئن شوید که ابزارهای ترجمه می توانند آن را برای شما ترجمه کنند.

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

اطمینان حاصل کنید که فرم شما با سیستم های نوشتاری مختلف کار می کند

زبان های مختلف از سیستم های نوشتاری و مجموعه کاراکترهای مختلف استفاده می کنند. برخی از اسکریپت ها از چپ به راست و برخی از راست به چپ نوشته می شوند.

فاصله گذاری را مستقل از سیستم های نوشتاری کنید

برای اطمینان از اینکه فرم شما برای سیستم های نوشتاری مختلف کار می کند، می توانید از ویژگی های منطقی CSS استفاده کنید.

ورودی دارای ضخامت حاشیه 1px در همه طرف ها است، به جز سمت چپ که ضخامت حاشیه 4px است. اکنون CodePen را ویرایش کنید و با افزودن dir="rtl" به عنصر <main> ، سیستم نوشتن را به راست به چپ تغییر دهید.

حاشیه ضخیم اکنون در سمت راست است. به این دلیل که ما مرز را با استفاده از یک ویژگی منطقی تعریف کردیم.

input {
  border-inline-start-width: 4px;
}

درباره خواص منطقی بیشتر بدانید.

اطمینان حاصل کنید که فرم شما می‌تواند با فرمت‌های نام مختلف کار کند

فرض کنید فرمی دارید که کاربر باید نام خود را در آن پر کند. چگونه فیلد را به فرم خود اضافه می کنید؟

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

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

درباره اسامی شخصی بیشتر بدانید.

اگر نامی با نویسه های غیر لاتین دارید، ممکن است با این مشکل مواجه شده باشید که نام شما در برخی اشکال invalid گزارش شده است. هنگامی که فرم ها را می سازید، مطمئن شوید که همه کاراکترهای ممکن را مجاز می کنید - و فرض نکنید که یک نام فقط از نویسه های لاتین تشکیل شده است.

انواع قالب‌های آدرس را مجاز کنید

دفتر مرکزی Google در 1600 Amphitheatre Parkway، Mountain View، CA 94043، ایالات متحده است.

این آدرس شامل شماره خیابان، خیابان، شهر، ایالت، کد پستی و کشور است. در کشور شما، قالب آدرس ممکن است کاملاً متفاوت باشد. چگونه می توانید مطمئن شوید که همه می توانند آدرس خود را در فرم شما وارد کنند؟

یکی از راه ها استفاده از ورودی های عمومی است.

درباره روش های دیگر کار با فیلدهای آدرس بین المللی بیشتر بیاموزید.

درک خود را بررسی کنید

دانش خود را در مورد بین المللی سازی و بومی سازی آزمایش کنید

چگونه تلفظ صحیح را برای صفحه خوان ها فراخوانی می کنید؟

با ویژگی lang .
🎉
با ویژگی hreflang .
دوباره امتحان کنید!
افزودن توضیحات با چه زبانی استفاده شده است.
دوباره امتحان کنید!
با ویژگی language .
دوباره امتحان کنید!

چگونه می توانید سیستم نوشتاری وب سایت خود را تغییر دهید؟

با ویژگی direction .
دوباره امتحان کنید!
با صفت dir .
🎉
استفاده از خصوصیات منطقی CSS
دوباره امتحان کنید!
با استفاده از عنصر <link> .
دوباره امتحان کنید!

منابع