How can I make text cuddle around my image?

Question

I am working with the new adobe CSS Shapes and to no avail, unfortunately.

Since my browser only supports 20% (it should still support what I use), I decided that I would start working on this and try something new.

I try to get the image in the center of the text and the text hugs the image from above. If you add margin-top to #circle-left / #cirlce-right , you will see just a space above the image, here is JSFIDDLE .

If you want to try out CSS Shapes , click the link and follow the steps to enable them in your browser.

This section is not normative.

Shapes define custom geometries that can be used as CSS values. This specification defines properties for controlling the geometry of float area elements. The shape-outside property uses shape values ​​to determine the float area for the float.

Note. Future levels of CSS forms will allow the use of shapes on elements other than floats. Other CSS modules can also use forms, such as CSS Masking [CSS-MASKING] and CSS Exceptions [CSS3-EXCEPTION].

Note. If the user agent implements both CSS forms and CSS exceptions, the shape-outside property determines the scope of the exception for the exception.

Note. The future level of CSS shapes will determine the shape inside the property, which will determine the shape for wrapping the content within the element.

I have achieved the desired effect in every way, except that I can not get my text to wrap over the image / container. I used margin , padding , top and positioned it relative .

Here is my CSS , ( JSFIDDLE )

 html, body { margin: 0; padding: 0; } * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } #circle-left { shape-outside: circle(50% 50% 50%); /* CSS Shapes, my browser is not supporting this sadly */ float: right; width: 200px; height: 200px; border: 1px solid brown; border-radius: 50%; display: block; margin-right: -100px; } #circle-right { shape-outside: circle(50% 50% 50%); float: left; width: 200px; height: 200px; border: 1px solid brown; border-radius: 50%; display: block; margin-left: -100px; } .left { float: left; width: 50%; overflow: hidden; } .fox { position: absolute; top: 16px; left: 50%; margin-left: -100px; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 1px solid brown; } 

Is there anyone who knows about CSS Shapes or how can I do this? I would like to save it only in css, but if javascript is needed, I will try to try it.

I'm not trying to support the whole browser or anything like that, I'm just trying to learn new tools that adobe is working on.

Resources

• Adobe Forms

• W3C Part 1

• W3C Part 2

Answer 1

He took me a long time, but yes. This is actually the same idea as yours, but uses zero-width containers to click shapes.

 .pusher { display: block; width: 0px; height: 100px; /* top pos of img */ } #left .pusher { float: right; } #right .pusher { float: left; } * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; margin: 0; padding: 0; } .circle { display: block; width: 100px; /* half width of img */ height: 200px; /* height of img */ } #left .circle { float: right; clear: right; -webkit-shape-outside: rectangle( 0px, 0, 200px, /* width of img */ 200px, /* height of img */ 50%, 50% ); } #right .circle { float: left; clear: left; -webkit-shape-outside: rectangle( -100px, /* 0 - width of img */ 0, 200px, /* width of img */ 200px, /* height of img */ 50%, 50% ); } p { float: left; width: 50%; overflow: hidden; text-align: center; } img { position: absolute; top: 100px; left: 50%; margin-left: -100px; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; } 

 <img src="https://placehold.it/200x200" /> <p id="left"> <span class="pusher"></span> <span class="circle"></span> Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It also called placeholder (or filler) text. It a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it not genuine, correct, or comprehensible Latin anymore. While lorem ipsum still resembles classical Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It also called placeholder </p> <p id="right"> <span class="pusher"></span> <span class="circle"></span> Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It also called placeholder (or filler) text. It a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it not genuine, correct, or comprehensible Latin anymore. While lorem ipsum still resembles classical Latin. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It also called placeholder </p>