4

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

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

我在这里找到了一些提示，但我真的很感激有人的第一手建议（有人已经推出了 rtl 语言的网站）。

4

4 回答 4

4

因为我在双向网站上工作了很多，我会告诉你最好的实践（从我的角度来看），这几乎是@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您就完成了！

希望有帮助:)

于 2012-11-09T21:21:45.040 回答
3

来自官方 W3C：

于 2010-08-03T08:55:30.690 回答
2

只要您不在 CSS 中的任何位置指定 text direction = ltr，就 CSS 问题而言，在 body 类中设置它就足够了。

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

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

于 2010-08-09T14:56:25.590 回答
1

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

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

适用于每种网站语言。

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

像 ：

float : {SIDE}
...

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

现在您可以使用 css 框架来做到这一点：LESS、BLUEPRINT、XCC

于 2010-08-03T09:07:33.053 回答