4

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

身体{方向：rtl}

任何 float:left 应该是 float:right 反之亦然

任何关于左或右的填充或边距都应该颠倒

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

我的问题是：是否应该更改更多 CSS 属性？

4

4 回答 4

8

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

如果您想手动完成，您可以查看 css 属性列表，例如this，但我个人会考虑使用其中一种在线工具来开始。

CSSJanus通常非常好，但如果你用谷歌搜索的话，我相信还有更多。

祝你好运。

于 2012-09-05T15:27:38.270 回答
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：以像素为单位的水平值- 例如：

background-position: -34px -85px;

在这种情况下，您将不得不手动解决此问题。（见这篇文章）

作为参考：

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

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

于 2012-09-05T17:08:50.080 回答
2

您只是尝试使用从右到左书写，还是尝试镜像网页？

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

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

于 2012-09-05T15:27:47.397 回答
1

你可以试试；

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;
}

这是现场演示；

于 2012-09-05T15:54:55.727 回答