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.
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.
I would always look to the root node to figure out what site it is. But this might be an option for you:
content - English (attach domain example.com/en with english language) - - blah - Arabic (attach domain example.com/ar 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.
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:
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.
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
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.
Tarek.
Why don't use something like this:
http://social.msdn.microsoft.com/Forums/en-NZ/asmxandxml/thread/ede50314-dd3b-42b4-862f-d7818a099c4f
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"
Cheers,
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.
I would always look to the root node to figure out what site it is. But this might be an option for you:
content
- English (attach domain example.com/en with english language)
- - blah
- Arabic (attach domain example.com/ar 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.
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
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.
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:
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:
4. For each element that needs styling for Arabic Language, I added the ":lang" pseudo-class in the related CSS file as follows:
5. Must ensure the !DOCTYPE declaration is added in the master template:
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 ?
Tarek.
I like to post the screen shots of the Runway Multilingual website:
English
Arabic
Hi,
Nice to see your screen shots, it would be good to see the whole Runway site translated into Arabic and other non-western languages.
Cheers,
Chris
I have prepared the following screenshots to help you find out the changes needed to implement Arabic for Umbraco v 4.0.4.1
http://bit.ly/hdqEle
Tarek.
Thanks for the post...
Thanks Thanks for the post.....
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
is working on a reply...