您能分享一些在多语言网站中支持 rtl 方向的技巧吗？
除了文本方向之外，是否应该有任何更改，例如菜单标记？ rtl CSS 应该包含在单独的文件中（例如“layout-rtl.css”）还是应该将“rtl”类添加到 body 标记中？我想知道这样的事情。
我发现了一些技巧here，但我非常感谢有人直接提供建议（有人已经以 rtl 语言启动了网站）。
【问题讨论】：
标签： html css multilingual right-to-left bidi
我们所做的是在 php 中声明一些参数，例如：
SIDE : right
OPOSIDE : left
DIR : rtl
OPODIR : ltr
适用于每种网站语言。
我们只处理一个css文件和一个带有div的模板， 我们添加到 css 或模板文件替换占位符
喜欢：
float : {SIDE}
...
然后我们用 php 生成一个真正的 css 文件（替换所有需要替换的文件）， 网站获取属于他的 css 文件。
现在您可以使用 css 框架来做到这一点，例如： 更少，蓝图，XCC
【讨论】：
只要您不在 CSS 中的任何位置指定 text direction = ltr，就 CSS 问题而言，在 body 类中设置它就足够了。
需要考虑的一些事情。图像中的文本使本地化在编辑图像、获取翻译等方面更加耗时。虽然将文本属性设置为 rtl 相当容易，但重新创建图像更加困难。请记住，rtl 语言用户的阅读方向相反，因此在 ltr 语言中出现在右侧的菜单在 rtl 语言中应该出现在左侧。
在 ltr 语言中朝一个方向移动的代码在 rtl 语言中朝相反方向移动。
【讨论】：
由于我在双向网站上做了很多工作，我会告诉你最好的实践（以我的观点），这几乎是 @Haim Evgi 提到的关于 css 预处理器的内容
所以我制作了以下工具来帮助缓解这件事，您可以在那里找到更多详细信息..
我将演示如何使用 Sass 预处理器和我的工具 bi-app-sass 来执行此操作，但您可以参考之前的链接了解 Less 版本
简单的想法是创建三个文件（基本上，它们可以随心所欲地增长..）
app-ltr.scss // ltr interface to be compiled
app-rtl.scss // rtl interface
_app.scss // private file where you will write your styles (won't be compiled)
在app-rtl.scss 中包含以下内容
@import 'bi-app-rtl';
@import 'app';
app-ltr.scss 也一样
@import 'bi-app-ltr';
@import 'app';
现在您所要做的就是在_app.scss 中编写您的样式，但这里唯一的区别是，任何可以具有right/left 值的属性都需要使用自定义mixins 来编写它们，如下所示..
.foo {
display: block;
@include float(left);
@include border-left(1px solid white);
}
编译它们后，您将拥有两个不同版本的样式表app-rtl.css 和app-ltr.css，您就完成了！
希望有所帮助:)
【讨论】：