Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign

CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 17. Mai 2013

Inhaltsverzeichnis

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.

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

  • Adobe und HTML

(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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Profilbild Dominik Kienzle.

Dominik Kienzle

München

promomasters online marketing seo agentur logo für wien, salzburg, zell am see.

PromoMasters Online Marketing

Wien

Wee Media Agentur Logo.

Wee Media | Webdesign Agentur

Dernbach

shortways communications

München

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Eine Antwort zu „CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign“
— was ist Deine Meinung?

  1. LuisaLi sagt:
    28. September 2013 um 22:01 Uhr

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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