是的。有可能的。您可以使用 Unicode 格式的其他语言文本。在这里查看我为您创建的示例:
代码:
欢迎光临
नमस्कार
வணக்கம்
只需使用 UTF-8 作为页面编码即可。浏览器自然会这样做; Unicode(UTF-8 是其代表)就是为此发明的。
就像你使用一种语言一样。您只是受到 HTML 文档只有一种字符编码的限制,因此您不能使用 ISO-8859-1 编码来表示法文文本,而使用某些 JIS 编码来表示日文文本,就像您编写两个单独的页面一样。
结论是,如果可能的话,通常应该使用 UTF-8,如果不能,则使用字符引用等解决方法。
您可以而且应该使用
lang
属性来指示每个部分的语言。但这对于基本功能来说并不是必需的,目前这只是良好的创作习惯。
一个棘手的方法是设置 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() );
});
并且会自动仅显示正确的本地化版本,而其他版本将不可见。
我的解决方案基于雅克的回答:
<!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>