Question

我正在建立一个多语种的网站。有些语言（如希伯来语）从右到左阅读。除了实际文本外，这些用户习惯于将导航和其他视觉线索颠倒过来。

例如，顶部的主菜单将与右侧对齐。 “后退”按钮指向前方，标志位于右上方而不是左上方等。

一个解决方案当然是创建一个全新的设计，但这意味着我必须维护2个模板。不理想。

我只是想，是否可以在CSS中翻转整个设计？喜欢照镜子？

如果这看起来很遥远，我也会接受更好的解决方案。

使用的技术：PHP，Yii，Less.css，jQuery

Answer 1

可以完全按照您的描述翻转整个网站，但有几行CSS请参见此处：http://jsbin.com/aduqeq/5/edit

CSS：

body { 
        margin: 0 auto;
        width: 300px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
      }

然而，这种方法有一些缺点：

1）虽然它在Firefox + Chrome中运行良好，但它只适用于IE8 +（在IE中我的文字看起来很奇怪）期望支持有点不完整（这是一个新的CSS3功能）

2）这里有明显的语义缺点

3）有些人似乎有关于供应商前缀的事情

总体而言，在身体上使用RTL并使用不同的样式表可能是一个更好的选择，甚至认为它对你来说更麻烦，最终用户提供了更好的体验（不幸的是，我们想要的快速修复并不总是可用的）

Answer 2

很多网站都包含菜单栏和内容区域。这些通常是翻转的主要关注领域。 3行CSS应该很容易：

html[dir="rtl"] #menu {
    float: right;
}

可以轻松调整相同的CSS代码以匹配应移动的其他区域。除非你使用硬编码的坐标（这无论如何都是个坏主意），所以真的没有必要维护2套模板。

当然，请务必设置<html dir="rtl">

Answer 3

html {
  direction:rtl;
}

这将从右到左反转页面上的所有内容。您需要为页面中的每个元素调整此值。

Answer 4

您可以尝试：

body {
  direction:rtl;
}

但那只会给你一个起点......

希望它有所帮助。

Answer 5

MediaWiki的开发者，这个以百种语言为维基百科提供支持的软件，开发了一个名为CSSJanus的工具，它可以巧妙地为从右到左的语言翻转你的CSS：

https://github.com/cssjanus

这是从右到左语言成功用于维基百科，因此他们只需要很少的重复维护CSS。

Answer 6

你可以使用Seandunwoody翻转整个网站，但是这样可以反转文本，图标和图像等等。如果您将内容放在和<h1> 2和3标签中，而这些标签没有相互放入（因此没有），您可以像这样应用css：

body,p,h1,h2,h3 { 
    margin: 0 auto;
    width: 300px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
  }

它的作用基本上是双镜像技巧，它反映了整个网站，然后它将包含您的文本和图像的所有小段落和标题反映回原始方向，但仍然处于反转网站的位置。 / p>

Hacky但它有效（虽然在IE上不太好）。

*您还需要将dir='rtl'添加到html或body标记，以确保文本排在右侧，希伯来语翻转（英文字符将保留为对，但正确的权利。）

Answer 7

有一个很棒的魔术工具，叫做rtlcss TLDR；很久以前，我摆脱了做以下事情： 1.如果元素具有Select z.Name, t.Email from ( SELECT t.Name FROM t GROUP BY t.Name HAVING Count(t.[Name])>1 ) as z INNER JOIN t ON z.name=t.name->删除它 2.如果元素没有direction:rtl->加一个在大多数情况下，将direction:rtl添加到direction:rtl 4.如果元素具有body margin-right / left`->左右切换

未处理的限制： 1.静态放置的元素可能未正确放置 2.相对位置可能不正确 3.应该注意HTML中的样式（如果存在，建议移入CSS）

如果打算使用查找并替换，请小心，因为align:right/left' -> switch left/right 5. if element has和right会在神秘的地方出现。
例如left可以成为.copyright { ... }

今天（18年1月）进行搜索时，我发现了一个出色的工具，可以为您完成以上所有操作： Take a look at RTLCSS Website

我将它用作命令行，因为我需要对曾经拥有过的库CSS进行RTL，但是它可以捆绑在您的构建步骤中。

CSS反转整个网站（镜像效果）

7 个答案: