Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 17. Mai 2013

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.

Anzeige

css-regions-exclusions
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

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Sieht echt gut aus! Werd das gleich mal ausprobieren! Vielen Dank!
    flow-from und flow-into kannte ich so noch gar nicht! *THUMBSUP*

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.