logo标签列表

双向网站的样式设计CSS最佳实践？

htmlcsslocalizationbidirectional
6

我正在开发一个包含四种语言（阿拉伯语、英语、法语和西班牙语）的网站，其中阿拉伯语是一种从右到左书写的语言（对于不懂的人来说）。

基本上，从左到右的网站（英语、西班牙语和法语）将具有相同的布局/CSS样式。

为了处理不同的阿拉伯语风格，我在两种方法之间犹豫：

1. 特定的语言/方向类：

将以下类添加到 html 标签中，并使用一个简单文件来处理它

  • 阿拉伯语 <html class="ar rtl" dir="rtl">
  • 英语 <html class="en ltr">
  • 法语 <html class="fr ltr">
  • 西班牙语 <html class="sp ltr">

2. 使用单独的文件：

在这种情况下，我会使用一个公共的CSS文件来处理所有常见的东西，并加载一个单独的特定语言/方向的文件（例如 arabic.css 或 western.css）

你认为哪种方法最好？

谢谢

2个回答
2

第二个选项似乎是更易处理的解决方案。这样，您只需根据所选择的语言加载相应的样式表即可。由于您网页中的文本似乎会根据所选择的语言更新（即并非在HTML标记中实际写出两次），因此使用两个单独的样式表将允许您修改布局而不会影响HTML标记中的内容。因此，有关如何切换语言的更多信息可能会帮助您获得更好的答案。

1

我不是很确定为什么你需要针对阿拉伯文本具体的类。好吧，你可能想要修改字体（比如font-family或font-size），但也不会更多。要切换方向，您应该使用dir属性（即W3C建议）。

至于样式元素，如果您确实需要为每个元素修改样式，您可能需要使用通用选择器：

* { font-family: Verdana; }

对于给定语言中的元素（如果您记得使用lang属性），您也可以在lang伪类选择器与通用选择器一起使用（请注意，某些Web浏览器似乎不支持它，尽管它应该受到CSS2的支持）：

*:lang(ar) { font-size: 14px; }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接