implementing multilingual sites with direction effect - Templates and document types

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

0

Implementing Multilingual sites with Direction Effect.

Templates and document types

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.

Copy Link
Eric 35 posts 55 karma points

Jan 30, 2010 @ 14:30

0

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,

Copy Link
Stephan Lonntorp 195 posts 212 karma points

Jan 30, 2010 @ 16:10

0

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.

Copy Link
Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib

Jan 30, 2010 @ 17:43

0

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.

Copy Link
anthony hall 222 posts 536 karma points

Jan 30, 2010 @ 18:03
0
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.
Copy Link
tarekahf 215 posts 153 karma points

Jan 31, 2010 @ 13:49
0
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" />
</a>
```
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>
     </div>
 <umbraco:Item runat="server" field="bodyText" />
</div>
```
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
```
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.
Copy Link
tarekahf 215 posts 153 karma points

Jan 31, 2010 @ 14:05

0

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

English

Arabic

Copy Link
Chris Houston 535 posts 980 karma points MVP admin c-trib

Jan 31, 2010 @ 15:15

0

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

Copy Link
tarekahf 215 posts 153 karma points

Jan 29, 2011 @ 12:36

0

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.

Copy Link
mark 6 posts 26 karma points

Jul 15, 2012 @ 13:36

0

Thanks for the post...

Copy Link
mark 6 posts 26 karma points

Jul 15, 2012 @ 14:13

0

Thanks Thanks for the post.....

Copy Link
Said 4 posts 84 karma points

Nov 01, 2018 @ 08:14

0

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

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Implementing Multilingual sites with Direction Effect.