mozilla
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.

    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,