3

I read on a website that there is a way of wrapping text around non-rectangular shapes but somehow I don't know how to do it,

Now I found this link from a question posted here about 3 years ago, things have changed thenso if there is an easier way to do it, that would be great.

Here is the visual example to give more of an idea and the url of the website explaining how to do it, but as I said this is about 3 years old.

http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

enter image description here

Community
  • 1
  • 1
Sol
  • 195
  • 1
  • 4
  • 14
  • How are the shapes generated? Are they transparent images? CSS-generated shapes? – BenM Jan 12 '14 at 19:43
  • Transparent png if possible because is better quality and I will need it to be compatible also with Internet Explorer 8 , I would deeply appreciate it. – Sol Jan 12 '14 at 19:44
  • 1
    http://www.jwf.us/projects/jQSlickWrap/ ? – BenM Jan 12 '14 at 19:46
  • will this be compatible with internet explorer 8 apart from mozilla,chrome? – Sol Jan 12 '14 at 19:46
  • `jQSlickWrap requires that your browser support HTML 5's `. So no. You won't be able to achieve this in IE8. – BenM Jan 12 '14 at 19:47
  • Maybe if you use a [canvas polyfill](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#canvas) – towr Jan 12 '14 at 19:49
  • how about this link '' http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes '' I didnt understand how to do it, will this one be compatible? – Sol Jan 12 '14 at 19:50
  • @towr that should work, so long as they provide the `toDataURL()` function. – BenM Jan 12 '14 at 19:50
  • which one this link? torylawson? – Sol Jan 12 '14 at 19:50
  • @Dalia, that's horrible, don't do that. They manually create and position `
    ` elements around an image to force wrapping.
     – BenM Jan 12 '14 at 19:51
  • I need the layout like the image its very important,please help, there has to be a way – Sol Jan 12 '14 at 19:51
  • You're designing for the web, not print. If it's absolutely essential, use an image. – BenM Jan 12 '14 at 19:57
  • so there are no options? it's for the web an image is not the same, we all know that it would not be convenient, I really need this layout, there has to be more options – Sol Jan 12 '14 at 20:00
  • 2
    you have this coming up within a few years ... http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ beside the trick to lay floatting div with adapted size is the only work araound that works with old browser actually – G-Cyrillus Jan 12 '14 at 20:06
  • @GCyrillus which old browsers it would work on, I just need the IE8, do you mind giving me an example by fiddle if possible,please I'm quite lost in this. – Sol Jan 12 '14 at 20:09
  • your link to torylawson.com is the work around that i talk about, today there is no other solution if you to include IE8 and old browser. You have to set these extra floatting tags manualy – G-Cyrillus Jan 12 '14 at 20:12
  • I read it three times at the link to torylawson.com and didnt understand it :( – Sol Jan 12 '14 at 20:13
  • you should produce a http://copepen.io/pen or a http://jsfiddle.net of what you have already done to help some of us to show you how to fix or implement solutions – G-Cyrillus Jan 12 '14 at 20:18
  • ok I'll make the layout and the images now just for an example and if you can help me order aligning the text according to torylawson example.I would deeply appreciate it.On my way,one moment – Sol Jan 12 '14 at 20:21
  • 3
    http://codepen.io/anon/pen/fmlgp eample with span cleared and floatting, img in bg – G-Cyrillus Jan 12 '14 at 21:09
  • wow now that is amazing, really great work!so this would definately be compatible with old browsers and new ones right? – Sol Jan 12 '14 at 21:13
  • is this one image? if I wanted to use two halfs (two different images) mirrored what would I need to add extra? – Sol Jan 12 '14 at 21:15
  • @GCyrillus you should write it down as answer....nice work – Ani Jan 12 '14 at 21:18
  • if I wanted to use two halfs (two different images) mirrored what would I need to add extra? – Sol Jan 12 '14 at 22:10

2 Answers2

2

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • if I wanted to use two halfs (two different images next to each other on the center of the columns) mirrored what would I need to add extra? – Sol Jan 12 '14 at 22:40
  • IE8 the image appears bigger :( and the text is aligned square, how can this be fixed? – Sol Jan 12 '14 at 22:49
  • image needs to be resized to the size you expect it to be shown (on example i used background-size. what do you mean square ? do you have a link where i could see ? – G-Cyrillus Jan 12 '14 at 23:43
  • for 2 images , you can put them absolute position and put relative tothe parent, a link ? :) – G-Cyrillus Jan 12 '14 at 23:45
  • Nether mind I got another idea, I don't think I will use this one, I'll wait for a few more years just to avoid compability issues, but this is helpful for future reference :) thanks again – Sol Jan 13 '14 at 18:02
  • thank you , you too :) I will add the css alignment on a few articles I made, great idea. take care – Sol Jan 13 '14 at 18:59
1

CSS Shapes' shape-outside property is now widely supported in Chrome, Safari and Opera.

There's no support in IE or Firefox as of June 2015, but this shouldn't prevent you from using progressive enhancement and serve a simple rectangular shape for those browsers.

This article is a good starting point for learning to use CSS Shapes for layout: http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/

I don't recommend the stacked floated elements technique. Even though it yields the desired effect, it also generates code difficult to maintain and reason about.

Keep it simple, accessible, and provide extra features where native browser capabilities permit it. There's no need for things to look exactly the same in every browser.

Razvan Caliman
  • 4,509
  • 3
  • 21
  • 24