نوشتن فارسی در HTML | حل مشکل فارسی نویسی

آخرین بروزرسانی: 15 شهریور 1399
مریم جعفرپور
آموزش رایگان HTML و CSS ، درسنامه‌های رایگان
نحوه فارسی نوشتن در HTML

فهرست مطالب

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

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

<!DOCTYPE html>
<html>
<head>
	
</head>
<body>
	<p>این یک جمله برای آزمایش زبان فارسی است</p>
	<a href="#">آموزش html در ادمین سایت</a>
</body>
</html>

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

نحوه نوشتن فارسی درصفحه وب سایت

این مشکل فقط در زبان فارسی نیست و در تمامی زبانهای راستچین وجود دارد. اما خوشبختانه برای رفع آن تدابیری اندیشیده شده است. برای حل مشکل فارسی نویسی در HTML به بخش بعدی توضیحات توجه کنید.


حل مشکل فارسی نوشتن در HTML

خب برای نوشتن زبان فارسی در HTML مراحل زیر را دنبال کنید.

1- تعیین زبان در HTML

ابتدا در تگ html زبان فارسی را معرفی کنید. یعنی تگ html شما باید به شکل زیر تغییر کند:

<html lang="fa-IR">

مشخصه lang زبان اصلی سایت و کشور را مشخص می‌کند. استفاده از این مشخصه باعث می‌شود مرورگرها به راحتی زبان وب سایت را متوجه شوند که به نمایش بهتر محتوا کمک می‌کند.

2- استفاده از متاتگ Charset

ابتدا در بخش head سند از متاتگ زیر استفاده کنید. این کار باعث می شود انکدینگ صفحه به درستی انجام شود.

<head>
	<meta charset="utf-8">
</head>

در جلسه مربوط به متاتگ‌ها راجع به دلایل استفاده از آنها بیشتر توضیح خواهیم داد. به هر حال اگر برای مطالعه بیشتر تمایل به بررسی این جلسه دارید وارد درس متاتگ چیست؟ شوید.

3- راستچین کردن وب سایت

برای راست‌چین کردن سایت خود لازم است از مشخصه direction استفاده کنید. direction جهت چینش متون والمان‌های صفحه را تعیین می‌کند. برای انجام این کار ابتدا این مشخصه را در تگ html خود قرار دهید.

<html dir="rtl" lang="fa-IR">

dir همان direction است و مقدار rtl مخفف عبارت right to left یعنی از راست به چپ است.

خب حالا کافیست در کدهای CSS خود هم از این استایل استفاده کنید تا مطئن شوید تمامی المان های صفحه به خوبی راستچین شده اند:

<body style="direction: rtl;">

خروجی کار و کد نهایی برای نمایش زبان فارسی

<!doctype html>
<html dir="rtl" lang="fa-IR">
<head>
	<meta charset="utf-8">
</head>

<body style="direction: rtl;">
	<p>این یک جمله برای آزمایش زبان فارسی است</p>
	<a href="#">آموزش html در ادمین سایت</a>
</body>	
</html>

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

حل مشکل فارسی کردن صفحات سایت

دیدگاه کاربران

  • mohamadmahdialawy
    mohamadmahdialawy
    3 سال پیش

    سلام
    ببخشید من یک کد html ساده نوشتم و روی سیستم خودم هم خوب کار می کرد ولی وقتی ان را گذاشتم روی هاست موقع نمایش همه متن هایی که به زبان فارسی بودند به یک زبان دیگر تبدیل شدند .
    باید چه کار کنم ؟؟؟

    • مریم جعفرپور
      مریم جعفرپور
      3 سال پیش

      تمام نکات این مقاله و مقاله مربوط به نوشتن سند html باید رعایت شوند.
      از جمله افزودن charset=”utf-8″

آموزش رایگان درس به درس

جدیدترین درسنامه‌ها

آموزش افزونه ووکامرس
آموزش رایگان HTML و CSS
آموزش رایگان سئو
آموزش کار با ابزار گوگل آنالیتیکس