javascript - 如何在可移动图像周围环绕文本？

Question

我正在尝试实现一个用户可以动态输入文本和上传图像的界面。我希望界面具有以下功能:

图像应该是可移动的，即能够拖放图像。

输入的文本应自动环绕图像。

我怎么能做到这一点？我查看了一些 jquery 脚本，也查看了 HTML5 的 Canvas 功能，但找不到解决方案。

谢谢你的时间。

编辑:此视频显示了我希望获得的效果:

http://www.youtube.com/watch?v=mYnj4Mz9g9g

Answer 1

TL; 博士

这是 CSS 历史上已多次讨论过的常见且令人向往的特性，并且有一个正在开发的规范使之成为可能。不幸的是，实现很少而且相距甚远，并且一些实现者不愿意在它上面工作。对于任何非平凡的布局来说，用 JavaScript 做这件事都是一个复杂的问题。这样的解决方案对于您的目的来说不太可能足够快，您将快速接近您期望从 PDF 到 HTML 转换器中获得的那种标记。

背景

这里有两个问题:不规则的文本流和从页面的任意区域排除文本和其他内联元素。

这不是第一次为 CSS 讨论这两个特性。特别是，不规则 float 形状周围的流动文本是 mentioned in a CSS level 1 working draft早在 1996 年，Eric Meyer 的 ragged float demo至少可以追溯到 2002 年。这是一个姗姗来迟的功能!

2007 年 6 月，James Elmore 建议添加 position值到 float属性，允许元素在页面上任意定位，同时排除其他元素从下方流动。

SVG 1.2 最初为 flowed text regions 指定了一个模型，并详细介绍了如何实现。不幸的是，latest version of the spec (仍在开发中)通过指出以前的工作将被“SVG 1.2 Tiny textArea 功能的超集”所取代，从而将其排除在外。

当前状态(2012 年 8 月修订)

最近，我们有 CSS Exclusions specification , proposal from Adobe以及您在该视频中看到的内容。截至 2012 年 8 月，这些已经在 IE 10 RTM 中实现，并在 WebKit 中慢慢推出，但为其他供应商工作的开发人员表示 mixed feelings关于提案。*

三叉戟 (IE):在 IE10 平台预览版中实现并在 RTM 中可用。 ( Referred to as "positioned floats" in IE Test Drive ，类似于 James Elmore 的提议。)

WebKit(Chrome、Safari):部分实现，补丁逐渐被批准登陆 WebKit 主干，这意味着我们应该很快就会看到这一点。 ( Bug 57311 - CSSRegions: add exclusions support in WebKit .)

壁虎 (Firefox):不太可能很快实现；错误目前已解决为 WONTFIX。 ( Bug 672053 - Add support for CSS3 Positioned Floats — 请注意 David Baron 关于互操作性的反对意见。)

Presto(歌剧):尚未实现。 (错误跟踪器是私有(private)的；我试着问过爱交际的布鲁斯劳森是否有一个开放的错误，但 he is constrained from commenting on their roadmap。)

Adobe 维护一个 handy support matrix方便引用。

咳咳“Polyfilling”？

使用 JavaScript 很难达到类似的效果，更难做到高效。我可以想到两种非常幼稚的方法来为区域中的绝对定位元素腾出空间:

使用战略性插入的内联为元素“阻挡”空间 span s;或

用 span 包围每个单词元素，并单独设置每个单词的样式，以便使用填充为排除的元素腾出空间。

我已经破解了 a very broken demo第二种方法如何工作。这是可怕的，马车和容易打破。在回答这个问题后，我实际上花了几周时间为 Exclusions 规范开发一个 polyfill，但因为有太多错误和性能问题而放弃了。

无论采用哪种方法，您都会遇到无数问题:列、文本对齐、错误的子元素(尤其是 float 或定位元素!)、各种边缘条件、如果更改 HTML 的可怕事情、连字 - 天哪，我什至不想考虑连字符——当然，考虑到这些事情后，潜在的巨大性能问题。

性能问题可以有所改善；例如，我用过 elementFromPoint尝试获取 span直接包含第一个重叠词，有些浏览器甚至支持 caretPositionFromPoint ，这也可能有帮助。我认为通过大量的工作，你可以做出一些非常适合静态内容的东西；但让它足够快，你可以用鼠标拖动它？我的演示页面几乎没有内容，并且没有解决您必须处理的任何令人费解的复杂问题才能在真实网页上运行。即使你可以解决所有这些问题，让它足够快以平滑地拖动也是非常具有挑战性的。

* 我强烈希望供应商实现 CSS Exclusions。从 CSS 的早期开始，人们就一直在要求这些功能，并且它是屏幕和打印品上常见且合法的视觉设计目标。