调整网页以支持外语

Question

我创建了一组 13 个 HTML/CSS/JS 模板，用于英语语言的 CMS 集成。

我需要包括对外语的支持，特别是俄语、中文和阿拉伯语。最初的在线搜索尚未找到任何中央资源来指导 HTML 中支持不同语言所需的内容。

我知道我需要查看字体堆栈和字符编码等内容，并且阿拉伯语模板将需要我的整个布局切换的特殊支持，以实现从右到左的阅读风格。

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

Answer 1

步骤 1

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

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

此 DIV 层包含我们的标题。现在，我们决定希望该游戏有多种语言版本。我们的第一步是向 div 添加一个类，以便我们稍后可以识别它：

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

---

步骤 2

准备就绪后，我们就只剩下两步了。首先，我们将创建一个包含翻译的 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>

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

---

步骤 3

完成后，您只需添加 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 读取它 – 您可以使用 这个 jQuery 插件 可以做到这一点。

---

额外技巧

当您添加更多语言时，您会发现短语在某些语言中较长，而在其他语言中较短。我们可能希望为每种语言提供自定义 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 定义放在默认语言 CSS 定义之下。交换这两条线是行不通的。

Answer 2

很抱歉这么晚才回答，但迟到总比不好......:-)

弗朗索瓦的回答是一个简单而快速的解决方案的好解决方案。

如需更完整、更灵活的解决方案（例如，复数形式处理...），请查看：i18next。
它们提供：

• 支持变量
• 支持嵌套
• 支持上下文 支持
• 多种复数形式
• gettext 支持
• sprintf 支持
• 检测语言
• 优雅的翻译查找
• jquery 函数
• 获取字符串或对象树
• 从服务器获取资源文件
• 浏览器中的资源
• 缓存 将丢失的资源发布到服务器
• 高度可配置的
• 自定义发布处理
• 翻译 ui

我自己使用 i18next 解决方案，尽管我个人更喜欢服务器端解决方案以避免客户端的任何额外负担...:-)

NB 我与i18next.com...:-)