我希望针对特定语言对以特定方式翻译特定元素。例如,与电影相关的网页,如:
<!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 特定的方法也可能有帮助。
这是您可以做到的一种方法。
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>
我不知道这个问题有什么好的解决方案,尽管你可以尝试利用 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 中有效