造型双向网站CSS最佳实践?

时间:2011-06-28 09:47:10

标签: html css localization bidirectional

我正在一个网站上工作,包括四种语言(阿拉伯语,英语,法语和西班牙语),(阿拉伯语是一种从右到左的语言,供不知道的人使用)。

基本上,从左到右(en,es和fr)网站将具有相同的布局/ CSS。

为了处理不同的阿​​拉伯风格,我想知道两种方法:

1。特定语言/方向类:

将以下类添加到html标记,并使用一个简单文件来处理

  • arabic <html class="ar rtl" dir="rtl">
  • english <html class="en ltr">
  • french <html class="fr ltr">
  • 西班牙语<html class="sp ltr">

2。使用单独的文件:

在这种情况下,我会使用let common.css文件来表示所有常见内容,并加载单独的特定语言/方向文件(类似arabic.csswestern.css

您认为最佳选择是什么?

由于

2 个答案:

答案 0 :(得分:2)

选项#2听起来像是更易于管理的解决方案。这样,您只需根据所选语言加载相应的样式表。由于它听起来像您网页中的文本根据所选语言更新(即它没有实际写出两次),因此两个单独的样式表将允许您修改布局而不会弄乱html标记中的内容。因此,有关语言如何切换的更多信息可能有助于您获得更好的答案。

答案 1 :(得分:1)

我不确定为什么你需要阿拉伯语文本的特定课程。好的,您可能想要修改字体(如font-family或font-size)但不多于此。要切换方向性,您应该使用dir属性(即W3C recommendation)。

至于样式元素,如果你真的需要修改每个元素的样式,你可能想要使用通用选择器:

* { font-family: Verdana; }

对于给定语言的元素(如果你记得使用lang属性),你也可以将通用选择器与lang伪选择器一起使用(请注意,某些Web浏览器似乎不支持它,尽管应该支持它CSS2):

*:lang(ar) { font-size: 14px; }