Magazinähnliches Layout für das Web mit Preisvergleichsportal-Regionen und -Ausschlüssen

Einleitung

Das Web ist eine äußerst leistungsfähige Textplattform, in der Adobe über eine große Erfahrung und Expertise verfügt. Als Adobe nach Möglichkeiten suchte, das Web voranzubringen, schien die Weiterentwicklung der Textfunktionen des Webs für uns ein naheliegender Anfang zu sein. Im Web wird für Text im Allgemeinen von einer einspaltigen, vertikalen Ausrichtung ausgegangen. Obwohl es möglich ist, Text um Grafiken herum zu fließen und Text mit CSS in mehrere Spalten zu formatieren, ist es im Web immer noch sehr schwierig, ein echtes zeitschriftenähnliches Layout zu erzielen. Mit Preisvergleichsportal-Regionen und Preisvergleichsportal-Ausschlüssen hat Adobe eine Vorreiterrolle dabei, die Möglichkeiten der Desktop-Veröffentlichung für moderne Browser zu nutzen. Im Screenshot unten werden CSS-Ausschlüsse verwendet, um Text entlang der Kontur des Berges zu übertragen:

Im Dokument im Screenshot unten werden auch CSS-Ausschlüsse verwendet, damit der Text Formen in den Bildern umbrechen kann, sowie CSS-Regionen, um Text in Spalten und um ein Pull-Zitat zu formatieren:

Preisvergleichsportal-Regionen

Bevor wir auf die Preisvergleichsportal-Regionen eingehen, möchte ich Ihnen zunächst erläutern, 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 Ihre eigenen erstellen.

Aktivieren von Preisvergleichsportal-Regionen in Google Chrome

Ab Version 20 von Chrome (Version 20.0.1132.57, um genau zu sein) werden Preisvergleichsportal-Regionen über die chrome://flags-Oberfläche aktiviert. So aktivieren Sie Preisvergleichsportal-Regionen:

1. Öffnen Sie in Chrome einen neuen Tab oder ein neues Fenster.
2. Geben Sie chrome://flags in die Adressleiste ein.
3. Verwenden Sie die Funktion Auf Seite suchen (Steuerung/Befehlstaste + f) und suchen Sie nach dem Abschnitt Experimental Web Platform features (Experimentelle Webplattformfunktionen).
4. Klicken Sie auf den Link Aktivieren.
5. Klicken Sie unten auf die Schaltfläche Jetzt neu starten.

Weitere Informationen zu Chrome-Flags finden Sie in meinem Blogpost Alles über Chrome-Flags.

Sobald Sie Ihren Browser neu gestartet haben, können Sie mit Preisvergleichsportal-Regionen experimentieren.

Übersicht über die Regionen für Preisvergleichsportale

Mit CSS-Regionen kann ein Block mit semantisch ausgezeichnetem Text automatisch in Kästchen (derzeit Elemente) übergehen. Das folgende Diagramm zeigt die Trennung von Text (dem Textfluss) und Feldern (den Regionen, in die der Text fließt):

Sehen wir uns einen praktischen Anwendungsfall für Preisvergleichsportal-Regionen an. Ich bin nicht nur Entwickler bei Adobe, sondern auch Science-Fiction-Schreibende. 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 funktionieren kann, verwende ich häufig ein sehr einfaches Format, das dem folgenden ähnelt:

Durch die Verwendung von Preisvergleichsportal-Regionen konnte ich eine Website erstellen, die sowohl visuell interessanter als auch funktionaler ist, da die Navigation einfacher ist und das Lesen angenehmer ist:

Zu Demonstrationszwecken habe ich in diesem Prototyp die Möglichkeit hinzugefügt, CSS-Regionen anzuzeigen. Der folgende Screenshot zeigt, wie die Bereiche so angeordnet sind, dass sie den Eindruck vermitteln, dass es sich um Spalten handelt, die um eine Grafik und ein Zitat in der Mitte verlaufen:

Sie können mit diesem Prototyp experimentieren und sich den Quellcode ansehen. Verwenden Sie die Pfeiltasten zum Navigieren und drücken Sie die Esc-Taste, um Regionen einzublenden. Frühere Prototypen finden Sie hier.

Benannten Ablauf erstellen

