در دنیای امروز وب, چند زبانه بودن صفحات یک سایت از اهمیت زیادی برخوردار است. با توجه به این امر یکی از دغدغه های طراحان صفحات وب طراحی دوجهته سایت می باشد. در این مطلب نگاهی به راهکارهایی در جهت سرعت بخشیدن به طراحی این نوع صفحات خواهیم داشت.
هدف ما این است که برای یک جهت طراحی کنیم اما خروجی کار ما هر دو جهت را ارائه دهد. که این روش باعث بهبود سرعت در روند طراحی می شود.
اول از همه توجه داشته باشید که معیار ما برای تشخیص جهت صفحه ویژگی dir در تگ html می باشد.
<html dir="rtl">.selector {}[dir="rtl"] .selector {/* استایل های مربوط به جهت راست به چپ */}فرض کنید می خواهیم شکل زیر را به عنوان یک دکمه ارسال داشته باشیم و همچینین در صفحه فارسی و عربی این شکل را به طور برعکس می خواهیم. همانطور که گفته شد طراحی در اولین مرحله برای جهت چپ به راست انجام می شود:
button { font-size: 1.1em; padding: 0.5em 2em 0.5em 1em; margin: 2em 0 0 2em; border: none; border-radius: 0 50% 50% 0; box-shadow: hsla(10, 67%, 60%, 0.8) 0px 0px 2px, hsla(0, 0%, 0%, 0.0470588) 0px 0px 0px 1px inset; background-color: hsl(10, 67%, 60%); color: hsl(0, 100%, 100%);}[dir="rtl"] button { padding: 0.5em 1em 0.5em 2em; margin: 2em 2em 0 0; border-radius: 50% 0 0 50%;}
موضوع دیگری که در طراحی صفحات دو جهته اهمیت دارد چیدمان اجزا صفحه یا همان صفحه آرایی می باشد. مثال زیر که چیدمان اصلی که صفحه ltr است را در نظر بگیرید: 
main { float: left; width: 70%; height: 300px; background-color: #e43;}aside { float: left; width: 28%; margin-left: 2%; height: 300px; background-color: #444;}[dir="rtl"] main { float: right;}[dir="rtl"] aside { float: right; margin-left: auto; margin-right: 2%;}
تا الان به ساده ترین روش کار کردیم و سرعت انجام کار هم خیلی مناسب نیست. راه حل چیست؟ در بیشتر مواقع مخصوصا در صفحه آرایی استایل های رایجی وجود دارند که با آنها زیاد سر و کار داریم. یک راه حل این است که برای آن ها کلاس هایی تعریف کنیم و در همان کلاس استایل جهت دیگر را هم بنویسم.
در مثال بالا متوجه شدید که مهم ترین کار برای تغییر جهت اجزا تغییر مقدار ویژگی float بود و این کار را در یک صفحه بار ها و بار ها تکرار می کنیم پس می توانیم برای آن کلاسی داشته باشیم:
.float-start { float: left;}[dir="rtl"] .float-start { float: right;}نکته اینجاست که ما فقط برای یک جهت می نویسیم اما می دانیم که کلاس ما جهت دیگر را هم پشتیبانی می کند پس ما سرعت طراحی را به دو برابر افزایش داده ایم.
در مثلا بالا کافی است به این روش عمل کنیم:
<main class="float-start">content</main><aside class="float-start">sidebar</aside>.mars { margin-left: 1em; [dir="rtl"] & { margin-left: 0; margin-right: 1em; } } .mare { margin-right: 1em; [dir="rtl"] & { margin-right: 0; margin-left: 1em; }}.pads { padding-left: 1em; [dir="rtl"] & { padding-left: 0; padding-right: 1em; }}.pade { padding-right: 1em; [dir="rtl"] & { padding-right: 0; padding-left: 1em; }}.bg-start { background-position-x: left; [dir="rtl"] & { background-position-x: right; }}.bg-end { background-position-x: right; [dir="rtl"] & { background-position-x: left; }}