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

Question

您能分享在多语言网站中支持RTL方向的任何提示吗？

除了文字方向之外，是否有任何更改，例如菜单标记？ rtl CSS应该包含在一个单独的文件中（比如“layout-rtl.css”）或者一个“rtl”类应该被添加到body标签中？我想知道这样的东西。

我发现了一些提示here，但我真的很感谢某人的建议（一个已经用rtl语言启动了网站的人）。

Answer 1

我们做的是在PHP声明一些参数：

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

每个站点的语言。

，我们只处理一个CSS文件，并用div的一个模板， 我们添加CSS或模板文件替换占位

，如：

float : {SIDE} 
... 

，我们产生一个真正的css文件PHP（替换所有需要替换的）， 和该网站采取属于他的CSS文件。

现在

您就可以使用CSS框架做到这一点： LESS，图纸，XCC

Answer 2

来自官方的W3C：

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

Answer 3

只要你不指定文字方向=在你的CSS升的任何地方，在人体内类设置应该足够在CSS问题方面。

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

在ltr语言中朝一个方向移动的代码在rtl代码中相反地移动。

Answer 4

，因为我的工作双向网站很多，我要告诉你的最佳实践（形成我的观点），在此，这几乎是什么提到@Haim Evgi关于CSS预处理器

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

• Bi App Sass
• Bi App Less

我要去演示如何使用的Sass预处理器&我的工具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值，你需要使用自定义混合编写它们如下。

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

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

希望帮助:)