在一个 HTML 页面上使用多种语言

问题描述 投票:0回答:5
html multilingual html-encode
5个回答
0
投票

是的。有可能的。您可以使用 Unicode 格式的其他语言文本。在这里查看我为您创建的示例:

代码:

欢迎光临

नमस्कार

வணக்கம்


0
投票

只需使用 UTF-8 作为页面编码即可。浏览器自然会这样做; Unicode(UTF-8 是其代表)就是为此发明的。


0
投票

就像你使用一种语言一样。您只是受到 HTML 文档只有一种字符编码的限制,因此您不能使用 ISO-8859-1 编码来表示法文文本,而使用某些 JIS 编码来表示日文文本,就像您编写两个单独的页面一样。

结论是,如果可能的话,通常应该使用 UTF-8,如果不能,则使用字符引用等解决方法。

您可以而且应该使用

lang
属性来指示每个部分的语言。但这对于基本功能来说并不是必需的,目前这只是良好的创作习惯。


0
投票

一个棘手的方法是设置 CSS,例如:

[lang=en-GB] [lang=fr-FR],
[lang=en-GB] [lang=ja-JP],
[lang=fr-FR] [lang=en-GB],
[lang=fr-FR] [lang=ja-JP],
[lang=ja-JP] [lang=en-GB],
[lang=ja-JP] [lang=fr-FR]
{
    display: none !important;
}

然后用

lang
属性标记你的 HTML,例如:

<div lang="en-GB">
  <p>This text is in English</p>
</div>

<div lang="ja-JP">
 <p>This text in Japanese</p>
</div>

<div lang="fr-FR">
 <p>This text in French</p>
</div>

您可以使用一个简单的 JavaScript 来检测所选语言并更改

HTML
根文档
:root

使用 jQuery,它会是这样的:

    $(document).on('change', 'select[name="lang"]', function(e)
    {
        $(':root').attr('lang', $(this).val() );
    });

并且会自动仅显示正确的本地化版本,而其他版本将不可见。


0
投票

我的解决方案基于雅克的回答:

<!DOCTYPE html>
<html id="html-tag" lang="en">
  <script>
    //Script for multilingual support, note that detects the language from the browser and sets the html page to that one
    const $htmlTag = document.querySelector("#html-tag")
    switch(navigator.language.substring(0,2)) {
      case "es":
        $htmlTag.lang = "es"
        $htmlTag.classList.add("spanishLang")
        break
      default:
        $htmlTag.classList.add("englishLang")
        break
    }
  </script>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style type="text/css">

      body [lang=en], 
      body [lang=es] {
        display: none;
      }

      .spanishLang [lang=es] {
        display: inline;
      }

      .englishLang [lang=en] {
        display: inline;
      }
    </style>
  </head>
<body>
    <div>
      <span lang="en">Settings</span>
      <span lang="es">Configuraciones</span>
    </div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.