Das CSS, das zum Abrufen eines Textblocks erforderlich ist, um sich durch Regionen zu bewegen, ist äußerst einfach. Das folgende Snippet weist einem div-Element mit der ID "content" einen benannten Ablauf namens "article" zu und weist diesen "article" benannten "flow" jedem Element mit der Klasse "region" zu. Das hat zur Folge, dass der im Element "content" enthaltene Text automatisch durch jedes Element mit der Klasse "region" fließt.

<!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:

Beachten Sie, dass der Text innerhalb des div-Elements „content“ keine Informationen über seine Darstellung enthält. Mit anderen Worten, sie kann semantisch intakt bleiben, selbst wenn sie durch verschiedene Regionen fließt. Da Regionen nur Elemente sind, werden sie mithilfe von CSS wie jedes andere Element positioniert und ihre Größe so angepasst, dass sie perfekt mit den Prinzipien des responsiven Webdesigns kompatibel sind. Das Kennzeichnen von Elementen als Teil eines benannten Ablaufs bedeutet einfach, dass der angegebene Text automatisch durch sie fließt.

CSS-Objektmodell

Das CSS Object Model (CSSOM) definiert JavaScript APIs für die Arbeit mit CSS. Nachfolgend finden Sie eine Liste der neuen APIs für Preisvergleichsportal-Regionen:

• document.webkitGetNamedFlows(): Eine Funktion, die die Sammlung der im Dokument verfügbaren benannten Abläufe zurückgibt.
• document.webkitGetNamedFlows().namedItem("article"): Eine Funktion, die einen Verweis auf einen bestimmten benannten Ablauf zurückgibt. Das Argument entspricht dem Namen, der als Wert der CSS-Eigenschaften flow-into und from-from angegeben wurde. Um einen Verweis auf den im obigen Code-Snippet angegebenen benannten Ablauf zu erhalten, übergeben Sie den String „article“.
• WebKitNamedFlow: Eine Objektdarstellung einer benannten Floe mit den folgenden Eigenschaften und Funktionen:
  • firstEmptyRegionIndex: Ein ganzzahliger Wert, der auf den Index der ersten leeren Region verweist, die dem benannten Ablauf zugeordnet ist. Unter getRegions() erfahren Sie, wie Sie die Sammlung von Regionen abrufen.
  • name: Ein Stringwert mit dem Namen des Ablaufs.
  • overset: Eine boolesche Eigenschaft, die Folgendes ist:
    • false, wenn der Inhalt des benannten Ablaufs in die verknüpfte Region passt
    • true, wenn der Inhalt nicht passt und weitere Regionen erforderlich sind, um den gesamten Inhalt zu enthalten.
  • getContent(): Eine Funktion, die eine Sammlung mit Verweisen auf die Knoten zurückgibt, die in den benannten Ablauf einfließen.
  • getRegions(): Eine Funktion, die eine Sammlung mit Verweisen 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. Dies ist besonders nützlich, um Regionen zu finden, die Dinge wie benannte Anker enthalten.
• webkitregionoversetchange Ereignis. Dieses Ereignis wird bei einem WebkitNamedFlow ausgelöst, wenn sich das Layout des zugehörigen Inhalts aus irgendeinem Grund ändert (Inhalte werden hinzugefügt oder entfernt, die Schriftgröße ändert sich, die Form der Region ändert sich usw.) und die Eigenschaft webkitRegionOverset einer Region ändern. Dieses Ereignis ist nützlich, um auf grobe Layoutänderungen zu warten. Dies ist ein Indikator dafür, dass etwas Wichtiges passiert ist und dass das Layout möglicherweise Aufmerksamkeit erfordert, z. B.: mehr Regionen erforderlich, einige Regionen sind möglicherweise leer usw.
• webkitregionfragmentchange Ereignis. Zum Zeitpunkt dieser Änderung nicht implementiert. Dieses Ereignis wird für ein WebkitNamedFlow ausgelöst, wenn sich das Layout der zugehörigen Inhalte aus irgendeinem Grund ändert (ähnlich wie bei webkitregionoversetchange), aber unabhängig von Änderungen der webkitRegionOverset-Eigenschaften. Dieses Ereignis ist nützlich, um auf detaillierte Layoutänderungen zu warten, die sich nicht unbedingt auf das gesamte Layout des benannten Ablaufs auswirken. Beispiel: Inhalte werden von einer Region in eine andere verschoben, der Gesamtinhalt passt aber weiterhin in alle Regionen.
• Element.webkitRegionOverset: Elemente werden zu Regionen, wenn ihnen die CSS-Eigenschaft flow-from zugewiesen wird. Diese Elemente haben ein webkitRegionOverset-Attribut, das angibt, ob der Inhalt eines Ablaufs die Region überläuft, wenn sie Teil eines benannten Ablaufs sind. Für „webkitRegionOverset“ sind folgende Werte möglich:
  • „Überlauf“, wenn mehr Inhalte vorhanden sind, als die Region aufnehmen kann
  • „fit“, wenn der Inhalt vor dem Ende der Region endet
  • „leer“, wenn der Inhalt die Region noch nicht erreicht hat

