Question

我有一个动态创建的网页。大多数文本都是使用翻译机制插入的。但是，当然现在必须首先翻译文本。因此，除了在单独的工具中进行批量翻译之外，我还希望允许在页面中发生翻译。

所以（我认为）我需要做的是，以某种方式标记文本，应该翻译并使用javascript创建一个按钮，显示翻译小部件并填写元信息。到现在为止还挺好。问题是，文本不仅可能出现在html节点内的文本节点中，还可能出现在属性中。这就是为什么我的想法（使用一些html标签，如<translate metadata=.../>或甚至使用HTML注释）不起作用。此外，将“将此数据置于当前html-tag之外”是不可行的，因为在整个代码中都使用了转换例程。

是否有另一种方法可以将元信息透明地放入html代码中？也许看不见的unicode字符？（我正在使用utf-8）

Answer 1

在HTML5中，有全局translate attribute：

translate属性是一个枚举属性，用于指定在页面本地化时是否要翻译元素的属性值及其Text节点子项的值，或者是否保持不变。 / p>

您必须将translate="no"添加到不应翻译的每个元素中（请注意，子元素会继承该值）。

对于应该翻译属性值而不是元素内容的角落情况，您可以在内容周围添加span元素，例如：

<b title="translate this, please" translate="yes"><span translate="no">Don't translate this</span></b>

对于更复杂的案例，您可以查看W3C Recommendation Internationalization Tag Set (ITS)。

Answer 2

我认为你正试图重新发明轮子。谷歌有一个很棒的翻译API，我认为你应该使用它。

https://developers.google.com/translate/

Answer 3

我设法使用零长度unicode字符自己解决问题。

三个字符\u200B（零宽度空间，ZWSP），\u200C（零宽度非连接器，ZWNJ）和\u200D（零宽度连接器，ZWJ）是控制字符应该是看不见的。我选择ZWSP作为消歧的边界指示符，ZWNJ作为二进制0和ZWJ作为二进制1。在PHP中，这意味着编码注释标识$nr的目的是：

$binnr = decbin($nr);
$annotation = "&#x200B;";
for($i=0; $i<strlen($binnr); $i++)
    $annotation .= '&#x200'.($binnr{$i}=="0"?"c":"d").';';
$annotation .= '&#x200b;';

使用实际字符而不是html实体可能更好。所以我们需要

return html_entity_decode($annotation, ENT_NOQUOTES, 'UTF-8');

我正在收集属于这些ID的元数据，并将其放入页面头部。然后在故事的javascript端，搜索DOM树以获取编码注释：

function parse_numbers(text)
{
    read = false;
    nrs = []; nr = 0;
    for(var i=0; i<text.length; i++)
    {
        if(text[i] == "\u200B") {
            read = !read;
            if(!read) {
                nrs.push(nr);
                nr = 0;
            }
        } else if(text[i] == "\u200C") {
            nr <<= 1;
        } else if(text[i] == "\u200D") {
            nr <<= 1; nr++;
        }
    }
    return nrs;
}

function buttons_recursive(node, insert)
{
    nrs = [];
    switch(node.nodeType)
    {
        case 1: //ELEMENT_NODE:
            for(var i=0; i<node.attributes.length; i++) {
                nrs.concat(buttons_recursive(node.attributes[i], false));
            }
            var new_insert = insert;
            if(node.nodeName == "BUTTON" || node.nodeName == "A") {
                new_insert = false;
            }
            for(var i=0; i<node.childNodes.length; i++) {
                nrs.concat(buttons_recursive(node.childNodes[i], new_insert));
            }
            break;
        case 2: //ATTRIBUTE_NODE:
            nrs = parse_numbers(node.value);
            break;
        case 3: //TEXT_NODE:
            nrs = parse_numbers(node.nodeValue);
            break;
        default:
            return [];
    }
    if(insert) {
        for(var i=nrs.length-1; i>=0; i--) {
            node.parentNode.insertBefore(create_inline_button(nrs[i]), node.nextSibling);
        }
        return [];
    } else {
        return nrs;
    }
}

执行

buttons_recursive(document.body, true);

函数create_inline_button应该创建控制元素以启动具有给定标识符的文本的翻译。

html代码的透明注释

3 个答案: