Textfluss um Bildkontur

mediaphp #

Lässt Text auf HTML-Seiten um die tatsächliche Kontur eines Bilds fließen. Analysiert die Bildtransparenz und generiert entsprechenden HTML-Code. Schneller Abruf durch Zwischenspeicherung in einer Datei.

Herunterladen
Mehr Details und Versionen

Auf HTML-Seiten kann man Bilder so ausrichten, dass der Text links oder rechts um sie herum fließt. Dafür wird aber immer das komplette Rechteck des Bilds verwendet, auch wenn es in weiten Teilen transparent ist und der Text viel näher an das Bild rücken könnte. Textverarbeitungsprogramme wie Microsoft Word, PageMaker usw. beherrschen diese Art des Textflusses schon lange. Mit dieser PHP-Funktion wird das nun auch auf Webseiten möglich.

Die PHP-Funktion analysiert dafür das anzuzeigende Bild und erkennt transparente Bereiche auf der linken bzw. rechten Seite. Entsprechend der ermittelten Geometrie werden mehrere div-Elemente mit passender Höhe und Breite erzeugt, die dann mit dem Bild eingefügt werden. Der Text fließt dann nicht mehr um das Bild, sondern um die zusätzlichen div-Elemente und ignoriert dafür das Bildrechteck. Damit die Bilddatei nicht bei jedem Seitenaufruf analysiert werden muss (was ca. 50–200 ms dauern kann), wird der HTML-Code mit den div-Elementen zwischengespeichert. Dieser Cache wird beim Aktualisieren der Bilddatei ebenfalls aktualisiert.

Die Verwendung der Funktion erfolgt auf der PHP-Seite, außerhalb von p-Elementen. (div innerhalb von p ist nach HTML nicht zulässig und führt zu Darstellungsfehlern.) Die Funktionsparameter werden im Quelltext beschrieben. Das Bild auf dieser Seite wurde mit genau dieser Funktion eingebunden.

Wichtig: Die Pfadangaben zu den Bild- und Cache-Dateien müssen vor der Verwendung angepasst werden. Außerdem werden beim Aufruf dieser Funktion nur PNG-Bilder unterstützt. (GIF ist nicht mehr gebräuchlich und JPG unterstützt keine Transparenz.)

Kompatibilität: PHP Ab Version 5.0

Beispiel

Der folgende Beispielcode zeigt etwa, wie die ShapedImage-Funktion auf dieser Seite verwendet wird:

require_once __DIR__ . '/shapedimage.inc.php';
ShapedImage('shaped-image-demo.png', 'right');

Mit der folgenden CSS-Deklaration können die div-Elemente sichtbar gemacht werden. Das ist eher zum Debugging interessant. Mit der folgenden Checkbox kann das hier auf dieser Seite interaktiv ausprobiert werden.

.imageshape
{
    /* Layout aid */
    background: silver;   /* For IE8 or older */
    background: rgba(0, 0, 0, 0.1);
}

(Die Funktionsweise der Checkbox oben wird auf der Seite coati-JavaScript-Bibliothek beschrieben.)

Download

shapedimage.inc.php4,5 KiBQuelltext der ShapedImage-Funktion

Lizenz und Nutzungsbedingungen

Vervielfältigung und Weiterverbreitung dieser Datei, verändert oder unverändert, sind gestattet, vorausgesetzt die Urheberrechtsangabe und dieser Hinweis bleiben erhalten. Diese Datei wird wie vorliegend ohne jegliche Garantie oder Gewährleistung angeboten. (GNU All-Permissive-Lizenz)

Statistische Daten

  • Erstellt am 2011-07-20.