您的位置: 首页  >  技术问答  >  如何封装可移动图像周围的文本？

如何封装可移动图像周围的文本？

分类: 技术问答 • 2022-07-27 17:23:43
问题描述：

我想实现一个界面，用户可以动态输入文本和上传图片。我希望界面具有这些功能：

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. 图像应该是可移动的，即能够拖放图像。 li>
  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.

感谢您的时间。

EDIT：此视频显示了我想获得的效果：

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的破损的浮动演示日期

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 中被称为定位浮动广告，类似于）

  • WebKit（Chrome，Safari）部分实现，补丁逐渐被批准在WebKit中继中着陆，这意味着我们应该开始查看这很快。 （错误57311 - CSSRegions：在WebKit中添加排除支持。）

  • Gecko（Firefox）：不太可能很快实施; bug目前解析为WONTFIX。 （ Bug 672053 - 添加对CSS3定位浮动广告的支持） - 注意David Baron关于互操作性的异议。）

  • Presto（Opera）：尚未实现。 （Bug跟踪程序是私人的;我试图要求有史以来团队布鲁斯劳森如果有一个开放的bug，但 ）

  • 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.)

Adob​​e保留方便的支持矩阵。

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. 阻止战略性插入内联 span s;或

  2. 使用 span 元素包围每个单词，并单独设置每个单词的样式， li>
  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.

我已经入侵了一个非常破碎的演示如何第二种方法可能工作。这是可怕的，越野车，容易打破。我实际上花了几个星期回答这个问题，工作在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.

相关推荐