uupload

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


نویسنده:
یکشنبه 16 شهریور 1399
نحوه فارسی نوشتن در 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 خود هم از این استایل استفاده کنید تا مطئن شوید تمامی المان های صفحه به خوبی راستچین شده اند:

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

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

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

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

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

  1. Fatmhmlashahy گفت:

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

    • سلام وقت بخیر
      هنگام نصب چه برنامه زبان فارسی رو انتخاب کردید؟ اگر از داخل نرم افزار امکان تغییر زبان وجود نداشته باشه (که تقریبا غیر ممکنه، حتما گوگل کنید) می‌تونید یکبار دیگه برنامه رو حذف کنید و دوباره با زبان انگلیسی نصب کنید
      موفق باشید

  2. پارسا گفت:

    سلام
    استاد چند تا سوال دارم ممنون میشم جواب بدید
    استاد فک کنید من میخوام داخل پاراگرافم این متن رو بنویسم
    rtl یعنی راست به چپ و ltr یعنی چپ به راست .
    حالا ما نه تو خود vscod میتونیم این متن رو درست بنویسیم نه تو نتیجه در مرورگر کروم میتونیم این رو به شکل درست ببینیم . ممنون میشم بگید مشکل چیه و چطوری حل میشه )این رو هم در نظر بگیرید که من تمام مطالب گفته شده در این آموزش را رعایت کردم
    سوال بعدیم اینه که شما فکر کنید من ی همچین چیزی دارم در این خط من خاستم این کد در پاراگراف من نشون بده ، ولی این اتفاق نمیوفته چون خود vscod این رو ی تگ در نظر میگیره نه متن
    ممنون میشم بگید چطوری تگ ها رو داخل پاراگرافم نشون بدم
    این آخرین سوال : استاد من اومدم گفتم حالا ما رو به صورت (html dir=”rtl”) بنویسیم که داخل پاراگراف بیاد ولی بعد این که نوشتم به خاطر این که من تعریف کردم که متن ها از راست به چپ باشه این جوری نمایش داده میشه (html dir=”…..”) میبینید که کامل بهم ریخت حالا گفتم بیایم بگیم تو بیا از چپ به راست نوشته شو و این کار رو کردم (html dir=”…..”) حالا (html dir=”rtl”) درست نوشته شد ولی اون طرف صفحه .
    مثل زیر :

    بقیه مطالب ………………….
    (html dir=”rtl”)
    ممنون میشم این مشکل رو هم برطرف کنید .

    • سلام وقت بخیر
      اگر موارد گفته شده در این آموزش رعایت کردید نباید مشکلی در نمایش کاراکتر های زبان فارسی وجود داشته باشه.
      با notepad کدتونو بنویسید و در پنجره save لطفا encoding روی utf-8 قرار بدید. بازم چک کنید احتمالا باید درست بشه.
      برای نمایش tag های صفحه وب باید بجای علامت > از ;lt& و بجای علامت < از ;gt& استفاده کنید.
      اگر بخواید یه چیز خاصی رو در صفحه چپ چین کنید باید اول اون عبارتو داخل یه تگ span بزارید. بعد بهش این صفت رو بدید: style=”text-align:left;direction:ltr;”
      موفق باشید

  3. علی گفت:

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

  4. irangig گفت:

    خیلی خوب بود . ممنونم ازتون

  5. Essi گفت:

    تشکر بسیار عالی و دقیق

  6. امیر گفت:

    تشکر فراوان از اموزشتون

  7. asman گفت:

    موقع ذخیره متن utf8رو انتخاب می‌کنم و بقیه تنظیمات ولی باز تو مرورگر متن فارسی مربعی یا حروف فارسی در هم

    • سلام وقت بخیر
      اگر هنگام ذخیره فایل از utf-8 استفاده می‌کنید و از متا charset هم با مقدار utf-8 استفاده می‌کنید ولی بازهم متن فارسی درست نمایش داده نمیشه، احتمالا مشکل از سیستم عامل یا مرورگر شماست.

  8. امیر گفت:

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

  9. TAHA گفت:

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

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

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

  11. اکرم گفت:

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

  12. ERR_No_Name_(343) گفت:

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

  13. Heini گفت:

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

  14. حسین گفت:

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

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

  15. علی گفت:

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

  16. حسین گفت:

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

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

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

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

    • رسول گفت:

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

  17. mmdjavad گفت:

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

  18. me گفت:

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

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

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

    انکدینک چیه؟

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

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

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

نشانی ایمیل شما منتشر نخواهد شد.