How to setup the CSS for LTR and RTL (English + Hebrew) site?
Hi,
I am setting up an Umbraco 4.7.1. Hebrew and English site and need some help please configuring the CSS so that the Hebrew pages will run RTL and the English pages LTR. I have two CSS files - the general one and another named CSS - RTL with the following content:
How do I integrate these two CSS files correctly into the site settings/templates so that the English and Hebrew pages will know to run in the correct directions?
Is there any specific reason why you want to do this using CSS rather than using the the "dir" attribute on the root html element for instance, which seems to be the recommended way of doing it according to this article http://www.w3.org/International/tutorials/bidi-xhtml/ ?
If you're sticking with the CSS approach I think what I would do was to add either a class or an id to the <html> element, which could be the site name, like sitename-uk and sitename-he.
Then you could use the site id like this: #sitename-he .rtl{text-align:right} and #sitename-uk .rtl{text-align:left}.
Thanks for the info. I'm okay with using the "dir" attribute as recommended.
Please let me know how this should be implemented on Umbraco 4.7.1 using a multi node language setup, including please exactly what code I need to place where.
In order to be able to figure out when to set the direction to rtl you need to be able to decide wether or not you're on the english site or the hebrew site. Usually I put a language picker on the home/root node where I select what language the site is.
You can perhaps use the language dropdown datatype from uComponents, but you can also just create a new datatype based on a dropdown datatype and then add english and hebrew.
On your home/root node you can add a language property where you select the language datatype and give it an alias of "language".
Then using either XSLT or Razor you can figure out what language the site is using and then add the "dir" attribute when needed on the hebrew site.
I would crate a XSLT based macro and name it something like "language".
Then you should be able to call the macro in your template by placing it directly in the opening html tag like...
<html <umbacro:Macro /> >
Please notice this is a bit ugly but I'm not sure how to otherwise do it since you need to add an attribute to some HTML that is defined in the template.
I hope the above makes sense to you - please let me know if something is troubling you.
...Forgot to mention that the above approach is the same I would use for setting the id's as mentions in the first post - in the macro I would then just check on both languages and set the id's accordingly like id="sitename-he" for instance.
I'm happy to go with whatever you suggest, honestly, just need to get the site up in Hebrew for marketing in Israel.
The idea is that you site will be country focused and for Israel I would like to offer an English and Hebrew version. The site structure should then be solarenergypartner.com/israel/hebrew etc.
In Templates I have a Master template and under that a homepage and textpage template. If I understand correctly I will use these same tempates with the additional language code. Also, in content I copied the english tree and renamed the pages in Hebrew based on Eran's recommendation to use the multi node setup.
1. Do I place the additional code on the master template?
I followed the instructions except for the CSS instructions which I didn't exactly understand. I placed the Macro code in the opening HTML - <html<umbraco:Macro Alias="Languages" runat="server" />> but the Hebrew pages are still running LTR: http://www.solarenergypartner.com/.aspx
How to setup the CSS for LTR and RTL (English + Hebrew) site?
Hi,
I am setting up an Umbraco 4.7.1. Hebrew and English site and need some help please configuring the CSS so that the Hebrew pages will run RTL and the English pages LTR. I have two CSS files - the general one and another named CSS - RTL with the following content:
body.rtl{text-align: right; direction: rtl;}
.rtl #search-form input[type=text]{padding: 5px 10px 4px 0;}
.rtl .play-button{float: right; margin: 2px -1px 0 4px;}
.rtl .tit-ico-audio{float: left;}
.rtl td, th{text-align: right;}
.rtl .add-comment-input-container label{right: 0;}
.rtl .free-consultation label{right: -65px;}
.rtl .map-inner p {text-align: right;}
.rtl .top-link{left: 0 !important; float: left !important; text-align: left;}
.rtl .top-ico{float: left; margin: 1px 12px 0 0;}
.rtl .chat {float: left; margin: 1px 9px 0 0;}
.rtl .msg {float: left; margin: 1px 9px 0 0;}
How do I integrate these two CSS files correctly into the site settings/templates so that the English and Hebrew pages will know to run in the correct directions?
Many thanks,
Lloyd
Hi Lloyd
Is there any specific reason why you want to do this using CSS rather than using the the "dir" attribute on the root html element for instance, which seems to be the recommended way of doing it according to this article http://www.w3.org/International/tutorials/bidi-xhtml/ ?
If you're sticking with the CSS approach I think what I would do was to add either a class or an id to the <html> element, which could be the site name, like sitename-uk and sitename-he.
Then you could use the site id like this: #sitename-he .rtl{text-align:right} and #sitename-uk .rtl{text-align:left}.
Could this be an approach perhaps?
Hope this helps.
/Jan
Hi Jan,
Thanks for the info. I'm okay with using the "dir" attribute as recommended.
Please let me know how this should be implemented on Umbraco 4.7.1 using a multi node language setup, including please exactly what code I need to place where.
Many thanks,
Lloyd
Hi Lloyd
I think that you should give it a try.
In order to be able to figure out when to set the direction to rtl you need to be able to decide wether or not you're on the english site or the hebrew site. Usually I put a language picker on the home/root node where I select what language the site is.
You can perhaps use the language dropdown datatype from uComponents, but you can also just create a new datatype based on a dropdown datatype and then add english and hebrew.
On your home/root node you can add a language property where you select the language datatype and give it an alias of "language".
Then using either XSLT or Razor you can figure out what language the site is using and then add the "dir" attribute when needed on the hebrew site.
I would crate a XSLT based macro and name it something like "language".
In the macro I would write something like this...
<xsl:variable name="language" select="$currentPage/ancestor-or-self::Home/language" />
<xsl:if test="language = hebrew">
<xsl:text>dir="rtl"</xsl:text>
</xsl:if>
Then you should be able to call the macro in your template by placing it directly in the opening html tag like...
<html <umbacro:Macro /> >
Please notice this is a bit ugly but I'm not sure how to otherwise do it since you need to add an attribute to some HTML that is defined in the template.
I hope the above makes sense to you - please let me know if something is troubling you.
Cheers,
Jan
...Forgot to mention that the above approach is the same I would use for setting the id's as mentions in the first post - in the macro I would then just check on both languages and set the id's accordingly like id="sitename-he" for instance.
Hope it makes sense.
/Jan
Hi Jan,
I'm happy to go with whatever you suggest, honestly, just need to get the site up in Hebrew for marketing in Israel.
The idea is that you site will be country focused and for Israel I would like to offer an English and Hebrew version. The site structure should then be solarenergypartner.com/israel/hebrew etc.
In Templates I have a Master template and under that a homepage and textpage template. If I understand correctly I will use these same tempates with the additional language code. Also, in content I copied the english tree and renamed the pages in Hebrew based on Eran's recommendation to use the multi node setup.
1. Do I place the additional code on the master template?
2. Is the code placed between:
@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
3. What code must I add here?
4. Do I need to install uComponent?
5. Do I need to add an properties or code to the content pages?
6. Do I need to add an properties to the Document types?
7. How do I setup the macro to give the code you recommended?
Apologies for all the questions but I need very 1-2-3 directions else I won't manage to get it to work.
Many thanks.
Cheers,
Lloyd
Hi Jan.
Great instructions - got it to work, thank you.
Now for some reason the menu isn't working - http://www.solarenergypartner.com/news.aspx
Any idea what could have happened?
Thanks again!
Cheers,
Lloyd
Hi Jan,
Menu fixed but ltr doesn't actually work.
Must have missed something.
Cheers,
Lloyd
Hi Jan,
I followed the instructions except for the CSS instructions which I didn't exactly understand. I placed the Macro code in the opening HTML - <html<umbraco:Macro Alias="Languages" runat="server" />> but the Hebrew pages are still running LTR: http://www.solarenergypartner.com/.aspx
Wish this was all simpler...
Cheers,
Lloyd
Hi Jan,
I manage with the help of my good friend to setup the CC RTL but it seems like I have an issue with the CSS RTL file.
This is the code I have:
body.rtl{text-align: right; direction: rtl;}
.rtl #search-form input[type=text]{padding: 5px 10px 4px 0;}
.rtl .play-button{float: right; margin: 2px -1px 0 4px;}
.rtl .tit-ico-audio{float: left;}
.rtl td, th{text-align: right;}
.rtl .add-comment-input-container label{right: 0;}
.rtl .free-consultation label{right: -65px;}
.rtl .map-inner p {text-align: right;}
.rtl .top-link{left: 0 !important; float: left !important; text-align: left;}
.rtl .top-ico{float: left; margin: 1px 12px 0 0;}
.rtl .chat {float: left; margin: 1px 9px 0 0;}
.rtl .msg {float: left; margin: 1px 9px 0 0;}
Should this code work?
Thanks,
Lloyd
is working on a reply...