CSS Shapes – Form von Text umfließen lassen

Formen mit Text umfließen

Mit CSS shape-outside ziehen Kreise, Rauten und Kaffeetassen ins Layout von Webseiten und richtet den Text an der Kontur von Formen aus. Shapes funktionieren nur auf Elementen mit float – das ist die glorreiche Rückkehr von float, das durch flex und grid an Zuspruch verloren hatte.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Das Ende der eckigen Blöcke

buddah-300

Die klassischen Satzprogramme lassen ein Bild oder eine Form vom Text umfließen. CSS war hingegen bislang auf Kästen und gerade Linien beschränkt, wenn wir mal von border-radius absehen und komplizierten CSS-Eigenschaften für Dreiecke und Sterne.

An CSS Shapes passt sich der Text an und lockert das Kästchen-für-Kästchen-Layout der Webseite auf. CSS shape-outside legt fünf Varianten von Formen vor.

HTML
<div class="buddah">
	<img class="circled" loading="lazy" src="buddah-300.webp" …>
	<p> … </p>
	<p> … </p>
</div>
CSS
.buddah {
	display: flow-root; /** display:flow-root – float am Ende des Blocks beenden **/
}
.circled {
	shape-outside: circle();
	clip-path: circle();
	float: left;
}

clip-path: circle() beschneidet das Bild auf einen Kreis, shape-outside: circle() bildet die Form, an die sich der folgende Text anpasst.

shape-outside Optionen

Für shape-outside gelten dieselben Optionen wie für CSS clip-path:

circle (radius at x y)
ein Kreis mit Radius und Zentrum bei x,y
ellipse (radiusX radiusY at x y)
Bildet eine Ellipse mit radiusX und radiusY und Zentrum bei x,y
inset (top right bottom left round topleft topright bottomright bottomleft)
Ein Rechteck, optional mit abgerundeten Ecken, das einen Auszug bildet
polygon (x1 y1, x2 y2, … )
ein Polygon (Vieleck) mit beliebig vielen Punkten x y
url()
Alpha-Kanal einer Bitmap-Grafik (PNG oder WebP) oder SVG-Pad aus Inline-SVG.

CSS shapes wird von allen immergrünen Browsern unterstützt, die Ausnahme ist IE11 (Überraschung!).

shape-outside circle / ellipse

shape-outside versieht Circle und Ellipse mit Einstellungen für den Radius und die Position. Per Vorgabe ist der Radius r bei 50% der angegebenen Breite. Dann sitzt der Text direkt entlang der Kontur und shape-margin legt den Abstand zwischen Text und Form fest.

                        +-- Radius
                        |
shape-outside: circle (50% at 50% 50%);
                               |   |
                               |   +-- vertikale Position
       horizontale Position –––+

legt den Radius und die Position des Kreises fest.

Neben %-Angaben funktionieren alle Maßeinheiten: em, ex, vh und vw, rem und natürlich auch Pixel. %-Werte sind am besten für responsive Anwendungen geeignet.

Das Element mit float zeigt das gewohnte Verhalten: Alle auf das Element folgenden Elemente bleiben über die gesamte Höhe des flow-Elements im Fluß, es sein denn ein Element mit float:clear beendet das Umfließen oder das Ende eines umfassenden Block mit CSS display: flow-root ist erreicht.

.half {
   width: 8em; height: 8em; 
   border-radius: 50%; float: left;
   shape-outside: circle(50% at 0 50%);
}

Ellipsen oder Ovale haben unterschiedliche Werte für Höhe und Breite, also zwei Radien rx und ry.

.ellipse {
   shape-outside: ellipse();
}

Pastry candy candy canes tiramisu chocolate cake cotton candy cupcake. Tiramisu tiramisu muffin toffee tootsie roll macaroon cake sugar plum croissant. Cupcake jelly beans wafer tootsie roll gummi bears. Caramels cotton candy lollipop. Chocolate bar fruitcake gummi bears. Chupa chups jujubes sugar plum chupa chups tart. Tiramisu cheesecake oat cake. Dragée chupa chups chupa chups marshmallow toffee cake sugar plum.


