Mit CSS Shapes Textumfluss in Browsern gestalten

Bisher waren alle Elemente einer Webseite mit CSS nur Rechtecke. CSS Shapes durchbricht diese Einschränkung – und ist nun in den meisten Browsern verfügbar.

Lesezeit: 6 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 1 Beitrag
Von

Eine eckige Box in einer eckigen Box in einer eckigen Box, alle mit Padding, Border und Margin – so sehen Webseiten durch die CSS-Brille betrachtet aus. Man kann mit Stylesheets aber auch andere Formen als Vierecke zeichnen, wenn man zu Hacks mit Transparenz und border-radius greift. Der Unterschied macht sich bemerkbar, wenn Sie Text um das Element herumfließen lassen. Statt sich elegant an einer Rundung oder Schräge auszurichten – wie in fast jeder Illustrierten zu sehen –, verläuft der linke Textrand in HTML und CSS stets exakt senkrecht. Diese Beschränkung im Web zu umgehen, war bisher nur mit SVG oder einzeln ausgerichteten Zeilen (manuell oder per JavaScript) möglich.

Mit CSS Shapes kann man nun Text um Formen, etwa Ellipsen und Polygone, herum laufen lassen. In Chrome und Safari ist dieses CSS-Modul schon seit geraumer Zeit implementiert. Seit Kurzem steht es auch für Firefox (ab Version 62) zur Verfügung. Unter den aktuellen Browsern fehlt es nur in Edge. Da Microsofts Browser aber einen Chromium-Unterbau erhalten soll, ist es nur eine Frage der Zeit, bis auch er CSS Shapes beherrscht. Als Notlösung für Edge und Internet Explorer sowie für ältere Browser steht Adobes Skript css-shapes-polyfill (Download) zur Verfügung.

Die Idee zu CSS Shapes stammt nicht von den üblichen Verdächtigen aus dem Lager der Browser-Hersteller, sondern von Adobe. Es hat einige Jahre gedauert seit den ersten Entwürfen und experimentellen Implementierungen in Browsern. Vorsicht also vor älteren Online-Tutorials: Mancher darin vorgestellter Code ist inzwischen aus der Spezifikation und aus den Browsern geflogen.

Immer mehr Wissen. Das digitale Abo für IT und Technik.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - monatlich kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+