我正在建立一个多语言网站。一些语言（如希伯来语）从右到左阅读。除了实际文本之外，这些用户习惯于将导航和其他视觉线索颠倒过来。
例如，顶部的主菜单将向右对齐。 “后退”按钮将指向前方，徽标在右上角而不是左上角，等等。
一种解决方案当然是创建一个全新的设计，但这意味着我必须维护 2 个模板。不理想。
我只是在想，是否可以在 CSS 中翻转整个设计？喜欢照镜子吗？
如果这看起来有点牵强，我也愿意接受更好的解决方案。
使用的技术：PHP、Yii、Less.css、jQuery
【问题讨论】：
标签： html css internationalization multilingual right-to-left
你可以试试：
body {
direction:rtl;
}
但这只是给你一个起点……
希望对你有帮助。
【讨论】：
很多网站都包含一个菜单栏和一个内容区域。这些通常是翻转的主要重点领域。 3 行 CSS 应该很容易：
html[dir="rtl"] #menu {
float: right;
}
同样的 CSS 代码可以很容易地适应其他应该移动的区域。真的没有必要维护 2 套模板，除非你硬编码坐标（无论如何这都是个坏主意）。
当然，一定要设置<html dir="rtl">
【讨论】：
可以完全按照您的描述翻转整个网站，但只需几行 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 并使用不同的样式表可能是一个更好的选择，即使它对您来说更麻烦，最终用户会获得更好的体验（不幸的是，我们想要的快速修复并不总是可用）
【讨论】：
p 来修复翻转的文本和其他内容。如果你从不堆叠p 标签，它会像一个魅力一样工作。 （虽然很 hacky ;)）
html {
direction:rtl;
}
这会将页面上的所有内容从右到左反转。您需要针对页面中的每个元素进行调整。
【讨论】：
为数百种语言的维基百科提供支持的软件 MediaWiki 的开发人员开发了一个名为 CSSJanus 的工具，它可以巧妙地将您的 CSS 动态翻转为从右到左的语言：
这已成功用于从右到左语言的维基百科，因此它们几乎不需要重复维护 CSS。
【讨论】：
您可以使用 Seandunwoody 他的回答来翻转整个网站，但这也会反转文本、图标和图像等。
如果您将您的内容放在<p> 和<h1> 2 和 3 个标签中，您不会将它们放在一起（所以没有<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";
}
它所做的基本上是双重镜像技巧，它镜像整个网站，然后将包含您的文本和图像的所有小段落和标题镜像回原始方向，但仍处于反向网站的位置。
Hacky 但它可以工作（虽然在 IE 上不是很好）。
*您还需要将dir='rtl' 添加到html 或body 标记中，以确保文本右对齐并且希伯来语颠倒（英语字符将保持从左到右但右对齐）。
【讨论】：
有一个很棒的魔术工具叫做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 月）搜索时，我发现这个很棒的工具可以为您完成以上所有工作： Take a look at RTLCSS Website
我将它用作命令行，因为我需要对我曾经拥有的库 CSS 进行 RTL，但它可以捆绑在您的构建步骤中。
【讨论】：