RTLing a Hello World WebPage : Getting to Know the HTML/CSS
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
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.
