راستچین و چپ چین خودکار متن انگلیسی و فارسی با CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-06-04 18:50:24

در طراحی های سایت، چیزی که رایج است، معمولا برای سایت های فارسی، متن ها را راستچین می کنند و زمانی که متن های انگلیسی وجود داشته باشد، آنها هم راستچین خواهند بود و برای یک رابط کاربری حرفه ای، چیز زیاد مناسبی نیست. اگر بخواهیم منطقی به این قضیه نگاه کنیم، متن های فارسی و عربی باید از راست به چپ باشند به گونه ای که هم Direction آنها RTL باشد و هم Text Align آنها Right !!!

و برعکس، متن های انگلیسی هم از نظر قواعد طراحی، باید در سمت چپ محدوده مطلب باشند با Direction منطقی LTR و جهت Left. خب شاید اکثر طراحان از این موضوع آگاه هستند و میدانند که باید چنین حرکتی پیاده شود! اما اگر امتحان کرده باشید، زمانی که بخواهید یک قالب یا اسکریپت را فارسی سازی کنید و آن را RTL کنید، کلیه متن ها چه فارسی و چه انگلیسی راست چین خواهند شد. مگر اینکه داخل سورس کدها، برای بخش متن های انگلیسی از استایل چپ چین استفاده کنیم که این کار هم زمان بر است و هم در اکثر طراحی ها جوابگو نیست.

خب در اینجا من در تاکینا یک ترفند به شما آموزش خواهم داد که تنها با دو ویژگی و دستور CSS این قابلیت را داشته باشید که متن های فارسی را راستچین و متن های انگلیسی را چپ چین کنید بدون اینکه از دستورات Direction و Text Align استفاده کنید!

برای انجام اینکار، ما از ویژگی کمتر شناخته شده unicode-bidi استفاده می کنیم که تقریبا 90 درصد وبمستران از قابلیت بی نظیر آن بی خبرند! و ترکیب unicode-bidi با Text Align به ما اجازه پیاده سازی چنین طرحی را خواهد داد. و اما روش انجام کار.

 

برای داشتن چنین قابلیتی، ابتدا کد زیر را در یکی از فایل های CSS قالب یا اسکریپت خودتان که مطمئن هستید در سایت فراخوانی می شود، قرار دهید:

.talkina, .talkina p, .talkina h1, .talkina h2, .talkina h3 {
    text-align: start !important;
    unicode-bidi: plaintext !important;
}

در کد بالا ما از مقدار start برای text-align استفاده کردیم که در واقع کار جهت بندی متن های فارسی و انگلیسی را انجام می دهد. و مقدار plaintext برای unicode-bidi در واقع همان وظیفه دستور direction را شبیه سازی می کند با این تفاوت که اگر متن فارسی بود، آن را راستچین و اگر انگلیسی بود آنرا چپ چین می کند!

و اما مهم ترین بخش

اضافه کردن کد بالا به معنای تعریف یک کلس جدید به نام talkina است. ما این کلس را باید در کدهای قالبمان در جایی که متن های مطلب قرار دارند، جایگذاری کنیم. باید DIV مربوط به بخش محتوای مطلب را در کدهای قالب یا اسکریپت پیدا کنیم و talkina را به قسمت class آن div اضافه کنیم.

برای مثال:

<div class="talkina">

<p>این یک متن فارسی است!</p>
<p>This is English Text!</p>

</div>

و این هم پیش نمایش و نتیجه این تغییرات: https://codepen.io/masihdindar/pen/vYxRoze

و یک نمونه زنده در پلتفرم تاکینا : https://talkina.ir/posts/1969