调整网页以获得外语支持

Question

我已经为英语语言的CMS集成创建了一组13个HTML/CSS/JS模板.

我需要包括对外语的支持,特别是俄语,中文和阿拉伯语.在线初始搜索没有找到任何中心资源,以获得有关支持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>

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

第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定义放在默认语言下.切换这两条线是行不通的.