谷歌翻译突出显示
网址：http://translate.google.com/
例如。源语言是英语，翻译语言是其他语言。并在上面页面的文本区域中输入文本“i”。将鼠标悬停在翻译单词上，单词背景将突出显示，“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>
最好给出一些简单的demo或者代码。 非常感谢！
url: http://translate.google.com/
eg. source lang is english, translate lang is other. and enter the text 'i' in the above page's textarea. hover the translate word, and the word background will highlight, and the 'i' will highlight.
I want to know that blew the code how does the '.gt-hl-layer' cooperate with the '#source' work?
<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>
It's better to give some simple demo or code.
thanks very much!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我想它可以这样工作：
通过“翻译机”运行源代码，它生成翻译后的文本，并在此过程中对源代码进行大量标记（注释）——翻译还带有注释。
翻译过程确定源中的哪些标记相互链接（例如短语动词）以及标记如何链接到翻译中的相应元素。
翻译文本是最终产品，它是从具有更丰富注释和标签的数据集生成的 - 使用这个更丰富的集合，您可以将此带注释的结构编译为任何其他格式（例如 XML），或者以在 HTML 的情况下，它可能采用大量跨度的形式，每个跨度都有一个 ID。
从表面上看，源文本的 HTML 也被重新制作（现在具有来自底层注释的结构）。它就像一个具有大量跨度的标记化文本，每个跨度都有一个生成的 ID。通常还有另一个层与文本区域匹配并进行突出显示。
然后可能有一个中间部分映射翻译中的哪个鼠标悬停应该点亮源中的哪个跨度。
I imagine it could work like this:
Run source through the "translation machine", it produces the translated text, and in the process does a lot of tagging (annotations) on the source -- the translation also comes with annotations.
The translation process determines which tokens in the source are linked to each other (e.g. phrasal verbs) and how the tokens are linked to the corresponding elements in the translation.
The translation text is an end product, it's generated from a dataset which had much richer annotations and tags -- using this richer set, you can have this annotated structure compiled into any other format (say, XML), or in the case of HTML, it probably takes the form of lots of spans, each with an ID.
On the surface, the HTML is re-fabricated for the source text too (now with the structure from the underlying annotations). It's like a tokenized text with lots of spans, each with an generated ID. Usually there's another layer that matches the text areas and carries the highlighting.
Then probably there's a middle part that map out which mouseover in the translation should light up which span(s) in the source.