多语言网站和RTL方向-最佳实践

Question

你能分享一些支持多语言网站的rtl方向的技巧吗？

除了文本方向之外，是否需要进行任何更改，例如菜单标记？rtl CSS应该包含在单独的文件中（如“layout-rtl.css”），还是应该将“rtl”类添加到body标记中？我想知道这样的东西。

我在这里找到了一些提示（链接），但我真的很希望有人亲身提供建议（已经推出了rtl语言的网站的建议）。

- aletzo

Answer 1

由于我经常在双向网站上工作，我将告诉你在这方面的最佳实践（从我的角度来看），这几乎就是 @Haim Evgi 在 css 预处理器方面提到的。

因此，我制作了以下工具来帮助简化这个过程，你可以在里面找到更多详细信息。

• Bi App Sass
• Bi App Less

我将演示如何使用 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值的属性，你需要使用以下自定义Mixin进行编写。

.foo {
  display: block;
  @include float(left);
  @include border-left(1px solid white);
}

一旦你编译它们，你将拥有两个不同版本的样式表 app-rtl.css 和 app-ltr.css，然后你就完成了！

希望这能帮到你 :)

- Anas Nakawa

Answer 2

来自官方W3C：

• 国际化最佳实践：处理XHTML和HTML内容中的从右到左脚本

- Sarfraz

Answer 3

只要您在CSS中没有指定文本方向= ltr，将其设置为body类应该足以解决CSS问题。 请注意，图像中的文本使本地化工作更加耗时，需要编辑图像、获取翻译等。尽管将文本属性设置为rtl相当容易，但重新创建图像则更加困难。请记住，rtl语言用户从相反方向阅读，因此出现在ltr语言中右侧的菜单应该出现在rtl语言中的左侧。在ltr语言中向一个方向移动的跑马灯在rtl语言中会朝相反方向移动。

- NinjaCat

Answer 4

我们所做的是在 PHP 中声明一些参数，例如：

SIDE : right
OPOSIDE : left
DIR : rtl
OPODIR : ltr

针对每种网站语言，我们只处理一个CSS文件和一个带有div的模板，我们在CSS或模板文件中添加替换占位符。例如：

float : {SIDE}
...

我们使用 PHP 生成真正的 CSS 文件（替换所有需要替换的内容），然后网站使用属于它自己的 CSS 文件。

现在你可以使用 CSS 框架，例如：LESS、BLUEPRINT、XCC。

- Haim Evgi