Adobe zeigt flexibles Textlayout im Browser

In einer beispielhaften Umsetzung für die Webkit-Engine zeigt Adobe, wie sich mit CSS Form- und Mehrspalten-Layout für Webseiten umsetzen lassen könnte. Seine Vorschläge hat es beim W3C zur Standardisierung eingereicht.

In Pocket speichern vorlesen Druckansicht 1 Kommentar lesen
Lesezeit: 1 Min.
Von
  • Christian Kirsch

In seinen Labs demonstriert Adobe, wie sich mit den von ihm vorgeschlagenen CSS-Regionen und -Aussparungen Text auf Webseiten wesentlich flexibler als bisher formatieren lassen könnte. Das Verfahren erinnert an die aus DTP-Programmen bekannten Textflüsse, die Rahmen miteinander verbinden. In Adobes Vorschlag heißen die Konzepte "Region" und "Text flow".

Ein solcher Textfluss wird via CSS einer oder mehreren Regionen zugeordnet. Die Reihenfolge, in denen die Regionen befüllt werden, folgt entweder ihrer Position im HTML-Dokument oder der ebenfalls per CSS angegebenen "content-order". Ergänzend kommen Konturen ("Shapes") hinzu. Das sind Polygone innerhalb eines Blockelements (etwa ein div), deren Koordinaten in der CSS-Eigenschaft wrap-shape angegeben werden. Das Attribut wrap-shape-mode regelt, ob der Text um die Kontur herum fließt oder innerhalb von ihr dargestellt wird.

Adobe CSS (5 Bilder)

Textfluss über mehrere Spalten

(Bild: adobe.com)

Die von Adobe bereitgestellten Pakete für Windows und Mac OS X enthalten neben einem angepassten Browser einige Beispiele. Diese verwenden die erwähnten neuen CSS-Attribute jeweils mit einem vorangestellten -webkit-, was auf ihren proprietären Charakter hinweist. (ck)