HTML5 是否可以为翻译服务提供翻译特定元素的提示

问题描述 投票:0回答:2

我希望针对特定语言对以特定方式翻译特定元素。例如,与电影相关的网页,如:

<!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类型的方法可以给翻译引擎这样的提示? Google 特定的方法也可能有帮助。

html translation machine-translation
2个回答
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>


0
投票

我不知道这个问题有什么好的解决方案,尽管你可以尝试利用 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 中有效

© www.soinside.com 2019 - 2024. All rights reserved.