logo标签列表

在HTML5中，是否可以为翻译服务提供一个提示，以便翻译特定的元素？

htmltranslationmachine-translation
3
我希望特定的元素以特定的方式在特定的语言对中进行翻译。例如，一个与电影相关的网页，比如：
<!DOCTYPE html>
<html lang="tr">
...
<p>
 <span>Kamera:</span>
 <span translate="no">XYZ</span>
</p>

当从土耳其语翻译成英语时（由谷歌翻译），它变成了：
Camera: XYZ

这没问题。但是当翻译成希腊语时，变成了：
ΦΩΤΟΓΡΑΦΙΚΗ ΜΗΧΑΝΗ: XYZ

这在这个上下文中是不正确的，而且字母大小写变得奇怪地变成了大写。

所以，我希望能够给翻译引擎一个提示，就像这样的代码：

<p>
 <span translate="tr:el:Κάμερα">Kamera:</span>
 <span translate="no">XYZ</span>
</p>

我知道上面的HTML代码是无效的。是否有一种纯HTML类型的方法可以给翻译引擎提供这样的提示？谷歌特定的方法也可能有所帮助。
翻译比这更复杂。你不能仅仅翻译单词，这就是为什么翻译引擎仍然存在很多问题的原因。例如，“safe and sound”不能直接翻译。在这个特定的组合中，它的意思是安全或良好。如果你想要准确的翻译，那么你需要通过真正的翻译人员进行翻译，并为不同的用户提供不同的本地化网页。 - undefined
W3C关于翻译的指南可以在这里找到：https://www.w3.org/International/i18n-drafts/pages/translation.html - undefined
@tacoshy 我的情况是自动翻译引擎缺乏足够的上下文，无法找到那个单词的正确含义。 - undefined
你想要实现自定义翻译吗？对于任何HTML元素。 - undefined
@iDibya.com 是的。我需要为一个特定的元素进行定制翻译，就像我给出的例子一样。 - undefined
这有点困难，因为所有的浏览器都使用不同的翻译方法，而且没有任何标准，但你可以分别为每个浏览器进行翻译。 - undefined
4个回答
1
我对这个问题没有什么好的解决方案，不过你可以尝试利用CSS查询来替换内容，类似这样的方式： 

<!DOCTYPE html>
<html lang="tr">
<head>
<title>test</title>
<style>
:lang(el) span[data-translate-el-camera] span {
    display: none;
}
:lang(el) span[data-translate-el-camera]:after {
    content: "Κάμερα";
}
</style>
</head>
<body>
<p>
 <span data-translate-el-camera><span>Kamera:</span></span>
 <span translate="no">XYZ</span>
</p>
</body>

这不是非常可靠的方法，但至少在Chrome浏览器中可以使用。
谢谢。有点尴尬，但非常有趣。是否可以将head部分的样式定义替换为span元素中的内联定义？ - undefined
@FedKad 不，据我记得，查询只能放在样式/CSS文件中。 - undefined
1
是的，我们可以使用MutationObserver来实现这个功能，当任何元素的class或_msttexthash属性发生变化时，这段代码将会运行。 Chrome在翻译时会给文档添加translated-ltr类， 而Edge在翻译时会给元素添加_msttexthash属性。
const attributeAddedCallback = function (mutationsList) {
    // Now this will run on any class change or _msttexthash attribute change
};
// Observe for changes on translate
const observer = new MutationObserver(attributeAddedCallback);
observer.observe(langspan, { attributes: true, subtree: true, attributeFilter: ['class', '_msttexthash'] });

现在我们必须检查页面是否已经翻译完成。
const attributeAddedCallback = function (mutationsList) {
    // For Chrome
    if (document.documentElement.className.match('translated-ltr')) {
        // Translated
        dotranslations();
    } else {
        // For Edge
        var translated = false;
        for (const mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === '_msttexthash') {
                translated = true;
            }
        }
        if (translated) {
            // Translated
            dotranslations();
        }
    }
};
// Observe for changes on translate
const observer = new MutationObserver(attributeAddedCallback);
observer.observe(langspan, { attributes: true, subtree: true, attributeFilter: ['class', '_msttexthash'] });

现在我们可以通过使用控制文本来检测页面翻译成哪种语言 - 如果“language”翻译成“dil”，那么页面翻译成土耳其语 - 如果“language”翻译成“Γλώσσα”，那么页面翻译成希腊语 ...
langs = { 'dil': 'tr', 'language': 'en', 'Γλώσσα': 'el' }; // Add as you need

