How to Wrap Text Around a Non Rectangular Image

How can I wrap text around a non rectangular image?

You can use this method, where you float divs to block off the shape's area.

So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.

Wrapping text around non-rectangular shapes css/html

Today, there is not much option if you want this effect cross-browser and especially for older ones, you need to manually set floatting elements that will keep text away from chosen areas.

in futur, we will have this : http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/

demo:
http://codepen.io/anon/pen/fmlgp

div {display:table;border:1px solid;
background:url(http://www.printable-math-worksheets.com/images/Polyhedron.gif) center 100px no-repeat;
background-size:150px 150px;
width:600px;margin:auto;}
div p {display:table-cell;padding:0.25em;}
p:first-child {border-right:1px solid;}
p::before {
  content:'';
  float:right;
  border-left:solid rgba(0,0,0,0.2);/* demo purpose */
  padding-top:125px;
}
.cssShape {
  float:right;
  clear:right;
  background:rgba(0,0,0,0.2);/* demo purpose */
  width:15px;
  height:1.2em;
  margin:0;
}
.right .cssShape {
  float:left;
  clear:both;
}
.left .cssShape + .cssShape{
  width:25px;
}
.left .cssShape + .cssShape + .cssShape,
.right .cssShape + .cssShape + .cssShape + .cssShape  {
  width:45px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape,
.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape  + .cssShape + .cssShape{
  width:60px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape{
  width:70px;
}

.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape  + .cssShape {
  width:60px;
}
.right .cssShape + .cssShape + .cssShape   {
  width:25px;
}
.right .cssShape + .cssShape + .cssShape + .cssShape +  .cssShape{
  width:20px;
}
.right .cssShape + .cssShape + .cssShape {
  width:60px;
}
.right .cssShape + .cssShape   {
  width:70px;
}
.right .cssShape  {
  width:60px;
}

HTML for test

<div>
  <p class="left">
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p class="right">    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

CSS wrap text around centred image

Question resolved :

Actual situation :
The CSS shape works for float, so it's not for centered images now. This property works only for Chrome and Opera at the moment.
Maybe there will be a solution for non float elements in the future. Look at this W3C editor's draft : http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

A hand made CSS solution :
Basically, there are 2 columns (like in newspapers). The text begins in the left column and goes down. The text continues on the top of the right column and goes down. The columns are a bit higher than the image. The left column has a half invisible circle as well as the right column - on the position of the centered image. The two half circles are build by multiple boxes of different length, they are invisible. (The hight of the boxes is the height of the font.) The text must be justified. The text is now flowing around the half circles in each column. The image will be positioned over the 2 invisible half circles.

Another, not very technical solution is to use Libre Office and Inkscape to produce an SVG file.
Import the picture into Libre Office - wrap the text around the image - save as PDF - open Inkscape - save as SVG - import the SVG in your Webpage - done.

Thanks everybody for helping me and for your inputs !

Make an element non-rectangular in CSS to write text

You’re currently achieving the white shape by setting a background gradient. Instead, use shape-outside to actually create the shape and let the text wrap around it. Like this:

.container {  width: 400px;  height: 200px;  background-color: black;  color: white;}
.shape {  width: 100%;  height: 200px;  background-color: white;  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);  shape-outside: polygon(100% 0, 100% 100%, 0 100%);  float: right;  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);  clip-path: polygon(100% 0, 100% 100%, 0 100%);}
p {  text-align: left;}

<div class="container">  <div class="shape"></div>  <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu erat pharetra orci rhoncus dignissim. Nullam imperdiet justo felis, id venenatis velit pretium in. Donec commodo odio nisl, ut facilisis dui vulputate at. Nullam feugiat semper urna non efficitur.   </p></div>

---

Related Topics