设计双向网站 CSS 最佳实践?
我正在开发一个由四种语言(阿拉伯语、英语、法语和西班牙语)组成的网站(对于不懂阿拉伯语的人来说,阿拉伯语是从右到左的语言)。
基本上从左到右(en、es 和 fr)的网站将具有相同的布局/CSS。
为了处理不同的阿拉伯语风格,我想知道两种方法之间的区别:
1.特定语言/方向类:
将以下类添加到 html
标记,并使用一个简单的文件来处理
- 阿拉伯语
< ;html class="ar rtl" dir="rtl">
- 英语
- 法语
- 西班牙语
2. 使用单独的文件:
在这种情况下,我会使用 common.css 文件来处理所有常见的事情,并加载单独的特定语言/方向文件(例如
arabic.css
或 western.css
),
您认为最好的选择是什么是 ?
谢谢
I am working on a website consists of four languages (Arabic, English, French and Spanish), (Arabic is a right-to-left language for people who don't know that).
Basically left-to-right (en, es and fr) sites will have the same layout/CSS.
in order to handle different arabic styles I am wondering between two methods:
1. specific language/direction class:
adding the following classes to html
tag, and using one simple file to handle that
- arabic
<html class="ar rtl" dir="rtl">
- english
<html class="en ltr">
- french
<html class="fr ltr">
- spanish
<html class="sp ltr">
2. using separate files:
in this case I would use lets say a common.css
file for all common things, and load a separate specific language/direction file (something like arabic.css
or western.css
)
What do you think the best option will be ?
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
选项#2 听起来是更易于管理的解决方案。这样您就可以根据所选语言简单地加载适当的样式表。因为听起来网页中的文本会根据所选语言进行更新(即,它实际上不会被写出两次),两个单独的样式表将允许您修改布局,而不会弄乱 html 标记中的内容。因此,有关如何切换语言的更多信息可能会帮助您获得更好的答案。
Option #2 sounds like the more manageable solution. This way you can simply load the appropriate style sheet based on the language chosen. Since it sound like the text in your webpage updates based on the language selected (ie it is not physically written out twice) two separate style sheets will allow you to modify the layout without messing with the content in the html markup. So more information on how the languages are going to be switch might help you to get better answers.
我不太确定为什么你需要阿拉伯语文本的特定课程。好的,您可能想要修改字体(如字体系列或字体大小),但仅此而已。要切换方向性,您应该使用 dir 属性(即 W3C 建议)。
至于样式元素,如果您确实需要修改每个元素的样式,您可能需要使用通用选择器:
对于给定语言的元素(如果您记得使用 lang 属性),您还可以将通用选择器与 lang 伪代码结合使用-selector(请注意,某些网络浏览器似乎不支持它,尽管从 CSS2 开始就应该支持它):
I am not really sure why you need specific classes for Arabic texts. OK, you might want to modify fonts (as in font-family or font-size) but not much more than that. To switch directionality, you should use dir attribute (that is W3C recommendation).
As for styling elements, if you really need to modify styles for each element, you might want to use universal selector:
For elements in given language (if you remember to use lang attribute), you can also use universal selector in conjunction with lang pseudo-selector (beware that some web browsers does not seem to support it, although it should be supported since CSS2):