This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
Hello, i am using rainlab/translate plugin to translate dynamic pages, and i'm looking for a way to set some properties to make text in RTL language readable without affecting other languages (text-align to right/letter-spacing to 0)
I was told that i could use the locale variable to add a css class to the specified text and style it, but i don't know how to do it, some code or any alternative solution would be appreciated, thank you
Last updated
Here is a simple example of a CMS page to do this:
title = RTL Test Page
url = /rtl
layout = default
==
<div class="{{ activeLocale == 'ar' ? 'rtl' : 'ltr' }}">
<p>Content Fetched from a translatable model or using a CMS translatable content file</p>
</div>
<style>
.rtl {
direction: rtl;
text-align: right;
letter-spacing: 0;
}
.ltr {
direction: ltr;
}
</style>Just make sure you add the localePicker component to your layout and that should work.
Thank you very much for taking the time, this fixed it, i understand it's much simpler than i thought it would be, only one problem, it's not working on partials, do you know why? when i refresh the page i can see it's RTL for 1 second then it turns to LTR
i managed to fix it by adding component to the partial itself but that means i have to add it to all partials, is there a better solution? i already have localePicker component in my layout
Partials for example: theme/partials/product/info.htm while page extension name is product.htm | code is something like this:
<div class="{{ activeLocale == 'ar' ? 'rtl' : 'ltr' }}"> <h3>{{ 'Design Description' | _ }}</h3> </div>
sorry i don't know how to post code here
Last updated
If all your content needs to be RTL, add this to your layout instead:
<html class="{{ activeLocale == 'ar' ? 'rtl' : 'ltr' }}">
...And add the rtl CSS class definition to your global style file.
Last updated
mjauvin said:
If all your content needs to be RTL, add this to your layout instead:
<html class="{{ activeLocale == 'ar' ? 'rtl' : 'ltr' }}"> ...And add the
rtlCSS class definition to your global style file.
Yes this is even better than what i was looking for, thank you!
1-7 of 7