Question

您是否可以分享在多语种网站中支持rtl方向的任何提示？

除文字方向外，是否应对菜单加价进行任何更改？ rtl CSS应该包含在一个单独的文件中（比如“layout-rtl.css”），还是应该在body标签中添加“rtl”类？我想知道这样的事情。

我找到了一些提示here，但我非常感谢某人的建议（有人已经用rtl语言推出了一个网站）。

Answer 1

因为我在双向网站上工作很多，所以我会在这里告诉你最佳实践（从我的观点来看），这几乎是@Haim Evgi提到的关于css预处理器的内容

所以我做了以下工具来帮助缓解这个问题，你可以在那里找到更多细节..

我将演示如何使用Sass预处理器＆amp; amp;我的工具bi-app-sass，但您可以参考较小版本

的上一个链接

简单的想法是创建三个文件（基本上，它们可以随意增长..）

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＆amp; app-ltr.css你完成了！

希望有所帮助：）

Answer 2

来自官方W3C：

Internationalization Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content

Answer 3

只要你没有在CSS的任何地方指定text direction = ltr，在CSS问题方面将它设置在body类中就足够了。

要考虑的一些事情。图像中的文本使得本地化在编辑图像，获得翻译等方面更耗时。虽然将文本属性设置为rtl相当容易，但重新创建图像更加困难。请记住，rtl语言用户以相反的方向阅读，因此以ltr语言显示在右侧的菜单应以rtl语言显示在左侧。

在ltr langauges中向一个方向移动的代码在rtl中向相反方向移动。

Answer 4

我们所做的是在php中声明一些参数：

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

适用于每种网站语言。

我们只处理一个css文件和一个带div的模板，我们添加到css或模板文件替换占位符

喜欢：

float : {SIDE}
...

我们用php生成一个真正的css文件（替换所有需要替换的内容），并且该站点获取属于他的css文件。

现在你可以使用css框架来完成它： LESS，BLUEPRINT，XCC

多语言网站和rtl指导 - 最佳实践

4 个答案: