CSS Shapes – Formen 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.

Das Ende der eckigen Blöcke

rosy-macaroon-400

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.

circle()
Bildet einen Kreis
ellipse()
Bildet eine Ellipse
inset()
Ein Rechteck, das einen Auszug bildet
Polygon()
Beliebige Form
url()
Alpha-Kanal einer Bitmap-Grafik (PNG)
.circle {
    width: 100px; height: 100px; 
    border-radius: 50%; 
    float: left;
    shape-outside: circle();
}

CSS shapes wird bereits von allen Browsern unterstützt, die Ausnahmen sind IE11 und Microsoft EDGE. In EDGE steht CSS shape immerhin auf In Betracht gezogen.

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.

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 cleat beendet das Umfließen.

.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 mit url-basierter Alpha-Maske

CSS Shapes mit PNG-Bild 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.

Dabei reicht schon PNG-8 mit zwei Farben, so dass die Kontur in diesem Beispiel weniger als 1KB beiträgt.

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

.tropfen {
      shape-outside: url(tropfen-8bit.png);
      shape-margin: 1em;
      margin: 1em;
      float: left;
      width: 120px;
}

Für ein URL-basiertes Umfließen ist im Grunde genommen auch keine Bildanzeige erforderlich, das Rasterbild mit Alpha-Kanal bzw. Transparenz reicht bereits.

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 sind Edge und IE dann ideale Kandidaten, um den Stand der Maske zu prüfen.

Immerhin wird EDGE in naher Zukunft mit der Chromium-Engine ausgestattet (seit dem 9.4.2019 ist die Beta-Version verfügbar), so dass wir auf eine breitere Unterstützung für CSS Shapes hoffen dürfen.

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

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> …