CODEWITHSUNDEEP
htmlcsslayout
pentanol
pentanol

Reputation: 419

Arabic HTML layout direction with css

To change the text direction to right to left it is known that we the following CSS code:

direction:rtl; //displays text direction as right to left

Is there any way in css to invert the total page layout direction to right to left including lists ?

Upvotes: 6

Views: 26524

Answers (4)

Basheer
Basheer

Reputation: 328

This wil RTL everything in the page:

body {
  margin: 50px;
  direction: rtl;
}
<p>معادن</p>
<ol>
  <li>ذهب</li>
  <li>فضة</li>
  <li>حديد</li>
</ol>

Upvotes: 4

Devender Kumar
Devender Kumar

Reputation: 136

Add dir="rtl" to the html tag any time the overall document direction is right-to-left. This sets the base direction for the whole document.

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>

Upvotes: 11

BrendanMcK
BrendanMcK

Reputation: 14498

Your best bet is likely to use a CSS processor tool similar to Google's CSS Janus; this type of tool does several things to flip a site's CSS from left-to-right oriented to right-to-left oriented, including adding direction:rtl, but also flipping left/right position and size values - so, for example, a DIV placed 4px from the left edge of its parent ends up instead being placed 4px from the right.

This means you'll end up with two stylesheets for your site: the original one, to use in left-to-right version, and a processed version to use in the right-to-left version.

Upvotes: 1

Besada Hanna
Besada Hanna

Reputation: 31

you can try 

body 
{direction:rtl;}

Upvotes: 3

Related Questions