راست چین کردن قالب مجنتو

به تازگی تجربه راست‌چین کردن دو قالب مجنتو را داشته‌ام. یکی از آنها تم مجنتو سارینا و دیگری فروشگاهی بود که یکی از مشتری‌های سارینا از ما خواسته بود تا آن را راست‌چین کنیم. شاید در میان کسانی که تجربه این کار را ندارند، این تصور وجود داشته باشد که با یک استایل ;direction:right به body همه چیز بدون مشکل راست‌چین می‌شود. ولی ماجرا به این سادگی‌ها نیست. باید تمام صفحات و ماژول های مختلف سایت بررسی شود و در صورت لزوم به صورت دستی CSS هر قسمت را تغییر داد.

RTL چیست؟

راست‌چین کردن یا همان RTL مخفف Right To Left است. قالب RTL برای زبان‌های راست به چپ مانند فارسی و عربی استفاده می‌شود.

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

RTL کردن قالب، بازی با CSS هاست و شما نیاز به دانش CSS دارید. نکته پیچیده، پیدا کردن کلاس‌های مورد نظرتان برای تغییر CSS در مجنتو است که در پست قبلی درباره نحوه پیدا کردن آن صحبت کردم. من برای ویرایش CSSهای قالب مجنتو از ویرایشگر متن سابلایم (Sublime Text) استفاده می‌کنم.

در شروع کار ممکن است اینطور به نظر برسد که حجم کار زیاد است و از خودتان بپرسید چگونه می‌شود همه صفحات یک قالب را که هرکدام از بخش‌های زیادی تشکیل شده است را راست‌چین کرد. این کار به کمی دقت و حوصله نیاز دارد تا تمام صفحات را بررسی کنید ولی اینگونه نیست که لازم باشد CSS همه قسمت‌ها را ویرایش کنید. وقتی بخشی از یک صفحه را راست چین می‌کنید، قسمت‌های زیادی در صفحات دیگر که همان کلاس مشابه را داشته‌اند نیز راست‌چین می‌شوند. برای مثال اگر شما به label، استایل text-align:right بدهید، همه labelها در تمامی صفحات، متنشان از سمت راست آغاز می شود.

قبل از اینکه راست‌چین کردن را آغاز کنید، وقت بگذارید و در همه صفحات سایت، بگردید. بعضی صفحات هستند که خیلی توی چشم نیستند و ممکن است آنها را فراموش کنید. مانند صفحات: ۴۰۴، جستجو یا پیغام های اخطار، خطا و موفقیت.

وقتی صفحات سایت را بررسی می‌کنید، دقت کنید تا نقاط مشترک میان آنها را پیدا کنید، تا لازم نباشد یکی یکی هر قسمت را تغییر دهید.

تغییرات را کجا اعمال کنیم؟

برای راست‌چین کردن می‌توانید CSSهای قالب را پیدا کنید و هر کجا که لازم شد دستوری به آن اضافه یا آن را ویرایش کنید. همچنین می توانید یک فایل CSS جدید اضافه کنید و همه تغییرات مربوط به نسخه فارسی را روی آن انجام دهید. مثلا اگر CSS اصلی قالب، ultimo.css نام دارد، یک CSS جدید با نام ultimo-rlt.css بسازید و آن را ویرایش کنید. دقت داشته باشید وقتی در CSS ،  local.xml جدیداضافه می کنید، آن را آخرین action بگذارید تا الویت آن از CSSهای قبلی بالاتر باشد و آخرین تغییراتی که می دهید، اعمال شود.

به شخصه در هر دو تجربه‌ام در این زمینه یک فایل CSS جدید اضافه کردم و تغییرات لازم را آنجا دادم.

چه دستوراتی برای RTL کردن لازم است؟

• جهت (Direction)

دستور direction:rtl را به یک DIV پدر مانند Wrapper یا Container که همه DIV های دیگر را شامل می شود می‌دهیم تا مشخص شود جهت از راست به چپ می‌باشد. این دستور برای راست‌چین کردن متن به کار می‌رود. اگر در متنی به زبان فارسی از کلمه‌ای انگلیسی استفاده شود، ترتیب به هم می‌خورد ولی با دادن این دستور مشکل حل می‌شود.

wrapper, Container {
	direction: rtl;
}

• چیدمان متن (Text-align)

با فایر باگ (Firebug) یا Developer Tools، در هر صفحه هر کدام از المان های هدر، فوتر، عنوان، متن، فیلدهای نوشتاری، لیبل و … را انتخاب کنید، اگر دستور text-align:left دارند، مقدار آن را به جای left به right تغییر دهید. و اگر این دستور به آن ها اعمال نشده و لازم است که آنرا داشته باشد، text-align:right را به استایل‌اش اضافه کنید. با این دستور، متن را از سمت چپ به راست هدایت می‌کنید.

• حاشیه و لایی گذاری (Margin و Padding)

در فایل های CSS جستجو کنید و هرکجا margin-right ،padding-left ،padding-right  و margin-left پیدا کردید، جای left و right آنها را عوض کنید. مثلا اگر margin-right:20px دارید در نسخه راست‌چین margin-left:20px درست است.

عبارات padding و margin را هم به صورت جداگانه جستجو کنید، فرض کنید جستجو شما نتیجه زیر را در بر گیرد:

padding: 20px 10px 30px 15px;

که هر کدام از این اعداد به ترتیب از سمت چپ، padding-left ،padding-bottom ،padding-right ،padding-top را نشان می‌دهند:

padding: top right bottom left;

برای راست‌چین کردن، فقط باید جای padding-right و padding-left را عوض کنید:

padding: 20px 15px 30px 10px;

• المان های شناور (Float)

در CSS(ها) ویژگی float را جستجو کنید و هر کجا float:right وجود داشت، آنرا float:left کنید و بالعکس.

همچنین در CSS(ها) دنبال left و right نیز باشید، برای مثال اگر left:50px بود، آنرا تبدیل به right:50px کنید.

• قلم وب (Font-face)

وب فونت مناسب انتخاب کنید و اندازه فونت‌ها را در صورت نیاز تغییر دهید. مخصوصا اندازه‌هایی که به تگ h1 تا h6 داده می‌شود برای فونت انگلیسی مناسب است و با دادن فونت فارسی به آنها، اندازه فونتشان خیلی بزرگ یا خیلی کوچک می‌شود که نیاز به ویرایش font-size دارید.

پس از انجام مراحل بالا، عکس‌ها را نیز بررسی کنید، ممکن است بعضی از عکس‌ها نیاز به تغییر جهت در فتوشاپ داشته باشند.

به جهت حرکت اسلایدر هم دقت کنید تا با توجه به نسخه فارسی، در جهت صحیح حرکت کنند. ممکن است لازم شود تغییراتی هم در جاوااسکریپت بدهید.

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