6

I've been wondering if this is possible. A block of text surrounding an image. In this case it is circlular. I have been able to nudge text to the side using the shape but not entirely encase it.

I have only managed to find one example and I was unable to recreate it from the example actually given:

enter image description here

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Dan Graham
  • 61
  • 1
  • 2
  • Good question, but what have you tried? Do you have some code where you are stucked, at least an example of some markup and CSS? – davidkonrad Feb 05 '15 at 17:40
  • 3
    Just a question regarding the UX but how are you supposed to read such text? – web-tiki Feb 05 '15 at 17:45
  • possible duplicate of [How an I wrap text around a non rectangular image?](http://stackoverflow.com/questions/9129862/how-an-i-wrap-text-around-a-non-rectangular-image) – Ryan Feb 05 '15 at 18:01
  • David, not really, I mean.. its just essentially masking an area using shape-outside, as is normal but I haven't been able to find anyone who has managed to wrap text around the shapes, instead its used to put shapes/images next to text. The example above came from a document with the following: – Dan Graham Feb 05 '15 at 18:03
  • Lorem ipsum
    It might be easier to just use the original image alpha channel to define the positioned float shape.
    Lorem ipsum
     – Dan Graham Feb 05 '15 at 18:04

1 Answers1

5

I don't know a way of wrapping text around a cicle the way it is done in your mokup. As commented, for a better user experience, the text should be seperated in two paragraphs and wrapped on each side of the circle. In this configuration you can wrap the text around the circle. But beware this solution has very poor browser support.

This approach uses the shape-outside property as shown in this answer and will only work in modern webkit browsers :

DEMO

text wrapped around circle

body{margin:0;padding:20px;width:830px;margin:0 auto;}
p{
  width:400px;
  margin-right:15px;
  text-align:justify;
  overflow:hidden;
  float:left;
}
p:before{
  content:'';
  width: 200px;
  height: 600px;
}
#left:before{
  float:right;
  shape-outside: circle(40% at 100% 50%);
}
#right:before{
  float:left;
  shape-outside: circle(40% at 0 50%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Hey, thanks for the snippet. I was aware of this particular method, was more curious to see if anyone had achieved my original query. The image UX wise is terrible but it is just an example, the code that was supplied with it, seems not to work, so was again more out of curiosity. – Dan Graham Feb 05 '15 at 18:56
  • @DanGraham maybe the code you are talking about uses `shape-inside` which currently isn't supported by any browser. – web-tiki Feb 05 '15 at 18:58