Html 调整网页以支持外语

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

我需要包括对外语的支持，特别是俄语、汉语和阿拉伯语。最初的在线搜索还没有找到任何关于支持HTML中不同语言所需的指导的中心资源

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

有人能给我指出一些可靠的资源，让我以符合标准的方式完成这项工作吗？所有模板必须满足WCAG 2.0 AA要求。

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

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

这就是所需的全部代码–这次请再次查看并添加注释：

// 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>

我们可以通过PHP轻松设置：

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

如果我们想让意大利人有一个更小的字体呢？容易的！我们需要对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定义置于默认定义之下。把这两行字调换一下是行不通的。

很抱歉回答得太晚，但迟做总比不做强…：-）

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

要获得更完整、更灵活的解决方案（例如，使用复数形式处理…），请查看：。 它们提供：

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

我自己也在使用i18next解决方案，不过我个人更喜欢服务器端解决方案，以避免客户端的任何额外负担…：-）

---

注意，我与i18next.com完全没有关系…：-）

只是一个提示：正确地关注UTF-8编码的使用。

var language = 'italian';

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

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

$(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);
            });
        }
    });
});

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