Bootstrap - good practice for multilingual 2 directions support?

Question

I'm building a small website which will be both in English (LTR) and Hebrew (RTL).

The website uses the same code base, and only changes captions according to the language being displayed.

When an English user enters the site he should see the content from left to right. So lets say I have an image with text next to it - than the image will be on the left and the text on the right.

When a Hebrew user enters he should see that image on the right and the text to it's left.

Is there an acceptable way doing this in bootstrap without having to write the same html twice and without overriding bootstrap css classes?

possible duplicate of [Right to Left support for Twitter Bootstrap 3](http://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3) — Getz, Jun 02 '14 at 09:09
according to that answer, what they do is override css classes - I was wondering if there might be a better way. — developer82, Jun 02 '14 at 09:14
Please forgive my cultural ignorance on this, but is the written text also right to left - i.e. would "apple" read as "elppa"? And if so, is that also an issue you're asking for help with? Or is it just the placement of blocks of text/divs etc? — Shawn Taylor, Jun 03 '14 at 03:02
check our AryaBootstrap, "AryaBootstrap is a bootstrap with dual layout align support and, used for LTR and RTL web design.", add "dir" to html, thats the only action you need to do. Web: http://abs.aryavandidad.com or GitHub: https://github.com/mRizvandi/AryaBootstrap — mRizvandi, Feb 28 '19 at 08:06

score 0 · Answer 1 · answered Jun 03 '14 at 04:06

If you attach some js to a language checkbox, you could add/remove a pull-right class to the elements you want to move:

Example: http://www.bootply.com/FZMciVLVBL#

JS

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.ltr').addClass("pull-right");
    } else {
        $('div.ltr').removeClass("pull-right");
    }
});

HTML

<div class="col-xs-6 ltr">
  <div class="thumbnail">
    <img src="http://placehold.it/500x300">
  </div>
</div>
<div class="col-xs-6">
  <p>Caption 1...</p>
</div>

Just watch out for how pull-right affects other content that comes afterward - be prepared to add a <div class="clearfix"></div> after blocks of moving content where necessary.

Bootstrap - good practice for multilingual 2 directions support?

1 Answers1