使用 CSS 文件进行站点本地化

Question

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

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

关于如何执行此操作的任何其他建议都会有所帮助。

Answer 1

您可以使用此代码在客户端获取区域设置。定义区域设置后，您可以在标头中动态包含样式表。

if ( navigator ) {
    if ( navigator.language ) {
        return navigator.language;
    }
    else if ( navigator.browserLanguage ) {
        return navigator.browserLanguage;
    }
    else if ( navigator.systemLanguage ) {
        return navigator.systemLanguage;
    }
    else if ( navigator.userLanguage ) {
        return navigator.userLanguage;
    }
}

Answer 2

不确定这是否是您想要的，但几年前我用 VBScript 做到了这一点。不理想，但它对我有用：

弄清楚语言：

<%
Dim sLanguage
sLanguage = Request.QueryString("lang")

Dim userLocale
userLocale=Request.ServerVariables("HTTP_ACCEPT_LANGUAGE")

Dim sDomain
sDomain = Request.ServerVariables("HTTP_HOST")

Dim languages
languages = Split(userLocale, ",", -1)


...

设置样式表...

<% select case MasterLanguage
    case "PORTUGUESE"%>
        <style media="screen" type="text/css">@import "/Includes/css/a_formatting.css";</style>
        <style media="screen" type="text/css">@import "/includes/langs/br/languageSpecific.css";</style>
        <link type="text/css" media="print" rel="stylesheet" href="/Includes/css/print.css" />
<%
case "SIMPCHINESE"
%>
        <style media="screen" type="text/css">@import "/Includes/css/a_formatting_zh-cn.css";</style>
        <style media="screen" type="text/css">@import "/includes/langs/zh-cn/languageSpecific.css";</style>
        <link type="text/css" media="print" rel="stylesheet" href="/Includes/css/print_zh-cn.css" />
<%

如果这有帮助，我可以发布更多片段。

Answer 3

您可以阅读：

• (W3C) 国际化最佳实践：在 XHTML 中指定语言 & ; HTML 内容，
• 用阿拉伯语、希伯来语和其他右语创建 HTML 页面-left 脚本，
• 国际化和本地化（维基百科）。

在您的页面中：

• 每个带有文本的图像都应该被翻译（图像和alt）；每个具有方向性的图像都应该反转（例如：箭头），
• 如果您不想将来遇到麻烦，请尝试避免像 class="left" 这样的类命名。顶部、底部、之前或之后都可以，但左/右不行（编辑：CSS3 中现在使用 start 和 end 来避免 ltr 和 rtl 的这种确切问题。比已经用于带有冒号的伪符号的 *-before 和 *-after 更好）。
• 您必须检查有关 text-align、background-position、float、clear 和显然左和右与位置：绝对/相对;。新的 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) }
or
[lang|="ar"] .yourclass { background: url(images/ar/bg.jpg) }