چگونگی ساخت فایل rtl.css

مقدمه

اگر با سرویس wordpress.com کار کرده باشید می دونید که با انتخاب زبان فارسی قسمت مدیریت و قالب های آن علاوه بر فارسی شدن از راست به چپ به نمایش در می آید. سوالی که اینجا پیش میاد اینه که آیا این سرویس دهنده برای زبان هایی مثل فارسی یک پوسته کاملا جدا که از راست به چپ باشه قرار داده؟ . جواب این سوال استفاده از فایل rtl.css هست. زبان هایی مثل فارسی و عربی از سمت راست به چپ نوشته می شوند ( عکس زبان هایی مثل انگلیسی و آلمانی ) بنابراین برای این کار باید در فایل CSS آنها دست برد. چند ماه پیش مانی منجمی با پیگیری های خودش قابلیت rtl.css رو به وردپرس اضافه کرد. به وسیله این قابلیت علاوه بر فایل CSS اصلی یک فایل RTL که در اون تنظیمات مربوط به راست به چپ نوشته شده است در وردپرس قرار می گیره. زمانی که کاربری یکی از زبان های راست به چپ مثلا فارسی رو انتخاب می کنه وردپرس پس از فایل CSS اصلی فایل RTL را در صورت وجود بارگذاری می کند بنابراین بدون اینکه تغییری در فایل اصلی داده بشه محیط از راست به چپ به نمایش در می آید.

یکی از کارهای تیم وردپرس فارسی ساخت و بهبود همین فایل های RTL برای محیط مدیریت وردپرس است. اما استفاده از این فایل های RTL تنها به بخش مدیریت محدود نمی شود بلکه شما می توانید از آنها برای پوسته ها نیز استفاده کنید. جهت ساخت یک فایل rtl.css ادامه مطلب را بخونید.

پیش نیاز

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

مکانیزم فایل rtl.css

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

نحوه ساخت این فایل بسیار راحت هست . ابتدا برنامه ویرایش متن خودتون رو باز کنید و یک فایل با نام rtl.css کنار فایل style.css در پوشه پوسته خود بسازید.

فایل ساخته شده را باز کنید و تغییراتی که برای RTL شدن یک پوسته لازم هست رو با همان کلاس و آی دی در فایل rtl.css وارد کنید. بطور مثال برای RTL کردن یک پوسته نیاز هست قسمت body آنرا rtl کرد . در این مثال قسمت body ما کد های زیر را دارد :

body{
	letter-spacing: 2px;
        padding: 0;
	margin: 0;
	color: #3d3d3d;
	font-family: verdana;
	font-size: 9pt;
	background: url(images/bg.gif) no-repeat top fixed;
	}

حالا برای اضافه کردن مثلا دستور direction: rtl; کافیست این دستور را مثل شکل زیر در فایل rtl.css وارد کنیم :

body{
        direction: rtl;
	}

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

اما ممکنه اینجا سوالی پیش بیاد که مثلا در این مثال ما فونت verdana برای فارسی زیاد جالب نیست . ما می خواهیم از فونت tahoma استفاده کنیم . چطور این کار امکان پذیر است ؟

کافیست شما دستور font-family را وارد کرده و مقدار های مورد نظرتون رو در فایل rtl.css بنویسید. چون این فایل بعد از فایل اصلی بارگذاری می شود بنابراین دستور قبلی بطور خودکار خنثی می شود. یعنی در اینجا مثال ما می شود :

body{
        direction: rtl;
	font-family: tahoma;
	}

سوال بعدی : چطور می شود یک عبارت را حذف کرد. مثلا در این مثال ما عبارت letter-spacing: 2px; وجود دارد و با توجه به اینکه مرورگر اپرا در زبان فارسی با این دستور مشکل دارد من می خواهم این دستور رو حذف کنم. راه حل چیست ؟

راه حل ساده است. کافیست شما در فایل rtl.css اون عبارت را نوشته و مقدار آنرا برابر با ۰ قرار دهید. در مثال ما بدین صورت می شه :

body{
        direction: rtl;
	font-family: tahoma;
	letter-spacing: 0px;
	}

نحوه ساخت یک فایل rtl.css بدین شکل بود که خوندید. شما می توانید هرگونه سوال خود را در قسمت انجمن ها مطرح نمایید.