CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign

Dank Adobe könnten Texte auf Websites bald so gestaltet werden, wie es beispielsweise in InDesign möglich ist. Der kalifornische Software-Konzern hat zwei Vorschläge gemacht, wie sich Texte mit CSS in Form bringen lassen und wie sie auf unterschiedliche HTML-Elemente aufgeteilt werden können.

Adobe und HTML

Texte in Form bringen mit CSS-Exclusions

Texte in HTML sind bislang immer beschränkt auf eine rechteckige Grundform. Im Printdesign kennt man den sogenannten Formsatz, bei dem ein Textblock eine beliebige geometrische Form annehmen kann. Zwar gibt es JavaScript-Lösungen, die einen Formsatz darstellen können, reine HTML- und CSS-Lösungen gab es jedoch nicht.

Mit den CSS-Exclusions entstanden zwei neue CSS-Eigenschaften, die Formsätze ermöglichen. Neben (abgerundeten) Rechtecken lassen sich Texte in Kreise, Ellipsen und Polygone einpassen:

p {
  shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Mit shape-inside wird ein Formsatz erstellt, der den Text innerhalb der Form setzt. Die analoge Eigenschaft shape-outside dient dazu, Text um eine Form herumfließen zu lassen. Über polygon werden im Beispiel die Koordinaten für die Form angegeben. Jedes Zahlenpaar steht für eine X- und Y-Koordinate.

Texte auf mehrere Blöcke aufteilen mit CSS-Regions

Neben den Exclusions hat Adobe mit den CSS-Regions eine Möglichkeit geschaffen, Texte auf mehrere HTML-Elemente aufzuteilen. Auch diese Funktion kennt man aus dem Printdesign. Ein Text lässt sich dort auf mehrere Textrahmen aufteilen. So ist es möglich, einen Text problemlos innerhalb eines Dokumentes frei und, wenn gewünscht, unzusammenhängend anzuordnen.

Um Texte auf mehrere Elemente verteilen zu können, bedarf es zunächst eines Elementes, welches den kompletten Text beinhaltet. Diesem muss eine feste Höhe zugewiesen werden, die nicht für die Gesamtdarstellung ausreicht, da der Text ansonsten lediglich in diesem Element dargestellt wird. Darüber hinaus braucht es mindestens ein weiteres leeres Element, in welchem der Text weiterfließen soll. Anschließend muss per CSS noch festgelegt werden, von wo nach wo der Text laufen soll:

#text1 {
  flow-into: textfluss;
  width: 200px;
  height: 300px;
}

#text2 {
  flow-from: textfluss;
  width: 200px;
  height: 200px;
}

Im Beispiel beherbergt das Element mit der ID text1 den gesamten Text. Mit der Eigenschaft flow-into wird ein beliebiger Name für den Textverlauf vergeben (hier textfluss). Das Element mit der ID text2 erhält mit der Eigenschaft flow-form denselben Namen für den Verlauf wie text2. Somit ist definiert, dass der Text in text1 im Element text2 weiterfließen soll.

Browserunterstützung

Bislang befinden sich die CSS-Exclusions und -Regions nur in der Entwicklung. Daher unterstützt kein aktueller Browser diese Möglichkeiten. Allerdings kann man in Chrome Canary – der Developerversion von Chrome – diese Features bereits testen.

Links zum Beitrag

• Adobe und HTML

(dpe)