هنگام ساخت وب‌سایتی که مخاطبان فارسی‌زبان دارد، ضروری است که محتوا از نظر فرهنگی و زبانی مناسب باشد. یکی از نیازهای رایج، تبدیل اعداد انگلیسی (0-9) به اعداد فارسی (۰-۹) است. این تغییر کوچک اما مهم می‌تواند تجربه کاربری بهتری برای بازدیدکنندگان فارسی‌زبان ایجاد کند. در این پست وبلاگ به آموزش تبدیل اعداد انگلیسی به اعداد فارسی در جاوا اسکریپت و CSS می پردازیم.
زبان فارسی از راست به چپ نوشته می‌شود و از مجموعه‌ای متفاوت از اعداد نسبت به انگلیسی استفاده می‌کند. در حالی که انگلیسی از اعداد 0-9 استفاده می‌کند، فارسی از ۰-۹ استفاده می‌کند. برای مثال، عدد 123 در انگلیسی به صورت ۱۲۳ در فارسی نوشته می‌شود.
هنگام نمایش اعداد در یک وب‌سایت، استفاده از اعداد مناسب برای اطمینان از خوانایی محتوا و ارتباط فرهنگی با کاربران فارسی‌زبان بسیار مهم است. این موضوع به‌ویژه برای وب‌سایت‌هایی که تاریخ، قیمت‌ها، شماره تلفن یا هر اطلاعات عددی دیگری را نمایش می‌دهند، اهمیت دارد.
تبدیل اعداد انگلیسی به اعداد فارسی در CSS
یکی از روش‌های ساده و مؤثر برای نمایش اعداد فارسی در وب‌سایت، استفاده از فونت‌هایی است که به‌طور پیش‌فرض از اعداد فارسی پشتیبانی می‌کنند. این روش نیازی به تبدیل اعداد با استفاده از جاوا اسکریپت ندارد و تنها با تعریف فونت مناسب، اعداد به‌طور خودکار به شکل فارسی نمایش داده می‌شوند.
فونت وزیر یکی از فونت‌های محبوب و رایج در بین طراحان وب فارسی است که به‌طور پیش‌فرض از اعداد فارسی پشتیبانی می‌کند. برای استفاده از این فونت در وب‌سایت، مراحل زیر را دنبال کنید:
- فونت ویز را دانلود کنید
- آن را از حالت فشرده خارج کنید
- در آدرس misc\Farsi-Digits\fonts\webfonts تمامی فونت ها را کپی کرده و در پروژه خود قرار دهید
- با استفاده از CSS فونت ها را به پروژه اضافه کنید (یا کد زیر را کپی کنید و در فایل Css خود قرار دهید.)
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Vazirmatn;
src: url('./public/Vazirmatn-FD-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Vazirmatn';
}
مزایای استفاده از فونت با اعداد فارسی
- سادگی: نیازی به نوشتن کدهای اضافی برای تبدیل اعداد نیست.
- سرعت: این روش عملکرد بهتری دارد، زیرا نیازی به پردازش اضافی توسط جاوا اسکریپت نیست.
- یکنواختی: اعداد به‌طور یکنواخت و با فونت اصلی نمایش داده می‌شوند.
- پشتیبانی گسترده: این روش در همه مرورگرها و دستگاه‌ها کار می‌کند.
تبدیل اعداد انگلیسی به اعداد فارسی در جاوا اسکریپت
جاوا اسکریپت یک راه‌حل قوی‌تر و انعطاف‌پذیرتر برای تبدیل اعداد انگلیسی به فارسی ارائه می‌دهد. با استفاده از جاوا اسکریپت، می‌توانید اطمینان حاصل کنید که تبدیل در همه مرورگرها کار می‌کند و به فونت وابسته نیست.
function convertToPersianDigits(input) {
const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
return input.toString().replace(/\d/g, (match) => persianDigits[match]);
}
let englishNumber = "12345";
let persianNumber = convertToPersianDigits(englishNumber);
console.log(persianNumber)
بهترین روش‌ها و ملاحظات
هنگام پیاده‌سازی تبدیل اعداد انگلیسی به فارسی در وب‌سایت خود، بهترین روش‌های زیر را در نظر داشته باشید.
- تست در مرورگرهای مختلف: اطمینان حاصل کنید که راه‌حل شما در همه مرورگرهای اصلی، از جمله نسخه‌های قدیمی، کار می‌کند.
- استفاده از فونت‌های مناسب: فونت‌هایی را انتخاب کنید که از اعداد فارسی پشتیبانی می‌کنند تا نمایش یکنواخت باشد.
- توجه به عملکرد: اگر وب‌سایت شما حاوی مقدار زیادی متن است، مراقب تأثیر تبدیل مبتنی بر جاوا اسکریپت بر عملکرد باشید. کد خود را بهینه‌سازی کنید تا هرگونه کاهش سرعت احتمالی به حداقل برسد.
- مدیریت محتوای پویا: اگر وب‌سایت شما از محتوای پویا استفاده می‌کند (مثلاً محتوایی که از طریق AJAX بارگذاری می‌شود)، مطمئن شوید که تبدیل اعداد برای محتوای جدید نیز اعمال می‌شود.
- بومی‌سازی سایر عناصر: علاوه بر اعداد، سایر عناصر وب‌سایت مانند تاریخ، زمان و ارز را نیز بومی‌سازی کنید تا تجربه کاملاً بومی‌شده‌ای برای کاربران فارسی‌زبان فراهم کنید.
حال که آموزش تبدیل اعداد انگلیسی به اعداد فارسی در جاوا اسکریپت و CSS را مطلاعه کردید، می توانید در دوره ی HTML و CSS سایت ایوولرن ثبت نام کنید.