In my test page I have a conditional statement that displays the correct css file according to the users language. This is working well.
When the user is viewing the page in a left-to-right language (English, French, Spanish, etc.), the css that is activated is:
<link rel="stylesheet" href="{{ STATIC_URL }}assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}assets/css/style.css">
When the user is viewing the page in a right-to-left language (Arabic, Hebrew, etc.), the css that is activated is:
<link rel="stylesheet" href="{{ STATIC_URL }}assets/plugins/bootstrap/css/bootstrap-rtl.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}assets/css/css-rtl/style-rtl.css">
The issue I am having trouble with is a section of code that displays the users input in the reverse. For example when the test page is rendered in a left-to-right language, there is a small section of code that I want displayed in the right-to-left language.
How do I call the rtl css pages for only the following section of html code when the ltr css has been used to display the page (the rest of the page outside the following section of code should be using the ltr css):
<div class="live_preview_standard_nac_contactDetails" dir="rtl" style="direction: rtl;">
<div class="live_preview_standard_nac_contactContainer" dir="rtl" style="direction: rtl;">
<div class="row">
{{ #if contact_details_phone }}
<div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
<i class="fa fa-phone icon_size20 icon_padding"></i>{{ contact_details_phone }}
</div>
{{ /if }}
{{ #if contact_details_mobile_phone }}
<div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
<i class="fa fa-tablet icon_size20 icon_padding"></i>{{ contact_details_mobile_phone }}
</div>
{{ /if }}
{{ #if contact_details_email_address }}
<div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
<i class="fa fa-envelope icon_size20 icon_padding"></i>{{ contact_details_email_address }}
</div>
{{ /if }}
{{ #if contact_details_linkedin_address }}
<div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
<i class="fa fa-linkedin icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_linkedin_address }}</span>
</div>
{{ /if }}
{{ #if contact_details_facebook_address }}
<div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
<i class="fa fa-facebook icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_facebook_address }}</span>
</div>
{{ /if }}
{{ #if contact_details_twitter_address }}
<div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
<i class="fa fa-twitter icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_twitter_address }}</span>
</div>
{{ /if }}
</div>
</div>
</div>
