Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Developing Bidi Apps

This document lists some patterns and best practices to observe when creating BiDi (bidirectional — left-to-right and right-to-left) 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

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