8

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

例如，顶部的主菜单将向右对齐。“后退”按钮将指向前方，徽标在右上角而不是左上角等。

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

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

如果这看起来很牵强，我也愿意接受更好的解决方案。

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

4

8 回答 8

10

可以完全按照您的描述翻转整个网站，但几行 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) 有些人似乎对供应商前缀感兴趣

总体而言，在 body 上使用 RTL 并使用不同的样式表可能是一个更好的选择，即使它对您来说更麻烦，最终用户会获得更好的体验（不幸的是，我们想要的快速修复并不总是可用）

于 2013-01-07T11:00:45.610 回答
4

许多网站由菜单栏和内容区域组成。这些通常是翻转的主要重点领域。使用 3 行 CSS 应该很容易：

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

这个相同的 CSS 代码可以很容易地适应其他应该移动的区域。真的不需要维护 2 套模板，除非你硬编码坐标（无论如何这是一个坏主意）。

当然，一定要设置<html dir="rtl">

于 2013-01-07T09:51:00.963 回答
3 
html {
  direction:rtl;
}

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

于 2013-01-07T11:48:09.670 回答
2

MediaWiki 是为数百种语言提供支持的软件，它的开发人员开发了一个名为 CSSJanus 的工具，它可以巧妙地将你的 CSS 动态翻转为从右到左的语言：

https://github.com/cssjanus

这成功地用于从右到左语言的维基百科，因此它们几乎不需要重复维护 CSS。

于 2013-01-07T12:16:04.283 回答
2

你可以试试：

body {
  direction:rtl;
}

但这只会为您提供一个起点...

希望能帮助到你。

于 2013-01-07T09:50:35.090 回答
1

您可以使用 Seandunwoody 他的答案翻转整个网站，但这也会反转文本、图标和图像等。如果您将您的内容放入2<p>和<h1>3 个标签中，而您没有将它们放入彼此中（所以 no <p><p></p></p>），您可以像这样应用 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";
  }

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

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

*您还需要dir='rtl'在htmlorbody标记中添加 ，以确保文本向右对齐并且希伯来语反转（英语字符将保持从左到右但向右对齐）。

于 2016-01-18T09:31:43.283 回答
0

我同意肖恩的回答，它确实有效！但是有一点我想提一下：他需要去掉“margin”和“width”，以使页面更具可读性，但仍然可以翻转。

body { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
于 2022-02-13T00:48:18.493 回答
0

有一个很棒的魔术工具叫做rtlcss TLDR；很久以前，我做了以下事情： 1. 如果一个元素有direction:rtl-> 删除它 2. 如果一个元素没有direction:rtl-> 在大多数情况下添加一个，添加direction:rtl到body 4. 如果元素有align:right/left' -> switch left/right 5. if element hasmargin-right/left ` -> 左/右切换

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

如果您打算使用查找和替换，请小心，因为right&left可以在神秘的地方找到。
例如.copyright { ... }可以变成.copyleft { ... }

今天搜索（2018 年 1 月），我发现这个很棒的工具可以为您完成以上所有工作： 看看 RTLCSS 网站

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

于 2019-01-14T09:37:14.650 回答