var langspan = document.createElement("span");
langspan.innerText = "dil";
langspan.lang = "tr";
langspan.translate = "yes";

function dotranslations() {
    var lang = langs[langspan.innerText];
    document.querySelectorAll("*").forEach(element => {
        if (element.hasAttribute('translate-suggestion-' + lang)) {
            element.innerText = element.getAttribute('translate-suggestion-' + lang);
        }
    });
}

现在开始编写代码：

translationsuggests.js

langs = { 'dil': 'tr', 'language': 'en', 'Γλώσσα': 'el' };

// Language control span that hidden
var langspan = document.createElement("span");
langspan.style.position = "fixed";
langspan.style.opacity = "0";
langspan.style.pointerEvents = "none";
langspan.innerText = "dil";
langspan.lang = "tr";
langspan.translate = "yes";
document.body.appendChild(langspan);

function dotranslations() {
    var lang = langs[langspan.innerText];
    document.querySelectorAll("*").forEach(element => {
        if (element.hasAttribute('translate-suggestion-' + lang)) {
            element.innerText = element.getAttribute('translate-suggestion-' + lang);
        }
    });
}

const attributeAddedCallback = function (mutationsList) {
    // For Chrome
    if (document.documentElement.className.match('translated-ltr')) {
        // Translated
        dotranslations();
    } else {
        // For Edge
        for (const mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === '_msttexthash') {
                // Translated
                dotranslations();
            }
        }
    }
};
// Observe for changes on translate
const observer = new MutationObserver(attributeAddedCallback);
observer.observe(langspan, { attributes: true, subtree: true, attributeFilter: ['class', '_msttexthash'] });

使用方法
<html lang="tr">
<body>
    <script src="path/to/translationsuggests.js"></script>
    <p translate="yes" translate-suggestion-el="Κάμερα:" translate-suggestion-en="Cam:">Kamera:</p>
    <span translate="no">XYZ</span>
</body>
</html>

编辑

我说过“Chrome会给文档添加translated类”，但实际上它添加的是translated-ltr，抱歉，是我的错误。

相当复杂，但有趣。 - undefined
0
虽然还不完全符合我最初提出的问题，但我试着改进了@IłyaBursov的回答，具体如下： 

<!DOCTYPE html>
<html lang="tr">
<head>
<title>test</title>
<style>
/* by default display only "tr" and nothing else: */
[class^="lang_"] {  display: none;  }
.lang_tr {  display: inline;  }

/* Now enable only the relevant language content: */
:lang(el) > .lang_el {  display: inline;  }
:lang(el) > .lang_tr {  display: none;  }

:lang(en) > .lang_en {  display: inline;  }
:lang(en) > .lang_tr {  display: none;  }
</style>
</head>
<body>
<p>
 <span class="lang_tr">Kamera</span>
 <span class="lang_el">Κάμερα</span>
 <span class="lang_en">Cam</span>
 <span translate="no">XYZ</span>
</p>
</body>

这样一来，我摆脱了将"content"放在CSS中的做法，CSS代码现在是"静态"的，而HTML代码更容易理解。
0
这是你可以做的一种方式。 

        function customizeTranslations() {
            const kameraElement = document.getElementById('kamera');
            const xyzElement = document.getElementById('xyz');

            const customTranslations = {
            'Kamera:': 'Camera:',
            'XYZ': 'Custom Translation for XYZ'
            };
            if (kameraElement.textContent in customTranslations) {
                kameraElement.textContent = customTranslations[kameraElement.textContent];
            }
            if (xyzElement.textContent in customTranslations) {
                xyzElement.textContent = customTranslations[xyzElement.textContent];
            }
        }
    <h1>Translation with Hints</h1>
    <p>
        <span id="kamera">Kamera:</span>
        <span id="xyz">XYZ</span>
    </p>
    <button onclick="customizeTranslations()">Customize Translations</button>

谢谢提供代码。但是，那不是我想要的东西。整个页面正在被Google翻译自动翻译。我只是想给机器翻译一个指引，让它朝着正确的方向前进（无需用户操作）。 - undefined
据我所知，目前还没有一种标准化的HTML属性或方法可以为网页上的特定元素提供给机器翻译服务（如Google Translate）的提示。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接