Your Search Results

    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.


    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: stasm, Syedfaisal
    Last updated by: Syedfaisal,