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


نویسنده:
یکشنبه ۱۶ شهریور ۱۳۹۹
نحوه فارسی نوشتن در HTML

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

28 پاسخ به “نوشتن فارسی در HTML | حل مشکل فارسی نویسی”

  1. محمدحسین گفت:

    ببخشید باید برای نوشتن این ها به زبان انگلیسی باید اینا رو با حرف بزرگ یا کوچیک بنویسیم؟

  2. محمدحسین گفت:

    انکدینک چیه؟

  3. me گفت:

    سلام
    اون # تو قسمت اخر بعد صفت href چه معنی میده؟
    ممنون بابت اموزشتون!

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

  4. mmdjavad گفت:

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

  5. حسین گفت:

    سلام من میخوام فارسی بنویسم ولی میاد بجاش علامیت سوال میزاره حتی نو مرورگرم
    مکان کد نویسی:اچ تی ام ال پد 2020
    مروگر:گوگل کروم آخرین نسخه روز
    مشکل چیه
    و یه سوال دیگه الان توی نضر سنجی ها من دارم براتون سوال مینویسیم چه کدی گذاشتین که من بنویسم ایمیل و نام من رو هم ازم میخواد لطفا یه مطلب هم در مورد این بزارید
    و اینم آخرین سوالم:
    چطوری توی سایتتون پست میزارین؟؟

    • سلام مراحل گفته شده رو انجام بدید در یه ادیتور دیگه تست کنید.

      نوشتن نام و ایمیل با form و input قابل انجامه که در درس‌های بعدی راجعبش نوشتیم

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

    • رسول گفت:

      با سلام
      در مورد سوال اول: علاوه بر رعایت موارد مطلب فوق، بسته به ادیتور متنی میتونید به هنگام ذخیره کد بخش انکدینگ را UTF-8 انتخاب کنید یا از منوی Format گزینه Encode in UTF-8 رو انتخاب کنید.

  6. علی گفت:

    سلام، برای نوشتن نقل قول بعد از جمله یا کلمه ، به شکلی که تو صفحه html دقیقا به همون صورت نشونش بده راهکاری دارید؟
    مثلا ، کدی که نوشتیم نام :
    توی صفحه Html : نام
    با تگ bdi درست میشه ولی چیدمانش برای سلکت کردن بهم ریخته میشه

  7. حسین گفت:

    سلام برای استفاده کردن از فلوت در طراحی و بوت استرپ باید چکار کنیم .بوت استرپ 5 سازگاری با rtl داره خودش یا نه؟

    • سلام دوست عزیز، کاش سوالات بوت‌استرپ رو در مقالات خودش می‌پرسید.
      برای استفاده از فلوت در بوت استرپ از کلاسهای float-leftو float-right میشه استفاده کرد البته در نسخه ۵ کلاس‌هایی مثل float-start و float-end وجود دارن.
      بله نسخه سازگار با rtl ارائه شده.

  8. Heini گفت:

    سلام
    خیلی ممنون از آموزش خوب و روان تون یه سوالی داشتم آیا ترتیب نوشته شدن زبان و direction در قسمت مهمه؟ یا میتونن برعکس باشن؟

  9. ERR_No_Name_(343) گفت:

    درود مطلب خوبی بود، اگه بخوایم یک قسمتی از متن رو از راست به چپ و قسمت دیگری از متنمون رو از چپ به راست بنویسیم، چه کاری باید انجام بدیم؟

  10. اکرم گفت:

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

  11. اکرم کریمی گفت:

    میشه کامل بنویسید.ممنون

  12. TAHA گفت:

    سلام وقتتون بخیر
    تا اونجایی که من اطلاع دارم در این دوره آموزشی رایگان همه مباحث html , CSS به صورت کامل تدریس نمیشه
    بعد از گذروندن این دوره برای اینکه همه مباحث یادگرفته بشه چ کار کنیم ؟؟
    چ چیزی رو پیشنهاد میکنید؟؟

  13. امیر گفت:

    سلام درباره direction: rtl; توضیح میدید که دقیقا چه کار میکنه ؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *