Shaped image text flow

Lets text on HTML pages flow around the real shape of an image. Analyses the image transparency and generates corresponding HTML code. Fast access through file caching.

You can layout images on HTML pages so that text will flow around it to its left or right side. But then the text will always flow around the bounding rectangle of the image, even if the image is largely transparent and the text might as well reach much closer to the image. Text processing software like Microsoft Word, PageMaker etc. master this type of text flow for a long time already. This PHP function now also makes it possible on web pages.

Therefore the PHP function analyses the image to display and recognises transparent regions at the left or right side. According to the determined geometry, multiple div elements with matching width and height are generated which are then inserted with the image. The text then no longer flows around the image but instead around the additional div elements, completely ignoring the image rectangle. The HTML code with the div elements is cached for that it doesn’t need to be recomputed on every page request (which can take around 50–200 ms). This cache is updated as the source image file is changed.

To use this function, call it on the PHP page, outside of any p elements. (div within p is invalid HTML and leads to rendering errors.) The function arguments are described in the source code. The image on this page was embedded with exactly this function.

Important: You need to adjust the paths to the image and cache files before use. Moreover, this function only supports PNG images. (GIF is no longer in use and JPG does not support transparency.)

Compatibility: Version 5.0 or newer

Example

The following sample code shows how the ShapedImage function is used on this page:

The div elements can be made visible with the following CSS declaration. That’s more interesting for debugging. You can try it right on this page by clicking the following checkbox.

Apply CSS declaration on this page

(The functionality of the checkbox above is described on the page coati JavaScript library.)

Download

shapedimage.inc.php4.5 KiBSource code of the ShapedImage function

Licence and terms of use

Copying and distribution of this file, with or without modification, are permitted provided the copyright notice and this notice are preserved. This file is offered as-is, without any warranty. (GNU All-Permissive licence)

Statistic data

• Created on 2011-07-20.