CODEWITHSUNDEEP
javascripthtmlcssinternationalizationright-to-left
Paul Reiners
Paul Reiners

Reputation: 7894

Flow of divs in right-to-left language

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.

Upvotes: 0

Views: 420

Answers (2)

Daniel A. White
Daniel A. White

Reputation: 191037

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.

Upvotes: 2

Alex
Alex

Reputation: 829

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>

Upvotes: 1

Related Questions