Question 259831 in Html Question posted in
Some basic documentation can be found here.

Is it possible in HTML5 to give translation service a hint for translating a specific element

I would like a specific element to be translated in a specific way for a specific language pair. For example, a movie-related web page like:

<!DOCTYPE html>
<html lang="tr">
...
<p>
 <span>Kamera:</span>
 <span translate="no">XYZ</span>
</p>

when translated (by Google) from Turkish to English, it becomes:

Camera: XYZ

which is OK. But when translated to Greek, it becomes:

ΦΩΤΟΓΡΑΦΙΚΗ ΜΗΧΑΝΗ: XYZ

which is not correct in this context and also the letter case becomes strangely UPPERCASE.

So, I would like to be able to give a hint to the translation engine, with a code like this:

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

I know that the HTML code above is invalid. Is there a pure HTML-type method to give such hints to translation engines? A Google-specific method might also help.

Tags:

2

Answers


  1. 0

    This is one way you can do it.

            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>
    Login or Signup to reply.
  2. 0

    I don’t know any good solution to that problem, though you can try to exploit css queries to replace content, something like this:

    <!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>

    it is not very reliable method, but it works at least in chrome

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search