mozilla

Developing Bidi Apps

Document Direction

<html dir="rtl">

If you're using navigator.mozL10n from Gaia's localization library, the dir attribute is set automatically for you depending on the current language negotiated against the user's preferences.

Text direction

p {
    text-align: left; /* fallback for older browsers */
    text-align: start;
}

html[dir=rtl] p {
    text-align: right; /*
}
.endAligned {
    text-align: right; /* fallback for older browsers */
    text-align: end;
}

html[dir=rtl] .endAligned {
    text-align: left; /*
}

Box model

Margins, paddings and borders need to be reversed.

.box {
    margin-left: 20px;
}

html[dir=rtl] .box {
    margin-left: 0;
    margin-right: 20px;
}

In Firefox and Webkit browsers, you can also use the experimental (and prefixed for now) margin-start, margin-end, padding-start, padding-end, border-start and border-end properties.

Positioning

Floats, clears and absolute coordinates need to be reversed.

.nav {
    float: right;
}

html[dir=rtl] .nav {
    float: left;
}
#clippy {
    position: absolute;
    bottom: 20px;
    right: 20px;
} 

html[dir=rtl] #clippy {
    right: auto;
    left: 20px;
}

 

Document Tags and Contributors

Tags: 
Contributors to this page: stasm, Syedfaisal
Last updated by: Syedfaisal,