Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • tarekahf 215 posts 153 karma points
    Jan 30, 2010 @ 14:14

    Implementing Multilingual sites with Direction Effect.

    Especially after going for the Umbraco Level 1 Course, it is now very clear to me how to build multilingual sites in Umbraco.

    However, for Arabic, we need to do certain styling like to make HTML Element Direction to be Right-to-Left and the same for the "flow" attribute.

    I think I know how to do it (since Doug gave us an idea about this), but just to check if someone has done any effort in that direction.

    I need to add a logic in the Templates, XSLT Macros or .NET Macros, which is like:

    - Is this page under English (or Default) ? If yes, use English Lang Styles (or Default)

    - Is this page under Arabic ? If yes, use the Arabic Lang Styles.

    - ...etc

    I need to know:

    - Where is this best implemented, XSLT, Templates, .NET ...etc ?

    - Should I use Session Variables and/or Query String parameters to store the current active language ?

    - Should I always do a query to find the Language of the selected page by navigating to the root node ?

    In CSS I have seen special selectors for Language, which is associated with the "Lang" attribute of the HTML Element, and I wish to know what is the best way to use such feature under Umbraco.

    Appreciate your feedback.


  • Eric 35 posts 55 karma points
    Jan 30, 2010 @ 14:30

    Why don't use something like this:

    and then redirect according to userculture ?

    I'm working on something like this to redirect to different home pages according to visitors culture settings in their browser

    Hope it helps (even if it's not "the solution"


  • Stephan Lonntorp 195 posts 212 karma points
    Jan 30, 2010 @ 16:10
    Stephan Lonntorp

    I'd implement a property on the root node, defining ltr or rtl, and then load a stylesheet with the appropriate styles, I'd duplicate the different styles, so the user only loads 1 stylesheet file, but the maintainability is slightly lower. It all depends on how often you update the styles.

  • Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib
    Jan 30, 2010 @ 17:43
    Morten Bock

    I would always look to the root node to figure out what site it is. But this might be an option for you:

    - English (attach domain with english language)
    - - blah
    - Arabic (attach domain with arabic language)
    - - blah

    Now, on the "blah" node, you can actually just ask .Net to give you the current language, since the thread culture is set depending on the domain you put on the root node.

    So if you are using a .Net control, just get the current culture. If you are using xslt, you  could add a dictionary item called something like "languagecode". Then from xslt, ask for that item using umbraco.library:GetDictionaryItem(string Key). That will return at string that you can use to identify the current language/culture and do your logic base on that.

    I am not familiar with the language CSS features that you mention.

  • anthony hall 222 posts 536 karma points
    Jan 30, 2010 @ 18:03
    anthony hall

    I created an Arabic site recently. It was surprisingly simple. 

    here whats i did

    1) as morten  explains above add domain on content node

    2) use dictionary items for text that appears in buttons., ie create an dictionary item for "Submit" 

    3) add the following to the css for arabic

    html{direction:rtl; }

    4) I avoided css positioning and just float elements. Then i copied my en.css to ar.css 

    find "float:left " replace to float:right". 

    i didn't use an css libraries such as blueprint  or yui. If i was creating another i would probably do bit of r & d on what they offer. 

  • tarekahf 215 posts 153 karma points
    Jan 31, 2010 @ 13:49

    Dear All,

    Thanks a lot for all the helpful replies ...

    I did something similar to what Morten suggested. My intention is to minimize the effort needed to enable multilingual sites for existing website.

    Here are the summary of the steps I followed based on the Runway Module:

    1. Activated "Managed Hosts" without domains, and used this in-line xslt to get the root Language Node starting from the current node:

    <a href=" <umbraco:Item field="pageID" runat="server" xslt="umbraco.library:NiceUrl(umbraco.library:GetXmlNodeById({0})/ancestor-or-self::node [@level='1' and string(data[@alias='language']) != '']/@id)"></umbraco:Item>">
    <umbraco:Item runat="server" field="siteName" recursive="true" />


    2. Created Dictionary Item "#attrLang" for the HTML "Lang" attribute for each Language:

      en: attrLang -> *null*      <---- default
      ar: attrLang -> Lang="ar"


    3. Added property "txtPageTitle" with fall-back to "pageName". This is to avoid having Arabic chars in the Page URL. In the template where it has elements that neede Styling for Arabic, I added the Lang Attribute as follows:

    <div id="content" <umbraco:Item field="#attrLang" runat="server"/> >
         <div id="contentHeader"> 
             <h2><umbraco:Item field="txtPageTitle" useIfEmpty="pageName" recursive="true" runat="server"></umbraco:Item></umbraco:Item></h2>
     <umbraco:Item runat="server" field="bodyText" />


    4. For each element that needs styling for Arabic Language, I added the ":lang" pseudo-class in the related CSS file as follows:

    /* Subpages layout */
    #content{text-align: left;}
    #content:lang(ar){float: right; text-align: right; dir:rtl;}


    5. Must ensure the !DOCTYPE declaration is added in the master template:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""[]>


    The above steps worked under IE 8 and must disable "Compatibility View". If :lang pseudo class in not supported, need to define overried for the CSS definition for the required element. Same method can be used.

    What do you think about this approach ?


  • tarekahf 215 posts 153 karma points
    Jan 31, 2010 @ 14:05

    I like to post the screen shots of the Runway Multilingual website:



  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Jan 31, 2010 @ 15:15
    Chris Houston


    Nice to see your screen shots, it would be good to see the whole Runway site translated into Arabic and other non-western languages.



  • tarekahf 215 posts 153 karma points
    Jan 29, 2011 @ 12:36


    I have prepared the following screenshots to help you find out the changes needed to implement Arabic for Umbraco  v


  • mark 6 posts 26 karma points
    Jul 15, 2012 @ 13:36

    Thanks for the post...

  • mark 6 posts 26 karma points
    Jul 15, 2012 @ 14:13

    Thanks Thanks for the post.....

  • Said 4 posts 84 karma points
    Nov 01, 2018 @ 08:14

    Hi Tarekahf, I have the same problem with text direction to be right or left could you please help me how to add this feature in the textboxes in umbraco 7 at the end of paragraph the (.) positions change automatically to the right while in arabic language it should be at the left side
    enter image description here

Please Sign in or register to post replies

Write your reply to: