فریم ورک RTLCSS به شما این امکان را می دهد تا بجای نوشتن دو فایل CSS، تنها یک فایل برای نسخه LTR بنویسید. RTLCSS نسخه RTL را کامپایل می کند.
برای من پیاده سازی سایت های دوزبانه همیشه کابوس بود، چون لازم بود دو فایل CSS مجزا یکی برای نسخه فارسی و یکی برای نسخه انگلیسی می نوشتم. برای اینکار اول سایت را بصورت RTL پیاده سازی می کردم و بعد از بررسی سایت (text alignها، marginها، paddingها و floatها و ...)، آن را تبدیل به LTR می کردم. اینکار وقت خیلی زیادی از من میگرفت.
این اواخر، CSSهای مشترک را در یک فایل جمع میکردم و بخش هایی که باهم مشترک نبودند را بصورت فایل های rtl.css و ltr.css می نوشتم.
اما فریم ورک RTLCSS این امکان را می دهد تا بجای نوشتن دو فایل CSS، تنها یک فایل برای نسخه LTR بنویسیم. اما چگونه؟
اول از همه لازم هست تا دستور cli را برای RTLCSS را بصورت globally روی سیستم خودتان نصب کنید:
npm install -g rtlcss
با کمک دستور زیر می توانید CSS را convert کنید:
rtlcss input.css output.rtl.css
به جای input.css و output.css اسم CSS خودتان را بنویسید. همچنین دقت داشته باشید که دقیقا در مسیر فایل CSS که قرار است کامپایل کنید قرار داشته باشید.
مثال:
فرض کنید سایت دو زبانه فارسی و انگلیسی داردید و می خواهید جهت body در نسخه فارسی rtl و در نسخه انگلیسی ltr باشد. با کمک RTLCSS اینکار به راحتی انجام می شود:
body { direction: ltr/* rtl:rtl*/;}
خروجی بصورت زیر است:
/*style.css */
body { direction: ltr/* rtl:rtl*/; }
/* style.rtl.css */
body { direction: rtl;}
اگر برای نوشتن CSS از Sass استفاده می کنید اینکار بسیار راحت تر است. شما می توانید یک متغیر تعریف کنید:
$body-direction: ltr #{'/* rtl:rtl*/'}
body {direction: $body-direction;}
خروجی بصورت زیر است:
/*style.css */
body { direction: ltr/* rtl:rtl*/; }
/* style.rtl.css */
body { direction: rtl;}
