locked
Could I disable "right to left" style language ? RRS feed

  • Question

  • Hello everyone,

    I want to support "right to left" language such as "ar", "heb" etc.

    Refer from How to adjust layout for RTL languages and localize fonts (Metro style apps using JavaScript and HTML 

    The ui-light.css or ui-dark.css style sheets have their body layout direction set automatically, based on the app language.

    My question:

    Is there any simple way to stop setting body layout direction automatically ?

    I want to keep my App Bar layout is like "left to right" style by simple way something like set a flag(setRight2Left = false)?

    I know that it can be overrided by css, but require to add many codes to avoid RTL style. In ui-dark/ui-light.css xxx:-ms-lang(ar, dv,......)  are too many

    Thx.

    Tuesday, July 10, 2012 6:58 AM

Answers

  • If I want to keep anything to "left to right" from "right to left" languages such as ar, dv, fa etc..    It seems that I need a CSS file to override that style ??

    Yes you can do that.

    You can override the CSS classes in the style sheet or use them to customize elements of your app. For more info about how to best take advantage of  Windows Library for JavaScript styles, see Quickstart: Styling controls.

    And you can check your css rules in vs:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh696632(v=vs.110).aspx


    • Edited by Dino He Friday, July 13, 2012 2:40 AM fix some typo issue
    • Marked as answer by Dino He Tuesday, July 17, 2012 9:53 AM
    Friday, July 13, 2012 2:36 AM

All replies

  • There is not a simple way to override the language default. 

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, July 10, 2012 5:28 PM
    Moderator
  • Therefore, I have to modify the UI by adding something like

    specialLanguage.css
    -------------------------------------------
    xxx:-ms-lang (ar, dv, ..., etc){
    /*override to ltr style*/
    ......
    }
    
    yyy:-ms-lang (ar, dv, ..., etc){
    /*override to ltr style*/
    ......
    }
    Q___Q, so many style should be override.


    Wednesday, July 11, 2012 2:06 AM
  • Hi Timo

    Metro style apps using JavaScript that use the ui-light.css or ui-dark.css style sheets have their body layout direction set automatically, based on the app language. The App Host sets the root element's lang attribute to the app language. The default CSS is in ui-light and ui-dark.css,  and you don't need to write it yourself.

    You can refer to this article:

    How to adjust layout for RTL languages and localize fonts (Metro style apps using JavaScript and HTML)

    Hope it helpful.

    Wednesday, July 11, 2012 2:55 AM
  • Hi Dino,

    thx for your reply.

    I tried set <html lang="en-US">in default.html before loading ui-dark.css

    For most layout is changing to "left to right", but my App Bar still have "right to left" .

    from ui-dark.css

    .win-commandlayout .win-selection:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        float: right;
    }

    I have to override above code to specialLanguage.css

    .win-commandlayout .win-selection:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        float: left;
    }

    As a result, Is it means that there are some codes need to override ?



    • Edited by dogtim Wednesday, July 11, 2012 3:25 AM
    Wednesday, July 11, 2012 3:21 AM
  • Hi

    As the Link says, For WinJS.UI controls, your app can use the :-ms-lang() pseudo class selector to adjust physical CSS properties

    You needn't to override the ui-dark.css.

    Wednesday, July 11, 2012 7:08 AM
  • Hi

    I can use the :-ms-lang() pseudo selector to adjust CSS properties,

    in that way, I have to create a CSS file like specialLanguage.css, and then override some properties that effect by  ui-dark.css.

    I confuse about "You needn't to override the ui-dark.css."

    If I want to keep anything to "left to right" from "right to left" languages such as ar, dv, fa etc..    It seems that I need a CSS file to override that style ??

    Thursday, July 12, 2012 2:45 AM
  • If I want to keep anything to "left to right" from "right to left" languages such as ar, dv, fa etc..    It seems that I need a CSS file to override that style ??

    Yes you can do that.

    You can override the CSS classes in the style sheet or use them to customize elements of your app. For more info about how to best take advantage of  Windows Library for JavaScript styles, see Quickstart: Styling controls.

    And you can check your css rules in vs:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh696632(v=vs.110).aspx


    • Edited by Dino He Friday, July 13, 2012 2:40 AM fix some typo issue
    • Marked as answer by Dino He Tuesday, July 17, 2012 9:53 AM
    Friday, July 13, 2012 2:36 AM