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;
}