Textumfluss mit Shapes
- 20min
- mittel
Bilder und alle anderen Elemente von Webseiten befinden sich in rechteckigen Rahmen. Standardmäßig fließt der Text oberhalb oder unterhalb dieses Rahmens. Wenn man ein Bild links oder rechts ausrichtet, fließt der Text um das Rechteck herum.
Mit Masken und Beschneidungen kann man unregelmäßige Bildausschnitte festlegen. CSS-Shapes[1] ermöglichen das Umfließen von unregelmäßigen Formen durch einen Text, wie es in Druckerzeugnissen schon lange möglich und üblich ist.
Dieses Tutorial zeigt, was geht und vor welchen Problemen man bei der Umsetzung für alle Browser heute noch steht.
Inhaltsverzeichnis
shape-outside
Mit der Eigenschaft shape-outside wird ein Element definiert, um das Text herumgeführt wird.
#shape {
shape-outside: circle(); /* Radius Standard = 50% */
clip-path: circle(45%);
float: left;
width: 12em;
height: 12em;
background: firebrick;
}
Das div-Element mit der id shape dient der Festlegung der Form, um die sich der Fließtext fließt. Die Hintergrundfarbe und der border-radius dienen nur der Visualisierung.
-
clip-path: circle(45%);beschneidet das div kreisförmig. -
shape-outside: circle(50%);zeichnet eine Kreisform, die etwas größer als der rote Kreis ist.
Der Text[2] fließt um das gefloatete Objekt herum.
Die Empfehlungen …
- ein display:block zu setzen
- width und height explizit anzugeben
Grundformen
Neben der oben erwähnten circle()-Funktion gibt es weitere SVG-ähnliche Grundformen:
- circle(): eine kreisförmige Form, z. B.:
circle('Radius' at 'x-Koordinate des Mittelpunkts' 'y-Koordinate des Mittelpunkts')
Kreis mit 50% Radius, dessen Mittelpunkt nicht in der linken oberen Ecke des äußeren Elements, sondern im äußeren Element ist. - ellipse(): eine ovale Form, z.B:
ellipse('Höhe' 'Breite' at 'x-Koordinate des Mittelpunkts' 'y-Koordinate des Mittelpunkts'); - inset(): legt eine rechteckige Form an, die aber – anders als rect() – durch den Abstand von den Seiten definiert wird, z. B.:
inset('oben' 'rechts' 'unten' 'links' 'border-radius'); - polygon(): legt Form mit beliebig vielen Fixpunkten an
Die von anderen CSS-Eigenschaften bekannten
kommen wohl, wenn Level 2 von den Browsern implementiert wird.
polygon()
Dieses Beispiel ist bereits aus dem Masken und Beschneidungen-Tutorial bekannt:
img {
float: left;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
}
img:hover {
shape-outside:polygon(0% 0%, 100% 0, 0% 100%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%);
}
Das rechteckige Bild wird mit clip-path zu einem Dreieck beschnitten. Dabei wird die polygon()-Funktion verwendet.
Sie wird mit den gleichen Werte für shape-outside genutzt, sodass der Text das jetzt dreieckige Bild umfließt.
Wenn man mit der Maus über das Bild fährt, verändern sich sowohl der mit clip-path festgelegte Bildausschnitt als auch der mit shape-outside definierte Textumfluss.
url() - Shape-Form aus einem Bild
Das Zeichnen von Grundformen ist von clip-path bekannt – im Normalfall würde man jedoch keinen leeren Raum zeichnen und dann vom Textfluss ausgrenzen.
Im Printdesign geht es ja darum, dass im Text gefloatete Bilder vom Text umflossen werden.
.voyager {
float: left;
width: 500px;
height: 334px;
shape-outside: url(https://wiki.selfhtml.org/images/f/fb/Voyager_probe.png);
margin: 0.5em;
shape-image-threshold: 0.1;
shape-margin: 1em;
}
Hier wird der Textumfluss an die Form des Bilds angepasst.
shape-outside erhält durch die url()-Funktion ein Bild mit Transparenzen, dessen Form umflossen wird.
Möglich sind
- eine Rastergrafik (GIF, PNG oder WebP); Der Browser verfolgt die Grenze zwischen transparenten und undurchsichtigen Pixeln, um die Float-Form zu erstellen.
- ein SVG; Der Browser rastert die SVG-Datei und liest den Alphakanal des Ergebnisses aus
- ein Verlauf wie
linear-gradient(transparent, blue);
Anders als im oberen Beispiel muss nichts mehr festgelegt werden; Der Browser übernimmt die Arbeit
Die Eigenschaft shape-image-threshold definiert, welcher Grad an Deckkraft (opacity) zur Erzeugung der Form herangezogen wird.
Es ist ein Wert zwischen 0.0 (völlig transparent) und 1.0 (völlig abdeckend) möglich. Standardwert ist 0.0. Ein Wert von 0.5 bedeutet, dass nur Pixel mit einer Deckkraft von 50% und mehr zur Erzeugung der Form herangezogen werden.
shape-margin legt einen Abstand um das umflossene Objekt fest.
Der Abstand kann nicht über die tatsächliche Größe des in shape-outside festgelegten Objekts hinausgehen.
Ausblick
Mit der Eigenschaft shape-inside sollte Text innerhalb von unregelmäßigen Formen passgenau eingefügt werden. Im Augenblick wird von einer Implementation in heutige Browser aber abgesehen. Gerade bei langen Wörtern ist eine manuelles Einpassen wohl einem Algorithmus vorzuziehen.
Der Einsatz von shape-outside kann eigentlich erst empfohlen werden, wenn die Darstellungsprobleme im Safari behoben werden.
Gleichzeitig ist das Web eben nicht Print. Was auf großen Bildschirmen nebeneinander gut aussieht, muss auf mobilen Geräten doch untereinander dargestellt werden, sodass Effekte wie ein Textumfluss um Bilder herum gar nicht erst benötigt werden.
Weblinks
- ↑ csswg.org: CSS Shapes Module Level 1 (vom 07.Mai 2026)
- ↑ little-boxes.de (Webseite seit 2009 nicht mehr gepflegt.)
Artikel
- mediaevent: CSS Shapes – Formen von Text umfließen lassen
- alistapart: CSS shapes 101 von Sara Soueidan
- Sara Soueidan: Creating Non-Rectangular Layouts With CSS Shapes (sehr anschaulicher Artikel mit vielen, auch komplizierteren Beispielen und Screenshots)
https://blog.logrocket.com/creative-text-flows-using-css-shapes/
Beispiele
- css-tricks: Using CSS Shapes for Interesting User Controls and Navigation von Preethi, Aug 4, 2021
Generatoren
- caliman: CSS Shapes editor
