使用CSS文件进行网站本地化 [英] Using a CSS File for site localization

问题描述

我使用两种不同的语言（英语和波斯语）创建一个带有ASP.net MVC 2.0的网站。我想为这些语言设置两种不同的布局，英语从左到右，波斯语有右到左的布局。

我脑海里想的是，如果我可以有两个不同的CSS文件，比如当你使用字符串或图像本地化来完成网站的工作时，问题是我需要知道如何做到这一点！

解决方案

您可以阅读以下内容：

• （ W3C）国际化最佳实践：指定XHTML中的语言& HTML内容，


• 创建阿拉伯文，希伯来文和其他从右到左脚本的HTML页面， 国际化和本地化（Wikipedia）。

在您的网页中：

• 每张带有文字的图片都应该被翻译（图片和 alt ）;每个有方向性的图像都应该颠倒过来（例如：一个箭头）。
  
• 尽量避免类命名，比如 class =left不希望未来头疼。顶部，底部，之前或之后是好的，但不是左/右（编辑：开始和结束现在用于CSS3以避免ltr和rtl的确切问题。可能比 *更好 - 和 *之前 - 已被使用对于冒号冒号）。
  
• 您必须检查每条关于 text-align ， ，，清除，显然 left 和右与位置：绝对/相对; 。

• 不同的字体需要不同的字体大小（尽管这个问题主要涉及亚洲字体）。


• 新的CSS3说明也要复习（动画等）至于其他支持的语言，模板中的许多文本都应该被翻译。

正如上面的链接所述，HTML属性使用 dir =rtl。您还需要一个类（在 body 或某些包含 div ）上充当设计需要的巨型开关。像

  .en .yourclass {background：url（images / en / bg.jpg）} 
 .ar .yourclass {background：url（images / ar / bg.jpg）} 
  

包括IE8在内。

 ：lang（ar）.yourclass {background：url（images / ar / bg.jpg） } 
或
 [lang | =ar] .yourclass {background：url（images / ar / bg.jpg）} 
  

I'm creating a website with ASP.net MVC 2.0 which uses two different languages (English and Persian). I want to have two different layouts for these languages, English has a left to right and Persian has a right to left layout.

What came to my mind was, if I could have two different css files, like when you do it with string or image localization will do the work for the site, the problem is I need to know how to do this!

Any other suggestions on how to perform this would be helpful.

解决方案

You can read about:

• (W3C) Internationalization Best Practices: Specifying Language in XHTML & HTML Content,
• Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts,
• Internationalization and localization (Wikipedia).

In your pages:

• every image with text should be translated (image and alt); every image with directionality should be reversed (ex: an arrow)
• try to avoid class naming like class="left" if you don't want future headaches. Top, bottom, before or after are OK but not left/right (edit: start and end are now used in CSS3 to avoid this exact problem of ltr and rtl. May be better than *-before and *-after already used for pseudos with colons).
• you'll have to check each CSS instruction about text-align, background-position, float, clear and obviously left and right with position: absolute/relative;. New CSS3 instructions are to review too (Animations, etc).
• different fonts need different font sizes (though this problem concerns asiatic fonts mainly)
• as for any other supported language, many bits of text in templates should be translated.

As noted in the links above, the HTML attribute dir="rtl" is used. You'll also need a class (on body or some containing div to act like a giant switch for your design needs. Like

.en .yourclass { background: url(images/en/bg.jpg) } 
.ar .yourclass { background: url(images/ar/bg.jpg) }

The attribute selector does the same, since IE8 included.

:lang(ar) .yourclass { background: url(images/ar/bg.jpg) }
or
[lang|="ar"] .yourclass { background: url(images/ar/bg.jpg) }

这篇关于使用CSS文件进行网站本地化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！