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.
- Herbert Braun
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.
Papierloses Büro: Wie man mit paperless-ngx die Dokumentenverwaltung optimiert
Auf Kante genäht: Was hinter dem Aus von Apple-Händler Gravis steckt
Trend-Beruf: Mit diesen Fähigkeiten wird man KI-Experte
Know-how für Heim-Admins: Alles über Ethernet-Switches
Günstigerer Strom für die Wärmepumpe: Was Sie jetzt wissen müssen
Prepaid, Debit, Credit: Wie Sie die passende Kreditkarte finden
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Papierloses Büro: Wie man mit paperless-ngx die Dokumentenverwaltung optimiert
Auf Kante genäht: Was hinter dem Aus von Apple-Händler Gravis steckt
Trend-Beruf: Mit diesen Fähigkeiten wird man KI-Experte
Know-how für Heim-Admins: Alles über Ethernet-Switches
Günstigerer Strom für die Wärmepumpe: Was Sie jetzt wissen müssen