CSS Shapes: So richtest du Text an Formen aus

In Anwendungen wie InDesign oder QuarkXPress ist der Textumfluss eine klassische Möglichkeit, freigestellte Bilder und Grafiken sowie andere Pfaden mit Text umfließen zu lassen. Mit den CSS Shapes hast du seit CSS3 im Webdesign die Möglichkeit, solchen Textumfluss zu realisieren. Dazu kannst du sowohl Pfade definieren, an denen ein Text entlang laufen soll, als auch freigestellte Bilder definieren, an denen sich ein Text orientieren soll.

CSS Shapes: So richtest du Text an Formen aus

Kreise, Ellipsen und Polygone für Umfluss definieren

Um einen Textumfluss mit einfachen Pfaden zu erstellen, benötigt es zunächst ein Element, an dem der Text entlang fließen soll. Hier bietet sich ein „<div>“-Container an, dem eine Breite und Höhe zugewiesen werden, sowie die „float“-Eigenschaft, die dafür sorgt, dass nachfolgender Text an dem Element entlang läuft.

<div></div>
<p>Lorem ipsum …</p>

Bis hier hast du ein klassisches rechteckiges Element. Mit der Shape-Eigenschaft „shape-outside“ definierst du nun einen Pfad, der anstelle der rechteckigen Form für den Textumfluss sorgt.

div {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle(50%);
}

Im Beispiel wird ein Kreis mit einem Radius von 50 Prozent definiert. Zusätzlich kannst du auch den Kreismittelpunkt festlegen, wenn dieser nicht im Zentrum des Elementes liegen soll.

div {
  shape-outside: circle(50% at 50px 100px);
}

css-shapes_kreis
Einfacher Kreis, um den der Text fließt

Im zweiten Beispiel ist der Mittelpunkt 50 Pixel vom linken und 100 Pixel vom oberen Rand des Elementes entfernt. Mit „shape-outside“ wird im Übrigen nur ein Pfad für den Textumfluss erstellt. Gibst du dem „<div>“-Element im Beispiel eine Hintergrundfarbe, wird diese auf die rechteckige Grundform des Elementes angewendet und nicht auf den Kreis.

Statt Kreise sind auch Ellipsen möglich, bei denen du zwei Radien angibst.

div {
  shape-outside: ellipse(50% 25% at 50px 100px);
}

Die per „shape-outside“ definieren Pfade müssen nicht die komplette Fläche des Elementes ausfüllen. Sie können auch deutlich kleiner sein. Text wird sich ausschließlich an diesem Pfad orientieren und die eigentliche Größe des „<div>“-Elementes komplett ignorieren.

Für komplexere Formen kannst du ein Polygon anlegen, dessen Koordinatenpaare du per Komma voneinander getrennt übergibst.

div {
  shape-outside: polygon(150px 0, 179px 41px, 225px 20px, …);
}

Bilder als Shape nutzen

Ganz häufig will man einen Text nicht um eine einfache geometrische Form, sondern um ein freigestelltes Bild fließen lassen. Statt die Außenform des freigestellten Bildes mit einem Pfad nachzeichnen zu müssen, gibt es mit „shape-outside“ auch die Möglichkeit, direkt ein freigestelltes Bild zu übergeben. Voraussetzung ist, dass das Bild über einen Alphakanal besitzt und der Bereich außerhalb des freigestellten Objektes eine Transparenz besitzt.

<img src="rose.png" />
<p>Lorem ipsum …</p>

Im Beispiel wird nun statt eines einfachen „<div>“-Containers ein Bild gesetzt, welches ebenfalls per „float“ dafür sorgt, dass der nachfolgende Text daran entlang läuft. Statt einer geometrischen Form wird die Bildadresse der Eigenschaft „shape-outside“ per „url()“ zugewiesen.

div {
  float: left;
  shape-outside: url("rose.png");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}

css-shapes_bild
Freigestelltes Bild, um das der Text fließt

Die zusätzliche Eigenschaft „shape-image-treshold“ gibt an, wie viel Transparenz das Bild mindestens aufweisen muss, damit diese für den Textumfluss angewendet werden soll. Bei 0 werden nur Bereiche berücksichtigt, die zu 100 Prozent transparent sind. Im Beispiel wird eine Transparent von 50 Prozenz und mehr akzeptiert. Außerdem wird mit der Eigenschaft „shape-margin“ noch ein Abstand definiert zwischen dem freigestellten Bild und dem Text.

Auf diese Weise realisierst du ohne großen Aufwand Textumfluss, wie er bislang nur in Satz- und Layoutanwendungen möglich war.

Chrome-Erweiterung für CSS Shapes

css-shapes_chrome-erweiterung1
Chrome-Erweiterung ergänzt „Shapes“-Reiter

Um CSS Shapes direkt im Browser in der Größe und Position verändern und zu können, gibt es die Chrome-Erweiterung „CSS Shapes Editor“. Ist sie installiert, findest du in deinen Entwicklerwerkzeugen unter „Elements“ einen eigenen Reiter „Shapes“. Wählst du ein Element aus, welches per „shape-outside“ ausgezeichnet ist, siehst du im „Shapes“-Reiter diese Eigenschaft.

css-shapes_chrome-erweiterung2
Eigene Formen direkt im Browser zeichnen

Im Browser wird der Bereich des Pfades, der ansonsten ja nicht sichtbar ist, farblich hervorgehoben. Außerdem änderst du Größe und Position des Pfades oder erstellst neue Pfade. So kannst du ein Polygon hinzufügen und dieses direkt im Browser zeichnen. Später kopierst du die Werte der Form und fügst sie in deinen eigenen Quelltext ein.

Wer den kostenlosen Editor Brackets verwendet, den wir dir in diesem Beitrag vorstellten, findet an dieser Stelle eine entsprechende Erweiterung, um CSS Shapes komfortabel erstellen und bearbeiten zu können.

Eine beeindruckende Demo zur Verwendung von CSS Shapes gibt es bei Adobe: Alice in Wonderland.

Browserunterstützung

Derzeit unterstützen Chrome, Safari und Opera die Eigenschaft „shape-outside“. Firefox, Internet Explorer und Edge können mit CSS Shapes noch nichts anfangen.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.