0

Is it possible in HTML to mark a group of divs so that they flow from left-to-right for left-to-right languages while flowing right-to-left for right-to-left languages? That is, the flow would depend on the setting of the html lang attribute. For example, if you had the following

<html lang="en">

the flow of the marked divs would be left-to-right, while if the language was Hebrew (a right-to-left language)

<html lang="he">

the flow of the marked divs would be right-to-left.

Paul Reiners
  • 8,576
  • 33
  • 117
  • 202

2 Answers2

2

Use the dir attribute as well. It can go on any div so you can change it on the fly.

<html lang="he" dir="rtl">

Don't forget: You might have some CSS to worry about. I use a project called R2 to help with that.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
1

I'd do it using CSS and jQuery. JSFiddle: http://jsfiddle.net/pxztk9ne/

default direction is leftToRight, every block with this class will be floated right, if the specified language is in the rightToLeftLangs-array. Also, at the moment you must the language in the .html-element and not in the html element (jQuery line 3)

$(document).ready(function() {
    var rightToLeftLangs = ['he'];
    if($.inArray($('.html').attr('lang'), rightToLeftLangs) > -1) {
        $('.leftToRight').removeClass('leftToRight').addClass('rightToLeft');
    }
});
.floating {
    position:relative;
    width:100px;
    height:100px;
    background:#eee;
}

.leftToRight {
    float:left;
}

.rightToLeft {
    float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="html" lang="en"></div>
<div class="floating leftToRight">
    Some text
</div>
Alex
  • 799
  • 5
  • 15