CSS wraps text around a centered image

Question

How to wrap text around a centered (round) image as follows:

I tried this jsfiddle , but the text goes for the image and does not wrap around it.

#circle { float:positioned; position: absolute; top:10%; left: 40%; wrap-shape: circle(50%, 50%, 120px); wrap-margin: 10px; } 

 <div id="circle"><img src="http://www.guitare-rabuffetti.fr/test/circle.png"/></div> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo. Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et </div> 

Answer 1

Question resolved:

Actual situation: CSS form works for float, so now it is not intended for centered images. This property only works for Chrome and Opera. Perhaps in the future there will be a solution for non-floating elements. Take a look at this W3C editor project: http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

Manual CSS solution: Basically, there are 2 columns (for example, in newspapers). The text starts in the left column and goes down. The text continues at the top of the right column and is omitted. Columns are slightly higher than the image. The left column has half the invisible circle, and the right column has the location of the centered image. Two semicircles are built by several boxes of different lengths, they are invisible. (The height of the boxes is the height of the font.) The text should be justified. Text now flows around the semicircles in each column. The image will be located above 2 invisible halves of the circle.

Another, not very technical solution is to use Libre Office and Inkscape to create an SVG file. Import an image into Libre Office - wrap text around the image - save as PDF - open Inkscape - save as SVG - import SVG on your web page - do it.

Thanks to everyone for helping me and your contributions!

Answer 2

As already noted, the form wrapper currently only works for float ed elements, so this exact situation does not work with CSS just because only a wrapper on one side of the form is allowed (expected). After CSS Shapes 2 and / or Exclusions from the CSS specification), we can do this not only with forms, but also with image transparency.

I ran into the same problem trying to figure out how CSS forms and columns interact (spoiler: decent, but not organic). The problem is that the layout algorithm looks for the farthest edge (ignoring the possibility of multiple sides), and then starts the layout of the content from this coordinate. For items in the middle, this means that you only get text on one side. For CSS columns (as I understand it), the layout starts again from the farthest edge, but then continues right down, and does not wrap itself in the form on each line (see fiddle ), so protrusions in the shapes (for example, the polygon star) can actually make the wrapping content will be below the whole figure, and not flatten to the side or flow down into the ledge.

(note that in the 2nd example there are 3 sets of 2 columns)

---

However, there are several options that may work for such situations. I adapted the following from other answers / comments, but had to make a few changes to make them work (and some of the CSS attributes were experimental and no longer valid), so I felt this was better than the new answer than how it edits / comments:

Wrap one side

Use shape-outside in the left float ed div to create a wrapper circle, then use margin-left to push it off the left side. I added a circle inside the div to illustrate (your image URL is 404), but he had to adjust the location because Chrome did not calculate its position as you would expect once the fields were added.

http://jsfiddle.net/brichins/50h20kxa/1/

Columns and Mirror Wrap Elements

If the columns are acceptable, manually (see the discussion of CSS columns) creating 2 containers for the columns and placing the shape d element on each side gives the following:

http://jsfiddle.net/brichins/gvhpfccu/

The disadvantage here is the columns where you may need one block (not necessarily bad for readability), as well as to calculate the appropriate separation for your content.

Reading

• Introduction and passage through HTML5 Rocks: https://www.html5rocks.com/en/tutorials/shapes/getting-started/

  • Links to an amazing example from Alice in Wonderland since 2013. It seems like it no longer works completely, but whole conversations are still interesting

• Creating non-rectangular layouts using CSS shapes: https://sarasoueidan.com/blog/css-shapes/

• CSS trick article: https://css-tricks.com/almanac/properties/s/shape-outside/

• D3plus workaround plugin (for similar SVG solutions): https://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/

Answer 3

I don't think this is possible, since it relies on a float , and you cannot float in the middle / center of the page.

Here is what I came up with: [old violin] / 5Lxc444p / 8 /

If you put the width style in the actual circle, it works better than on the parent div .

Also, here is a good entry in css forms: http://www.html5rocks.com/en/tutorials/shapes/getting-started/

EDIT:

Here is updated the fiddle for the layout of two columns with an absolute positioned circle. http://jsfiddle.net/5Lxc444p/11/