html - 调整网页以支持外语

Question

我已经用英语创建了一套 13 个 HTML/CSS/JS 模板用于 CMS 集成。

我需要包括对外语的支持，特别是俄语、中文和阿拉伯语。初步在线搜索没有找到任何中央资源来指导在 HTML 中支持不同语言需要什么。

我知道我需要查看我的字体堆栈和字符编码之类的东西，阿拉伯语模板需要特别支持我的整个布局切换以实现从右到左的阅读风格。

任何人都可以指出一些可靠的资源来以符合标准的方式执行此操作吗？所有模板必须符合 WCAG 2.0 AA 要求。

Answer 1

第一步

首先，假设我们有以下 HTML:

<div>Hello there, how are you?</div>

这个 DIV 层包含我们的标题。现在，我们决定要让这个标题以多种语言提供。我们的第一步是向 div 添加一个类，以便我们稍后可以识别它:

<div class="title">Hello there, how are you?</div>

---

第二步

准备就绪后，我们只差两步了。首先，我们将创建一个包含我们的翻译的 XML 文件。在这个 XML 文件中，我们可以存储多个短语的翻译，我们可以在以后轻松添加更多语言。我们将此文件保存为 languages.xml 并将其保存在与我们的 HTML 文件相同的文件夹中。

<?xml version="1.0" encoding="UTF-8"?>
<translations>
    <translation id="title">
        <english>Hello there, how are you?</english>
        <italian>Ciao, come stai?</italian>
    </translation>
</translations>

您将在 <translations></translations> 之间存储所有要翻译的短语标签。您将每个短语存储在 <translation></translation> 中标签。为了识别正在翻译的短语，我们需要添加 id=”title” .该名称应与您在 HTML 中分配的 CSS 类的名称相匹配。最后，我们可以将翻译放在里面，并用定义语言的标签包围它们。例如，我们需要将意大利语文本放在 <italian></italian> 之间。标签。请记住，您可以轻松更改这些标签的名称——例如，您可以选择使用 <eng></eng>和 <ita></ita>相反。

---

第三步

完成后，您只需添加 jQuery 即可读取 XML 文件并根据所选语言替换 DIV 的内容。给你:

<script src="path/to/jquery.min.js"></script>
<script type="text/javascript" language="javascript">

$(function() {
    var language = 'italian';
    $.ajax({
        url: 'language.xml',
        success: function(xml) {
            $(xml).find('translation').each(function(){
                var id = $(this).attr('id');
                var text = $(this).find(language).text();
                $("." + id).html(text);
            });
        }
    });
});
</script>

这就是所有需要的代码——这次再看一遍，加上注释:

// Include jQuery script
<script src="path/to/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

//  $(function() { should be used
// each time you use jQuery

$(function() {

    // Here we set the language
    // we want to display:

    var language = 'italian';

    // In order to get the translations,
    // we must use Ajax to load the XML
    // file and replace the contents
    // of the DIVs that need translating

    $.ajax({

        // Here, we specify the file that
        // contains our translations

        url: 'language.xml',

        // The following code is run when
        // the file is successfully read

        success: function(xml) {

            // jQuery will find all <translation>
            // tags and loop through each of them

            $(xml).find('translation').each(function(){

                // We fetch the id we set in the XML
                // file and set a var 'id'

                var id = $(this).attr('id');

                // This is the most important step.
                // Based on the language we can set,
                // jQuery will search for a matching
                // tag and return the text inside it

                var text = $(this).find(language).text();

                // Last, but not least, we set the
                // contents of the DIV with a
                // class name matching the id in the
                // XML file to the text we just
                // fetched

                $("." + id).html(text);
            });
        }
    });
});

</script>

就是这样!刷新您的页面，应该加载意大利语版本，替换默认的英语版本。在上面的例子中，我们手动设置了语言:

var language = 'italian';

我们可以通过 PHP 轻松设置它:

var language = '<?php echo $sLanguage; ?>';

或者通过从 URL 读取它——你可以使用 this jQuery Plugin这样做。

---

奖励技巧

当您添加更多语言时，您会发现某些语言的短语更长，而其他语言的短语更短。我们可能希望为每种语言定制 CSS。以上面的例子为例，我们最初会有以下内容:

div.title { font-size:30px; }

如果我们希望意大利语的字体更小怎么办？简单的!我们需要对我们的 jQuery 做一点修改:

$(function() {
    var language = 'italian';
    $.ajax({
        url: 'language.xml',
        success: function(xml) {
            $(xml).find('translation').each(function(){
                var id = $(this).attr('id');
                var text = $(this).find(language).text();
                $("." + id).html(text);

                // Here's the new line we're adding.
                // We are assigned the DIV a new class
                // which includes the old class name
                // plus a "_language" - In this case,
                // loading Italian would assign the DIV
                // a "title_italian" class

                $("." + id).addClass(id + '_' + language);
            });
        }
    });
});

现在我们已经添加了该行，我们可以添加以下 CSS:

div.title { font-size:30px; }
div.title_italian { font-size:20px; }

您的意大利语文本现在应该更小了。 注意:为了使其正常工作，您必须将新的语言 CSS 定义置于默认语言的下方。切换这两行是行不通的。