谷歌翻譯突出

Question

網址：http://translate.google.com/

如。源語言是英語，翻譯朗是其他。並在上述頁面的textarea中輸入文本'i'。懸停翻譯單詞，單詞背景將突出顯示，'我'將突出顯示。

我想知道，吹掉代碼'.gt-hl-layer'如何與'#source'協同工作？

<div style="width: 100%;"><!--from google translator--> 
<div class="gt-hl-layer" style="box-sizing: content-box; width: 641px; height: 65px; left: 0px; top: 0px; " dir="ltr"></div> 
<textarea id="source" name="text" wrap="SOFT" tabindex="0" dir="ltr" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" style="overflow-y: hidden; overflow-x: auto; box-sizing: border-box; " class="goog-textarea"></textarea> 
</div> 

最好給一些簡單的演示或代碼。 非常感謝！

Answer 1

我想它可能會像這樣工作：

1. 潤源經「翻譯機」，它產生的翻譯文本，並在這個過程確實來源標記（註釋）的很多 - - 翻譯也附帶註釋。

2. 翻譯過程確定源中的哪些標記互相鏈接（例如短語動詞）以及標記如何鏈接到翻譯中的相應元素。

3. 翻譯文本是最終產品，它是從一個數據集生成的，該數據集有更豐富的註釋和標籤 - 使用這個更豐富的集合，可以將此註釋結構編譯爲任何其他格式（比如XML），或在HTML的情況下，它可能採用大量跨度的形式，每個跨度都有一個ID。

4. 表面上，源代碼文本也重新制作了HTML（現在使用底層註釋的結構）。這就像一個有很多跨度的標記文本，每個文本都有一個生成的ID。通常還有另一個與文本區域相匹配的圖層，並帶有突出顯示。

5. 然後，可能會有一箇中間部分指出翻譯中的哪個鼠標懸停應該點亮源中的哪個跨度。