This is an archived page. It's not actively maintained.

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.


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;