使用javascript在html页面上显示自定义选择区域

Question

在html页面上，我可以在屏幕上计算一个invidual字符的x，y坐标及其渲染大小吗？

我问这个问题，因为我想知道谷歌文档是如何做到的？如果您查看Google文档中的选定区域，则会在所选区域上放置一个叠加层。我无法弄清楚他们是如何做到的。

Google搜索不会返回任何相关内容。可能我不是在寻找合适的东西！

任何线索？

谢谢， PARTH

Answer 1

试试这个。

<style type="text/css">
    @media print
    {
        body * {
                  visibility:hidden;
                }
        #printablecontent { display: block; }
    }
    </style>

Answer 2

我认为Google文档的作用是在屏幕外绘制和衡量每个角色。我在最近的一个项目中做到了这一点并且相对简单：

1. 创建范围
2. 给它正确的样式
3. 设置其innerHTML
4. 将其置于屏幕外
5. 将其添加到DOM
6. 检查其offsetWidth
7. 将其从DOM
中删除

有关详细信息，请参阅此Google博文：https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html