Arabic HTML layout direction with css

2019-04-15 02:08发布

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 ?

4条回答
何必那么认真
2楼-- · 2019-04-15 02:48

you can try

body 
{direction:rtl;}

查看更多
仙女界的扛把子
3楼-- · 2019-04-15 02:49

This wil RTL everything in the page:

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

查看更多
Deceive 欺骗
4楼-- · 2019-04-15 02:54

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>
查看更多
来,给爷笑一个
5楼-- · 2019-04-15 03:02

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.

查看更多
登录 后发表回答