Text wrapped around a curvy line in HTML!
Normally, all HTML elements are rectangular, including its images. However, an
image with a transparent part looks like it actually has a different shape. To
let the browser flow the text around this (possibly irregular) shape (that
exists only in our minds, while technically the image is still rectangular),
you need a trick.
I've written a script that does the hard work for you. It scans the transparent side of an image, and then creates rectangles to mimic that shape in HTML. The height of each such rectangle is the same as the height of a line of text. In fact, you'll have to force the line-height of text to ensure this.
The script is written in Perl, of course, and requires the non-standard module Imager. In Debian and Ubuntu, this can be installed with apt-get install libimager-perl.
Here's the script: floater.pl — Have fun!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent leo nisi, suscipit in blandit at, eleifend et nulla. Curabitur ultrices metus at sapien volutpat mattis. Pellentesque sagittis suscipit purus eu gravida. Morbi risus augue, hendrerit eget hendrerit quis, iaculis eu lectus. In eget odio a nisi congue placerat. Proin est velit, suscipit ut faucibus sit amet, facilisis non erat. Duis pulvinar laoreet euismod. Proin eu quam at diam congue dapibus sit amet vel magna. Aenean ac elit neque. Nulla rhoncus, dolor et scelerisque congue, urna ipsum viverra augue, ut tempor purus nulla consectetur neque. Etiam tempus, lacus ac ultrices rhoncus, tortor nulla imperdiet dui, at luctus eros ante vel ligula. Donec sed tellus est. Donec nec nunc ligula. Integer tincidunt nisl vehicula neque dignissim porttitor. In tristique leo sem. Cras sagittis adipiscing orci, a volutpat nisl fringilla in. Integer in fringilla ligula. Mauris semper, elit vel tincidunt porta, purus velit fringilla odio, in venenatis diam augue vitae justo. Duis tincidunt, metus quis consectetur adipiscing, velit leo gravida diam, facilisis eleifend velit urna at ligula. Ut quis felis nec sapien molestie condimentum adipiscing et erat.
I've written a script that does the hard work for you. It scans the transparent side of an image, and then creates rectangles to mimic that shape in HTML. The height of each such rectangle is the same as the height of a line of text. In fact, you'll have to force the line-height of text to ensure this.
The script is written in Perl, of course, and requires the non-standard module Imager. In Debian and Ubuntu, this can be installed with apt-get install libimager-perl.
Here's the script: floater.pl — Have fun!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent leo nisi, suscipit in blandit at, eleifend et nulla. Curabitur ultrices metus at sapien volutpat mattis. Pellentesque sagittis suscipit purus eu gravida. Morbi risus augue, hendrerit eget hendrerit quis, iaculis eu lectus. In eget odio a nisi congue placerat. Proin est velit, suscipit ut faucibus sit amet, facilisis non erat. Duis pulvinar laoreet euismod. Proin eu quam at diam congue dapibus sit amet vel magna. Aenean ac elit neque. Nulla rhoncus, dolor et scelerisque congue, urna ipsum viverra augue, ut tempor purus nulla consectetur neque. Etiam tempus, lacus ac ultrices rhoncus, tortor nulla imperdiet dui, at luctus eros ante vel ligula. Donec sed tellus est. Donec nec nunc ligula. Integer tincidunt nisl vehicula neque dignissim porttitor. In tristique leo sem. Cras sagittis adipiscing orci, a volutpat nisl fringilla in. Integer in fringilla ligula. Mauris semper, elit vel tincidunt porta, purus velit fringilla odio, in venenatis diam augue vitae justo. Duis tincidunt, metus quis consectetur adipiscing, velit leo gravida diam, facilisis eleifend velit urna at ligula. Ut quis felis nec sapien molestie condimentum adipiscing et erat.