CSSOM dient hauptsächlich dazu, webkitregionoversetchange-Ereignisse zu überwachen und Regionen dynamisch hinzuzufügen oder zu entfernen, um unterschiedlich große Textmengen zu berücksichtigen. Wenn beispielsweise die zu formatierende Textmenge unvorhersehbar ist (z. B. nutzergeneriert), wenn die Größe des Browserfensters angepasst oder die Schriftgröße geändert wird, müssen möglicherweise Bereiche hinzugefügt oder entfernt werden, um die Änderung im Ablauf zu berücksichtigen. Wenn Sie Ihren Content in Seiten organisieren möchten, benötigen Sie außerdem einen Mechanismus, mit dem das DOM sowie Ihre Regionen dynamisch geändert werden können.

Das folgende JavaScript-Code-Snippet zeigt, wie mithilfe von CSSOM bei Bedarf Regionen dynamisch hinzugefügt werden. Der Einfachheit halber werden hier keine Regionen entfernt oder die Größe und Positionen von Regionen definiert. Es 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 sind auf der Beispielseite für Preisvergleichsportal-Regionen verfügbar.

CSS-Seitenvorlagen

Die Nutzung von CSSOM ist wahrscheinlich die leistungsstärkste und flexibelste Art, Dinge wie Paging und responsives Layout zu implementieren. Adobe arbeitet aber schon lange mit Text- und Desktop-Publishing-Tools, um zu wissen, dass sich Designer und Entwickler auch eine einfachere Möglichkeit wünschen, relativ allgemeine Paging-Funktionen zu erhalten. Aus diesem Grund arbeiten wir an einem Vorschlag namens CSS-Seitenvorlagen, mit dem das Seitenverhalten vollständig deklarativ definiert werden kann.

Sehen wir uns einen häufigen Anwendungsfall für CSS-Seitenvorlagen an. Das folgende Code-Snippet zeigt, wie Sie mit CSS zwei benannte Abläufe erstellen: „article-flow“ und „timeline-flow“. Außerdem wird ein dritter Selektor namens "combined-articles" definiert, in dem die beiden Abläufe enthalten sind. Die einfache Aufnahme der overflow-style-Eigenschaft in die Auswahl "kombined-articles" bedeutet, dass der Inhalt automatisch entlang der x-Achse oder horizontal angeordnet werden soll:

<style>
    #article {
    { % mixin flow-into: article-flow; % }
    }

    #timeline {
    { % mixin flow-into: timeline-flow; % }
    }

    #combined-articles {
    overflow-style: paged-x;
    }
</style>

Nachdem Sie die Abläufe definiert und das gewünschte Überlaufverhalten festgelegt haben, können Sie 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 mithilfe der neuen „at“-Syntax definiert. Im obigen Code-Snippet definieren wir drei Anzeigenflächen, die jeweils einer Spalte entsprechen. Der Text aus dem Artikelfluss fließt durch die Spalten auf der linken und rechten Seite und Text aus dem „Zeitachsenfluss“ wird in die Spalte in der Mitte eingefügt. Das Ergebnis könnte in etwa so aussehen:

Beachten Sie, dass der Artikeltext (der Text in den linken und rechten Spalten) Englisch und die Zeitachse in der Mitte Deutsch ist. Außerdem werden die Dokumentseiten horizontal ausgerichtet, ohne dass JavaScript-Code erforderlich ist. Alles wurde vollständig deklarativ in CSS erledigt.

CSS-Seitenvorlagen sind zwar noch Vorschläge, wir haben jedoch einen Prototyp mit einem JavaScript-Shim (auch polyfill genannt), damit Sie jetzt mit ihnen experimentieren können.

