Submitted by layalk on Fri, 20/11/2009 - 10:31
Now that everything is ready (a browser and a simple editor), we can start RTLing the simple hello world page. I'll be using Firefox and Notepad++ in this tutorial.
The SRC of this tutorial is available at the end of this post. You'll find the HTML file with both LTR and RTL stylesheets and images.
The RTLing process involves modifying the CSS only. If you're not familiar with the difference between HTML and CSS, here it is:
HTML is for markup and CSS is for styling. In English:
With HTML, you just specify the purpose of your content, this block is a "link", another block is a "paragraph", some other block is a "table"...etc
While with CSS, you specify the "style" of this block of content. That link is "red and bold", that paragraph is "aligned to the right" and has a "blue background", that table has a "height of 400px". etc.
That's why when we want to flip a page, we only change the CSS. A paragraph won't turn into a table in RTL, but its text alignment for example will change.
So Let's start now:
The HTML
Download the source file. And Open the file index.html in Notepad to view the following code
Hello World - RTL This Hello World Title!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra est et erat euismod blandit congue metus porttitor. Duis sollicitudin, ante at tincidunt accumsan, nisl leo rhoncus mi, id tempus dui velit a risus. Aenean gravida, dolor ac mollis fermentum, felis metus laoreet felis, vitae ullamcorper justo turpis sit amet nisi. Mauris laoreet turpis eget elit sodales eget vehicula sem consequat! Aliquam erat volutpat. Quisque auctor, metus non molestie semper, felis diam tempus leo, eget rutrum est arcu vitae orci. Mauris vitae mi in eros semper consectetur nec vulputate lectus! Suspendisse ac auctor libero. Duis ut neque euismod leo aliquet bibendum quis in enim. Quisque iaculis nisi tortor. Praesent quis tortor est. Integer eleifend iaculis magna. In et urna ac lectus rhoncus accumsan? Cras sodales lectus ac ligula dignissim sit amet luctus nisi dignissim! Ut neque metus, sagittis ut blandit at, gravida at urna.
- Lorem ipsum dolor sit amet
- Metus non molestie semper, felis diam tempus leo, eget rutrum est arcu vitae orci. Mauris vitae mi in eros semper consectetur nec vulputate lectus
- Felis metus laoreet felis, vitae ullamcorper justo turpis sit amet nisi. Mauris laoreet turpis eget elit sodales
- Mauris laoreet turpis eget elit sodales eget vehicula sem consequat! Aliquam erat volutpat. Quisque auctor
- Ut neque metus, sagittis ut blandit at, gravida at urna.
You'll notice inside the <head> tag (between the <head> and </head> lines) this line:
This is where the CSS file is included. Without this line, the Page will look like this (click to enlarge):
The CSS
The linked CSS file is located at "ltr/styles.css". Open it in Notepad++ to view this code:
html {}
h1,h2,h3,h4,h5,h6 {margin:0; padding:0;}
body {color:black; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
a { color:#6D6E71;text-decoration:none;}
a:hover{color:#6DA6E2; text-decoration:underline;}
#body ul li {
list-style:none;background:transparent url('bullet.gif') left .5em no-repeat; padding-left:10px;}
#wrap {width:770px; margin:0 auto;padding:10px 0;}
#header,#body,#footer{margin:0 20px;}
#header {border-bottom:1px dotted #6DA6E2; overflow:hidden;}
#logo {float:left;font-size:2em; color:#6DA6E2; width:25%; text-align:center;}
#topnav {float:right; list-style:none;}
#topnav li {float:right; margin:0 5px; border-bottom:1px solid #6DA6E2;}
#body {overflow:hidden;}
#content { width:75%; float:left;}
#sidebar { width:24%; float:right;}
#sidebar ul {
list-style:none;
margin-left:10px; padding:0;
}
#sidebar ul li{border-bottom:4px solid #EEEEEE; padding-bottom:5px; margin-bottom:5px;
}
#sidebar ul li h3 { font-size:1.2em;margin:0; padding:0;}
h2 { font-size:1.3em;color:#6DA6E2; margin:1em 5px;}
#footer {border-top:1px solid #6DA6E2;padding-top:10px;}
#copyrights{float:right; margin:0; padding:0;}
#footer-links{ float:left; width:50%;}
#footer-links ul { list-style:none; margin:0; padding:0;}
#footer-links ul li {float:left; margin-right:10px; border-bottom:1px solid #6DA6E2;}