How can I get my text to hug around the top of my image?

Question

I have been working around with the new adobe CSS Shapes and to no avail, sadly.

Since my browser only supports 20%(should still support what I'm using) I figured I would start to work around this and try something new.

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

If you want to try out CSS Shapes then click this link and follow the steps to enable them on your browser.

This section is not normative.

Shapes define arbitrary geometries that can be used as CSS values. This specification defines properties to control the geometry of an element’s float area. The shape-outside property uses shape values to define the float area for a float.

Note: Future levels of CSS Shapes will allow use of shapes on elements other than floats. Other CSS modules can make use of shapes as well, such as CSS Masking [CSS-MASKING] and CSS Exclusions [CSS3-EXCLUSIONS].

Note: If a user agent implements both CSS Shapes and CSS Exclusions, the shape-outside property defines the exclusion area for an exclusion.

Note: A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element.

I have achieved my desired effect in every way except I am unable to get my text to wrap above the image/container. I have 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 out there that knows about CSS Shapes or how I could go about this? I would like to keep it only to css but if javascript is needed I'll give it a try.

I am not trying to support all browser or anything of that nature, just trying to learn the new tools adobe is working on.

Resources

• Adobe Shapes

• W3C Part 1

• W3C Part 2

Answer 1

Took me a long time, but yes. It's effectively the same idea as yours but uses zero width containers to push down the 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's also called placeholder (or filler) text. It's 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's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's 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's 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's also called placeholder (or filler) text. It's 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's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's 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's also called placeholder
</p>