shape-outside: polygon()

Eine Polygon-Form besteht aus beliebig vielen Punktepaaren xy, die durch ein Komma voneinander getrennt sind.

Twitter

Reprehenderit, enim eiusmod high life mainus goethe ad squid. Tristest sachsendomus high noon officia, non vegan maiscolbus dolor. Flooter boot quinoa rasant eiusmod. Tweetus malis in lorem ipsum toto millium mallies. Engatis inherit cascade shape outside, nollo englesis collarandis inno letteris maximus.

Reprehenderit, enim eiusmod high life mainus goethe ad squid. Trolius sachsendomus high noon officia, non vegan maiscolbus dolor.

Flooter boot quinoa rasant eiusmod. Tweetus malis in lorem ipsum toto millium mallies. Engatis inherit cascade shape outside, nollo englesis collarandis inno letteris maximus.

Für Polygone hat Firefox ein Werkzeug in den Entwickler-Werkzeugen: Wird das Element mit shape-outside: polygon() in der Konsole markiert, zeigt Firefox ein kleines Polygon-Symbol, dessen Punkte sich in einer Life-Ansicht verschieben lassen, um die Form anzupassen.

.poly {
shape-outside: polygon symbol polygon(0% 0%, 100% 0%, 100% 20%, 100% 40%, 100% 60%, 100% 80%, 100% 100%, 0% 100%);
}

Polygon in Form bringen und die Werte aus der Konsole kopieren und ins CSS einsetzen.

shape-outside: polygon(0% 0%, 32.8% 14.73%, 92.07% 16.64%, 95.25% 26.07%, 87.18% 39%, 79.7% 67.38%, 56.19% 92.69%, 0% 100%);

Shape mit url-basierter Alpha-Maske

twitter Neben den geometrischen Pfaden zur Beschreibung der umflossenen Form wirkt auch der Alpha-Kanal eines Bildes.

Die Kontur des Texts folgt also nicht einer geometrischen Form wie circle oder polygon, sondern dem durchsichtigen Bereich des Bildes. Zwar werden kann auch GIF mit einem transparenten Hintergrund gespeichert werden, aber der transparente Teil bildet keine Maske, es muss also ein PNG sein.

shape-margin funktioniert nicht immer problemlos, darum beruft sich CSS hier zusätzlich auf ein normeles margin.

.twitter {
      shape-outside: url(twitter.webp);
      shape-margin: 1em;
      margin: 1em;
      float: left;
}

Für ein URL-basiertes Umfließen ist im Grunde genommen auch keine Bildanzeige erforderlich, das Rasterbild mit Alpha-Kanal bzw. Transparenz reicht bereits. Bestens geeignet (wenn IE11 keine Rolle mehr spielt) sind z.B. Bilder im webP-Format, das Transparenz beherrscht, aber geringere Dateigrößen erzeugt als das PNG-Format.

Browser, die CSS shape nicht unterstützen, schlagen den reservierten Platz ebenfalls frei, bringen ihn aber natürlich nicht in Form. Wenn also nur ein Shape hinterlegt ist, aber der Platz leer bleibt, bietet man besser einen Thumbnail an (z.B. mit der Hilfe von CSS @supports), damit keine unerklärliche Lücke entsteht. Damit ist IE ein idealer Kandidat, um den Stand der Maske zu prüfen.

.shapeit::before {
     content: " ";
     float: left;
     width: 95px; height:300px;
     margin-right:10em;
     shape-outside: url(dreieck.webp);
}

Die runde Außenkante ist ein Stil für den Text-Absatz (p), und wirkt durch float auf alle folgenden Elemente, bis die Kontur komplett vom Text überrundet wird oder ein clear folgt.

<p class="shapeit">Für ein URL-basiertes Umfließen …
<p> …