如何在可移动图像周围环绕文本?

问题描述

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

I am trying to implement an interface where users can dynamically enter text and upload images. I wish for the interface to have these features:

1. 图像应该是可移动的，即能够拖放图像.
2. 输入的文字应自动环绕图像.

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

How could I accomplish this? I have looked at some jquery scripts and also looked through HTML5's canvas features, but am unable to find a solution.

感谢您的宝贵时间.

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

This video shows the effect I wish to obtain:

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

推荐答案

TL;DR

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

TL;DR

This is a common and desirable feature that has been discussed numerous times in the history of CSS, and there is a specification under development to make it possible. Unfortunately, implementations are few and far-between, and some implementers are reluctant to work on it. Doing it with JavaScript is a complex problem for any non-trivial layout; such a solution is unlikely to be fast enough for your purposes and you will fast approach the sort of markup you'd expect from a PDF-to-HTML converter.

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

There are two questions here: irregular text flow and excluding text and other inline elements from an arbitrary region of the page.

这不是第一次讨论 CSS 的任一功能.特别是，在 CSS 1 级工作草案中，提到了围绕不规则浮动形状的流动文本 早在 1996 年，Eric Meyer 的 ragged float 演示至少可以追溯到 2002 年.这是一个姗姗来迟的功能！

This is not the first time either feature has been discussed for CSS. In particular, flowing text around irregular floated shapes was mentioned in a CSS level 1 working draft back in 1996, and Eric Meyer's ragged float demo dates from at least 2002. This is a long overdue feature!

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

In June 2007, James Elmore suggested adding position values to the float property, enabling elements to be positioned arbitrarily on the page while excluding other elements from flowing underneath.

SVG 1.2 最初为 流动文本区域，并详细介绍了如何实现.不幸的是，规范的最新版本(仍在开发中)打破了这一点注意到之前的工作将被SVG 1.2 Tiny textArea 功能的超集"取代.

SVG 1.2 initially specified a model for flowed text regions, and goes into some detail on how this would be implemented. Unfortunately, the latest version of the spec (which is still in development) blows this out of the water by noting that previous work will be replaced with "a superset of the SVG 1.2 Tiny textArea feature".

最近，我们有了 CSS 排除规范，一个 Adobe 的建议 以及您在该视频中看到的内容.截至 2012 年 8 月，这些已在 IE 10 RTM 中实现，并在 WebKit 中慢慢推出，但为其他供应商工作的开发人员表示 对提案的复杂感受.*

More recently, we have the CSS Exclusions specification, a proposal from Adobe and what you see being shown off in that video. As of August 2012, these have been implemented in IE 10 RTM and are slowly being rolled out in WebKit, but developers working for other vendors have expressed mixed feelings about the proposal.*

• Trident (IE):在 IE10 平台预览版中实现并在 RTM 中可用.(在 IE Test Drive 中称为定位浮动"，类似James Elmore 的提议.)
• WebKit(Chrome、Safari):部分实施，补丁逐渐被批准登陆 WebKit 主干，这意味着我们应该很快就会看到这一点.(错误 57311 - CSSRegions:在 WebKit 中添加排除支持.)
• Gecko (Firefox):不太可能很快实现；错误目前已解决为 WONTFIX.(Bug 672053 - 添加对 CSS3 Positioned Floats 的支持——请注意 David Baron 关于互操作性.)
• Presto (Opera):尚未实现.(错误跟踪器是私有的；我尝试询问总是合群的 Bruce Lawson 是否存在未解决的错误，但 他被限制评论他们的路线图.)

• Trident (IE): implemented in IE10 platform preview and available in the RTM. (Referred to as "positioned floats" in IE Test Drive, similar to James Elmore's proposal.)
• WebKit (Chrome, Safari): partially implemented, with patches gradually being approved for landing in the WebKit trunk, meaning we should start seeing this soon. (Bug 57311 - CSSRegions: add exclusions support in WebKit.)
• Gecko (Firefox): unlikely to be implemented soon; bug currently resolved as WONTFIX. (Bug 672053 - Add support for CSS3 Positioned Floats—note David Baron's objections concerning interoperability.)
• Presto (Opera): not yet implemented. (Bug tracker is private; I tried asking the ever gregarious Bruce Lawson if there was an open bug, but he is constrained from commenting on their roadmap.)

Adobe 维护一个方便的支持矩阵方便参考.

Adobe maintain a handy support matrix for easy reference.

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

It would be difficult achieve a similar effect using JavaScript, and even more difficult to do it efficiently. I can think of two very naive approaches to make room for an absolutely positioned element in a region:

1. 使用策略性插入的内联spans阻挡"元素空间；或
2. 用 span 元素围绕每个单词，并单独设置每个单词的样式，以便使用填充为排除的元素腾出空间.

1. "block out" space for element using strategically-inserted inline spans; or
2. surround each word with a span element, and style each word individually to make room for the excluded element using padding.

我已经破解了 一个非常糟糕的演示，说明第二种方法可能如何工作.这是可怕的，有缺陷的，而且很容易被打破.实际上，在回答这个问题后，我花了几个星期的时间为 Exclusions 规范编写 polyfill，但因为存在太多错误和性能问题而放弃了.

I've hacked up a very broken demo of how the second approach might work. It's horrible, buggy and easy to break. I actually spent a few weeks after answering this question working on a polyfill for the Exclusions spec, but gave up because there were too many bugs and performance issues.

使用任何一种方法都会遇到无数问题:列、文本对齐、错误的子元素(尤其是浮动或定位元素！)、各种边缘条件、如果更改 HTML 会发生可怕的事情、连字符 - 天哪，我不甚至想考虑连字符——当然，在考虑到这些事情之后，还有潜在的重大性能问题.

You will have myriad issues with either approach: columns, text alignment, errant child elements (especially floated or positioned elements!), various edge conditions, horrible things if you change the HTML, hyphenation—merciful heavens, I don't even want to think about hyphenation—and, of course, potentially magnificent performance issues after taking account of these things.

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

Performance issues can be ameliorated somewhat; for example, I've used elementFromPoint to try and get the span containing the first overlapping word directly, and some browsers even support caretPositionFromPoint, which may also help. I think that with a lot of work, you could make something that works pretty well for static content; but making it fast enough that you can drag it around with the mouse? My demo page has precious little content and doesn't address any of the mind-bendingly complex issues you'd have to deal with to make this work on real web pages. Even if you can get around all of those issues, making it fast enough to drag around smoothly would be very challenging.

* 我强烈希望供应商实施 CSS 排除.从 CSS 的早期开始，人们就一直在寻求这些功能，这是一个常见且合法的视觉设计目标，无论是在屏幕上还是在印刷品中.

* I strongly hope vendors will implement CSS Exclusions. People have been asking for these features since the earliest days of CSS, and it is a common and legitimate visual design objective both on screen and in print.

这篇关于如何在可移动图像周围环绕文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！