html - CSS 样式表可以是双向的吗？

Question

CSS 可以是双向的，还是样式表本质上与脚本的方向相关（RTL 与 LTR）？

即一个样式表可以同时适用于从左到右（英语）和从右到左（希伯来语）的语言吗？

如果是这样，需要考虑哪些指导方针？

如果不是，如何将 ltr 样式表转换为 rtl？

Answer 1

我以前使用CSSJanus将 ltr 样式表转换为 rtl。它是一个命令行工具，这意味着我每次构建应用程序时都可以运行它，并且只需要维护一个版本的文件。转换将所有 float: left 切换为 float: right （以及其他一些难以猜测的属性，如背景位置）。不要忘记设置方向：ltr; 在您的默认样式表中！

希望你让它工作！

Answer 2

您可以考虑采用 iGoogle 使用的方法，它有一组特殊变量 __BIDI_START_EDGE__, __BIDI_END_EDGE__, __BIDI_DIR__, and __BIDI_REVERSE_DIR__。你像往常一样写你的 CSS 规则，除了你写的不是像 margin-left 这样的东西margin-__BIDI_START_EDGE__。然后编写一些服务器端代码，获取样式表和方向（ltr 或 rtl），并根据需要用值“left”、“right”、“ltr”和“rtl”填充变量。

这不允许您提供单个文件，但它非常健壮，并且它的优点是您不想被翻转的任何内容都可以用文字“左”或“右”来编写。

（请参阅OpenAjaxIDE 邮件列表中的这封电子邮件，其中显示“IBM 的本地化专家对 OpenSocial 中的 BIDI 功能表示赞赏”并建议将它们用于 OpenAjax 项目。）

Answer 3

我不建议使用单个样式表来支持 RTL 和 LTR 样式。您将下载一个大型 CSS 文件，以便在页面中只使用其中的一半。

虽然如果你想这样做，你可以在 html 标记中添加一个类，例如（'rtl' 和 'ltr'），并在样式表中使用，如下所示：

.ltr .class {padding-left:10px;}
.rtl .class {padding-right:10px;}

您可以查看本教程以了解如何“RTL”LTR 页面。