Einführung
Das Web ist eine äußerst leistungsstarke Plattform für Text, ein Bereich, in dem Adobe über umfangreiche Erfahrung und Fachwissen verfügt. Als Adobe nach Möglichkeiten suchte, das Web voranzubringen, war es für uns daher naheliegend, die Textfunktionen des Webs weiter zu verbessern. Im Web wird in der Regel eine einzelne Spalte mit vertikaler Textausrichtung verwendet. Es ist zwar möglich, Text um Grafiken herum zu fließen und sogar mit CSS in mehrere Spalten zu formatieren, aber es ist immer noch sehr schwierig, ein echtes Magazin-Layout im Web zu erreichen. Mit CSS-Regionen und CSS-Ausschlüssen führt Adobe die Entwicklung voran, um die Vorteile des Desktop Publishings auf moderne Browser auszuweiten. Im folgenden Screenshot wird beispielsweise CSS-Ausschluss verwendet, um Text entlang der Kontur des Berges zu fließen:
Im Dokument im Screenshot unten werden außerdem CSS-Ausschlüsse verwendet, damit der Text um Formen in den Bildern herum umgebrochen werden kann, sowie CSS-Regionen, um Text in Spalten und um ein Zitat zu formatieren:
Preisvergleichsportal-Regionen
Bevor ich auf die Details von CSS-Regionen eingehe, möchte ich erklären, wie Regionen in Google Chrome aktiviert werden können. Nachdem Sie Preisvergleichsportal-Regionen aktiviert haben, können Sie einige der in diesem Artikel erwähnten Beispiele ausprobieren und eigene erstellen.
CSS-Regionen in Google Chrome aktivieren
Ab Version 20 von Chrome (genauer gesagt Version 20.0.1132.57) sind CSS-Regionen über die chrome://flags-Benutzeroberfläche aktiviert. So aktivierst du CSS-Regionen:
- Öffnen Sie in Chrome einen neuen Tab oder ein neues Fenster.
- Geben Sie
chrome://flagsin die Suchleiste ein. - Verwenden Sie die Funktion Auf der Seite suchen (Strg/Befehlstaste + F) und suchen Sie nach dem Abschnitt Experimentelle Webplattform-Funktionen.
- Klicken Sie auf den Link Aktivieren.
- Klicken Sie unten auf die Schaltfläche Jetzt neu starten.
Weitere Informationen zu Chrome-Flags finden Sie in meinem Blogpost All About Chrome Flags.
Nachdem Sie Ihren Browser neu gestartet haben, können Sie mit CSS-Regionen experimentieren.
Übersicht über Preisvergleichsportal-Regionen
Mit CSS-Regionen kann ein Block semantisch markierten Texts automatisch in „Boxen“ (aktuell Elemente) eingefügt werden. Das folgende Diagramm zeigt die Trennung von Text (den Fluss) und Feldern (die Regionen, in die der Text fließt):
Sehen wir uns einen Anwendungsfall für CSS-Regionen an. Ich bin nicht nur Entwickler bei Adobe, sondern auch Science-Fiction-Autor. Ich veröffentliche meine Arbeit häufig online unter einer Creative Commons-Lizenz. Damit sie auf möglichst vielen Geräten und in möglichst vielen Browsern funktioniert, verwende ich häufig ein extrem einfaches Format, das in etwa so aussieht:
Mithilfe von CSS-Regionen konnte ich eine Website erstellen, die sowohl visuell ansprechender als auch viel funktionaler ist, da sie einfacher zu bedienen und angenehmer zu lesen ist:
Zu Demonstrationszwecken habe ich in diesem Prototyp die Möglichkeit hinzugefügt, Preisvergleichsportal-Regionen einzublenden. Der Screenshot unten zeigt, wie die Bereiche so angeordnet sind, dass sie den Eindruck von Säulen erwecken, die sich um eine Grafik und ein Zitat in der Mitte winden:
Hier können Sie mit diesem Prototyp experimentieren und sich den Quellcode ansehen. Verwenden Sie die Pfeiltasten, um sich zu bewegen, und drücken Sie die Taste Esc, um Regionen einzublenden. Frühere Prototypen sind hier verfügbar.
Benannten Ablauf erstellen
Das CSS, das erforderlich ist, damit ein Textblock durch Regionen fließt, ist äußerst einfach. Im folgenden Snippet wird einem Div-Element mit der ID „content“ ein benannter Ablauf namens „article“ zugewiesen. Derselbe benannte Ablauf „article“ wird allen Elementen mit der Klasse „region“ zugewiesen. Das Ergebnis ist, dass Text im Element „content“ automatisch in jedes Element mit der Klasse „region“ eingefügt wird.
<!DOCTYPE html>
<html>
<head>
<style>
#content {
{ % mixin flow-into: article; % }
}
.region {
{ % mixin flow-from: article; % }
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
#box-a {
border: 1px solid red;
top: 10px;
left: 10px;
}
#box-b {
border: 1px solid green;
top: 210px;
left: 210px;
}
#box-c {
border: 1px solid blue;
top: 410px;
left: 410px;
}
</style>
</head>
<body>
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="box-c" class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
</div>
</body>
</html>
Dies führt zu folgendem Ergebnis:
Der Text im Div-Element „content“ weiß nichts über seine Darstellung. Mit anderen Worten: Sie kann auch dann vollständig semantisch intakt bleiben, wenn sie durch verschiedene Regionen fließt. Da Regionen nur Elemente sind, werden sie wie jedes andere Element mit CSS positioniert und skaliert. Sie sind daher perfekt mit den Prinzipien des responsiven Designs kompatibel. Wenn Sie Elemente als Teil eines benannten Ablaufs festlegen, bedeutet das einfach, dass der angegebene Text automatisch durch sie hindurchläuft.
Das CSS-Objektmodell
Das CSS Object Model (CSSOM) definiert JavaScript APIs für die Arbeit mit CSS. Im Folgenden finden Sie eine Liste der neuen APIs im Zusammenhang mit Preisvergleichsportal-Regionen:
document.webkitGetNamedFlows(): Eine Funktion, die die im Dokument verfügbaren benannten Abläufe zurückgibt.document.webkitGetNamedFlows().namedItem("article"): Eine Funktion, die eine Referenz auf einen bestimmten benannten Ablauf zurückgibt. Das Argument entspricht dem Namen, der als Wert der CSS-Propertiesflow-intoundfrom-fromangegeben ist. Wenn Sie einen Verweis auf den im Code-Snippet oben angegebenen benannten Ablauf erhalten möchten, geben Sie den String „article“ ein.WebKitNamedFlow: Eine Objektdarstellung eines benannten Floes mit den folgenden Eigenschaften und Funktionen:firstEmptyRegionIndex: Ein Ganzzahlwert, der auf den Index der ersten leeren Region verweist, die mit dem benannten Fluss verknüpft ist. UntergetRegions()unten erfahren Sie, wie Sie die Sammlung von Regionen abrufen.name: Ein Stringwert mit dem Namen des Ablaufs.overset: Eine boolesche Property, die folgende Eigenschaften hat:false, wenn der Inhalt des benannten Ablaufs in die zugehörigen Regionen passttrue, wenn die Inhalte nicht passen und mehr Regionen erforderlich sind, um alle Inhalte zu enthalten.
getContent(): Eine Funktion, die eine Sammlung mit Verweis auf die Knoten zurückgibt, die in den benannten Fluss fließen.getRegions(): Eine Funktion, die eine Sammlung mit Verweis auf Regionen zurückgibt, die den Inhalt des benannten Ablaufs enthalten.getRegionsByContentNode(node): Eine Funktion, die einen Verweis auf die Region zurückgibt, die den angegebenen Knoten enthält. Das ist besonders nützlich, um Bereiche zu finden, die z. B. benannte Anker enthalten.
webkitregionoversetchange-Ereignis. Dieses Ereignis wird bei einemWebkitNamedFlowausgelöst, wenn sich das Layout der zugehörigen Inhalte aus irgendeinem Grund ändert (Inhalte werden hinzugefügt oder entfernt, die Schriftgröße ändert sich, die Form der Region ändert sich usw.) und diewebkitRegionOverset-Eigenschaft einer Region sich ändert. Dieses Ereignis ist nützlich, um grobe Layoutänderungen zu erfassen. Dies ist ein Hinweis darauf, dass etwas Wichtiges passiert ist und das Layout möglicherweise angepasst werden muss, z. B. weil mehr Regionen erforderlich sind oder einige Regionen leer sind.webkitregionfragmentchange-Ereignis. Zum Zeitpunkt dieser Änderung noch nicht implementiert. Dieses Ereignis wird bei einemWebkitNamedFlowausgelöst, wenn sich das Layout der zugehörigen Inhalte aus irgendeinem Grund ändert. Ähnlich wie beiwebkitregionoversetchange, aber unabhängig von Änderungen anwebkitRegionOverset-Properties. Dieses Ereignis ist nützlich, um auf detaillierte Layoutänderungen zu achten, die sich nicht unbedingt auf das gesamte Layout des benannten Ablaufs auswirken. Beispiel: Inhalte werden von einer Region in eine andere verschoben, aber die Gesamtinhalte passen weiterhin in alle Regionen.Element.webkitRegionOverset: Elemente werden zu Regionen, wenn ihnen die CSS-Propertyflow-fromzugewiesen ist. Diese Elemente haben die PropertywebkitRegionOverset. Wenn sie Teil eines benannten Ablaufs sind, gibt sie an, ob Inhalte aus einem Ablauf die Region überlaufen. Mögliche Werte für webkitRegionOverset:- „overflow“, wenn mehr Inhalt vorhanden ist, als in der Region Platz ist
- „fit“, wenn der Inhalt vor dem Ende der Region endet
- „empty“, wenn die Inhalte die Region nicht erreicht haben
Eine der Hauptanwendungen des CSSOM besteht darin, auf webkitregionoversetchange-Ereignisse zu warten und dynamisch Bereiche hinzuzufügen oder zu entfernen, um unterschiedlichen Textmengen gerecht zu werden. Wenn beispielsweise die Menge des zu formatierenden Texts nicht vorhersehbar ist (z. B. von Nutzern generiert), das Browserfenster eine andere Größe hat oder sich die Schriftgröße ändert, müssen möglicherweise Bereiche hinzugefügt oder entfernt werden, um der Änderung des Flusses Rechnung zu tragen. Wenn Sie Ihre Inhalte auf Seiten organisieren möchten, benötigen Sie außerdem einen Mechanismus zum dynamischen Ändern des DOM und Ihrer Regionen.
Im folgenden JavaScript-Code-Snippet wird gezeigt, wie mit dem CSSOM nach Bedarf dynamisch Regionen hinzugefügt werden. Zur Vereinfachung werden hier keine Regionen entfernt und die Größe und Position von Regionen nicht definiert. Das Beispiel dient nur zu Demonstrationszwecken.
var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);
function onLayoutUpdate(event) {
var flow = event.target;
// The content does not fit
if (flow.overset === true) {
addRegion();
} else {
regionLayoutComplete();
}
}
function addRegion() {
var region = document.createElement("div");
region.style = "flow-from: article";
document.body.appendChild(region);
}
function regionLayoutComplete() {
// Finish up your layout.
}
Weitere Demos finden Sie auf der Beispielseite für Preisvergleichsportale nach Region.
Seitenvorlagen für Preisvergleichsportale
Die Nutzung des CSSOM ist wahrscheinlich die leistungsstärkste und flexibelste Möglichkeit, Dinge wie Seitenwechsel und responsives Layout zu implementieren. Adobe arbeitet jedoch schon lange genug mit Text- und Desktop-Publishing-Tools, um zu wissen, dass Designer und Entwickler auch eine einfachere Möglichkeit für relativ generische Seitenwechselfunktionen benötigen. Deshalb arbeiten wir an einem Vorschlag namens CSS-Seitenvorlagen, mit dem das Paginierungsverhalten vollständig deklarativ definiert werden kann.
Sehen wir uns einen gängigen Anwendungsfall für CSS-Seitenvorlagen an. Im folgenden Code-Snippet wird gezeigt, wie mit CSS zwei benannte Aufrufabfolgen erstellt werden: „article-flow“ und „timeline-flow“. Außerdem wird eine dritte Auswahl namens „combined-articles“ definiert, in der die beiden Ströme enthalten sind. Durch die einfache Einbindung der Eigenschaft overflow-style in die Auswahl „combined-articles“ wird angegeben, dass die Inhalte automatisch entlang der X-Achse, also horizontal, geblättert werden sollen:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Nachdem die Aufrufabfolgen definiert und das gewünschte Überlaufverhalten festgelegt wurde, können wir die Seitenvorlage selbst erstellen:
@template {
@slot left {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
@slot time {
width: 25%;
float: left;
{ % mixin flow-from: timeline-flow; % }
}
@slot right {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
}
Seitenvorlagen werden mit der neuen „at“-Syntax definiert. Im obigen Code-Snippet definieren wir drei Slots, die jeweils einer Spalte entsprechen. Der Text aus „article-flow“ wird in den Spalten links und rechts angezeigt und der Text aus „timeline-flow“ wird in der Spalte in der Mitte eingefügt. Das Ergebnis könnte in etwa so aussehen:
Der Artikeltext – also der Text in den linken und rechten Spalten – ist auf Englisch, die Zeitachse in der Mitte ist auf Deutsch. Außerdem können die Seiten des Dokuments horizontal gedreht werden, ohne dass JavaScript-Code erforderlich ist. Alles wurde vollständig deklarativ in CSS erstellt.
CSS-Seitenvorlagen sind noch ein Vorschlag. Wir haben jedoch einen Prototyp, der einen JavaScript-„Shim“ (auch Polyfill genannt) verwendet, damit Sie schon jetzt damit experimentieren können.
Weitere Informationen zu CSS-Regionen finden Sie auf der Seite „CSS-Regionen“ auf html.adobe.com.
CSS-Ausschlüsse
Um ein echtes Magazin-Layout zu erzielen, reicht es nicht aus, Text durch Regionen fließen zu lassen. Ein wichtiges Element für hochwertige und visuell ansprechende Desktop Publishing-Dokumente ist die Möglichkeit, Text entweder um oder innerhalb von unregelmäßigen Grafiken und Formen zu fließen. Mit CSS-Ausschlüssen wird diese Produktionsqualität nun auch im Web möglich.
Der folgende Screenshot stammt aus einem Prototyp für CSS-Ausschlüsse und zeigt Text, der dynamisch um einen Pfad fließt, der der Kontur einer großen Felsformation entspricht:
Im nächsten Screenshot ist das Gegenteil zu sehen: Text, der sich innerhalb unregelmäßig geformter Polygone bewegt:
Der erste Schritt, um Text um oder innerhalb beliebiger Formen fließen zu lassen, besteht darin, die erforderlichen Algorithmen zu entwickeln und zu optimieren. Adobe arbeitet derzeit an Implementierungen, die direkt in WebKit einfließen werden. Sobald diese Algorithmen optimiert sind, bilden sie die Grundlage für den Rest der CSS-Ausschlüsse.
Weitere Informationen zu CSS-Ausschlüssen finden Sie auf der Seite „CSS-Ausschlüsse“ auf html.adobe.com. Einen detaillierteren Einblick in die Arbeit von Adobe an der zugrunde liegenden Technologie für CSS-Ausschlüsse bietet der Blogpost von Hans Müller Horizontal Box: Polygon Intersection for CSS Exclusions (Horizontale Box: Polygonüberschneidung für CSS-Ausschlüsse).
Aktueller Status von Preisvergleichsportal-Regionen und -Ausschlüssen
Das erste Mal, dass ich öffentlich über Preisvergleichsportal-Regionen und Preisvergleichsportal-Ausschlüsse gesprochen habe, war im Adobe Developer Pod auf der Google I/O 2011. Damals habe ich Demos in unserem eigenen benutzerdefinierten Prototyp-Browser gezeigt. Die Resonanz war äußerst positiv, aber die Zuschauer waren sichtlich enttäuscht, als sie feststellten, dass keine der von mir gezeigten Funktionen in den gängigen Browsern verfügbar war.
Ich war auch dieses Jahr (2012) wieder auf der Google I/O, diesmal als Vortragender zusammen mit meinem Kollegen Vincent Hardy und Alex Danilo von Google. Die Präsentation können Sie sich hier ansehen. Nur ein Jahr später wurden etwa 80% der CSS-Regions-Spezifikation in WebKit implementiert und sind bereits in der neuesten Version von Google Chrome verfügbar. CSS-Regions müssen derzeit jedoch über chrome://flags aktiviert werden. Vorläufige Unterstützung für CSS-Regions ist sogar in Chrome für Android verfügbar:
Außerdem sind sowohl CSS-Regionen als auch CSS-Ausschlüsse in der Internet Explorer 10-Vorabversion implementiert und derzeit in der Mozilla-Roadmap für Firefox 2012 enthalten. Die nächste Hauptversion von Safari sollte den Großteil der CSS-Regionsspezifikation unterstützen. Die restlichen Funktionen werden in den Folgeversionen hinzugefügt.
Unten finden Sie eine detaillierte Zeitleiste mit den Fortschritten, die wir seit unserem ersten Vorschlag an das W3C im April 2011 bei CSS-Regionen und CSS-Ausschlüssen gemacht haben:
Fazit
Adobe hat durch Tools wie InDesign umfangreiche Erfahrung mit Text, Schriftarten und Desktop Publishing im Allgemeinen. Das Web ist bereits eine sehr leistungsstarke Plattform für Text. Wir möchten unser Wissen und unsere Erfahrung nutzen, um die Textpräsentation noch weiter voranzutreiben. Mit CSS-Regionen und CSS-Ausschlüssen können Inhalte semantisch strukturiert bleiben und gleichzeitig ein echtes, magazinähnliches Layout und letztendlich ein viel ausdrucksstärkeres Web ermöglichen.