反转CSS属性以更改为RTL

Question

要将网页CSS从LTR更改为RTL，我必须设置或反转以下CSS属性：

机身｛方向：rtl｝

任意浮动：左应为浮动：右，反之亦然

关于左边或右边的任何填充或边距都应该反转

此外，任何图像都应水平反转。

我的问题是：是否还有其他CSS属性需要更改？

Answer 1

text-align、background-position、border位置、left和right位置，基本上是任何具有水平属性的东西。

如果你想手工完成，你可以浏览一个css属性列表，比如这个，但就我个人而言，我会考虑使用其中一个在线工具来开始。

CSSJanus通常都很好，不过如果你用谷歌搜索的话，我相信会有更多

祝你好运。

Answer 2

您只是想使用从右到左的书写方式，还是想镜像网页？

body {
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}

这将生成网页的镜像，但一切仍然正常（例如，链接可以在其新位置单击）

Answer 3

其他几个属性。。。

1. 框阴影和文本阴影

/*将第一个值（阴影的水平偏移）乘以-1*/

`box-shadow: 5px -5px 5px 5px #abc;`

成为

box-shadow: -5px -5px 5px 5px #abc;

和

text-shadow: 2px 2px #FF0000;

成为

text-shadow: -2px 2px #FF0000;

2:边界半径

你需要小心这个，因为改变值以实现rtl在这里的工作方式不同

 border-radius:25px 0px 0 25px;

becomes
border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)

此外，这里有几个提示：

1. 水平位置百分比

如果你有这样的风格：

.style
{
position: absolute;
top: 22%;
left: 32%;
...
}

左边的属性将变成100-32=68%

2.背景位置：以像素为单位的水平值-例如：

background-position: -34px -85px;

在这种情况下，你将不得不手动解决这个问题。（参见本文）

作为参考：

这是一篇关于将网站转换为rtl 的好文章

实际上，整个网站http://rtl-this.com处理rtl问题，所以可以在那里找到很多有用的东西

Answer 4

您可以尝试；

body {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1); /* Gecko */
  -o-transform: scaleX(-1); /* Operah */
  -webkit-transform: scaleX(-1); /* webkit */
  transform: scaleX(-1); /* standard */
  filter: FlipH; /* IE 6/7/8 */
}

这将产生镜像效果这里是一个现场演示。

如果您想从右向左流动字母，可以尝试rtl；如果您想向右浮动项目，可以只使用text-align: right。

如果您希望文本从右边开始，您可以尝试；

body{
    unicode-bidi:bidi-override;
    direction:rtl;
    float: right;
}

这里是现场演示；