Weitere Informationen zu Preisvergleichsportal-Regionen im Allgemeinen finden Sie auf der Seite zu Preisvergleichsportal-Regionen unter html.adobe.com.

Ausschlüsse von Preisvergleichsportalen

Für ein echtes zeitschriftenähnliches Layout reicht es nicht aus, den Text durch die verschiedenen Regionen fließen zu lassen. Ein wichtiger Faktor für qualitativ hochwertige und optisch interessante Desktop-Veröffentlichungen ist die Fähigkeit, Text um oder innerhalb von unregelmäßigen Grafiken und Formen herumfließen zu lassen. Dank CSS-Ausschlüssen steht im Web jetzt diese Produktionsqualität zur Verfügung.

Der folgende Screenshot stammt von 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:

Das Umkehren ist im folgenden Screenshot dargestellt: Text, der in unregelmäßig geformte Polygone fließt:

Um Text um oder innerhalb von beliebigen Formen herum fließen zu können, müssen die erforderlichen Algorithmen entwickelt und optimiert werden. Adobe arbeitet derzeit an Implementierungen, die direkt zu WebKit beigesteuert werden. Nachdem diese Algorithmen optimiert wurden, bilden sie die Grundlage für die restlichen CSS-Ausschlüsse.

Weitere Informationen zu CSS-Ausschlüssen finden Sie auf der Seite zu CSS-Ausschlüssen auf html.adobe.com. Detailliertere Informationen über die Arbeit von Adobe an der zugrunde liegenden Technologie für CSS-Ausschlüsse finden Sie im Blogpost Horizontal Box: Polygon Intersection for CSS exclusions.

Aktueller Status von Preisvergleichsportal-Regionen und Preisvergleichsportal-Ausschlüssen

Auf der Google I/O 2011 habe ich zum ersten Mal auf dem Adobe Developer Pod über Preisvergleichsportal-Regionen und -Ausschlüsse von Preisvergleichsportalen gesprochen. Damals habe ich Demos in unserem eigenen Browser für Prototypen gezeigt. Die Resonanz war sehr groß, allerdings war die Enttäuschung spürbar enttäuscht, als die Zuschauer merkten, dass die von mir gezeigte Funktion noch in keinem der gängigen Browser verfügbar war.

Ich war dieses Jahr wieder bei der Google I/O (2012), dieses Mal als Moderator mit meinem Kollege Vincent Hardy und Alex Danilo von Google (Sie können sich hier die Präsentation ansehen). Nur ein Jahr später wurden etwa 80% der Spezifikation für Preisvergleichsportal-Regionen in WebKit implementiert und befindet sich bereits in der neuesten Version von Google Chrome (beachten Sie, dass Preisvergleichsportal-Regionen derzeit über chrome://flags aktiviert werden müssen). Die vorläufige Unterstützung für Preisvergleichsportal-Regionen ist sogar in Chrome für Android verfügbar:

Außerdem werden sowohl CSS-Regionen als auch CSS-Ausschlüsse in der Vorschau von Internet Explorer 10 implementiert und sind derzeit in der Mozilla-Roadmap 2012 für Firefox enthalten. Die nächste Hauptversion von Safari sollte den Großteil der Spezifikation für Preisvergleichsportal-Regionen unterstützen. Nachfolgende Aktualisierungen sollten den Rest enthalten.

Im Folgenden finden Sie eine detaillierte Übersicht über die Fortschritte, die wir bei Preisvergleichsportal-Regionen und -Ausschlüssen seit unserem ersten Vorschlag an das W3C im April 2011 gemacht haben:

Fazit

Adobe hat sehr viel Erfahrung mit Texten, Schriftarten und der Desktop-Veröffentlichung im Allgemeinen mithilfe von Tools wie InDesign. Obwohl das Web bereits eine sehr leistungsstarke Plattform für Text ist, möchten wir unser Wissen und unsere Erfahrung nutzen, um die Textpräsentation weiter voranzutreiben. Mit Preisvergleichsportal-Regionen und -Ausschlüssen für Preisvergleichsportale können Inhalte semantisch strukturiert bleiben. Gleichzeitig wird ein echtes zeitschriftenähnliches Layout ermöglicht und das Web wird viel ausdrucksstärker.