Search code examples
csswordpressright-to-leftqtranslate

handling LTR and RTL for Arabic Sites (internationalization)

I am creating a site in Wordpress,It is basically an english site but when user clicks on translate it translate it into Arabic.There is problem of ltr and rtl,How can I solve that.I am using qtranslate plugin right now.Same is the case with urdu ,kurdish languages. Anyone who can help me with this please see attached imageenter image description here Thanks

Solution

  • It seems this wordpress plugin is inserting a language direction and name into the <html> tag. like this:

    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

    OR

    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ar-AR">

    If I understand you the plugin is not rendering correct direction attribute for the ltr languages.

    First Option

    One option is to use javascript to fix this. simply we detect the rtl languages by their ISO codes (here it's ar for Arabic) and adding a class to the body tag

    jQuery(function(){

    jQuery("html[lang=ar]").attr("dir", "rtl")
            .find("body").addClass("right-to-left");

});

    Now you can style that elements in the theme css file by prefixing that right-to-left class like this: (this is just a sample)

    body.right-to-left my-element li {
    float:right;
    direction: rtl;
}

    .

    Second Option

    As suggested by the other answer Use php to insert that class name into the body tag of the page. open your header.php file in your theme and edit this line:

    <body class=" <?php if($_GET["lang"] == "ar") echo "right-to-left"; ?> ">

    Now use the same css to style you elements