Zum Hauptinhalt springen

ArtinTech Solution

Building a Two-Page Spread Viewer for a Digital Newspaper

Zeitungen werden in Doppelseiten gesetzt. Eine Anzeige läuft über den Bund, eine Reportage beginnt auf Seite 4 und endet auf Seite 5, und das Auge erwartet beide Seiten nebeneinander. Unser E-Paper-Reader zeigte ursprünglich eine Seite nach der anderen. In Inkfold 1.1 zeigt er gegenüberliegende Seiten, und das hat mehr vom Reader berührt als erwartet.

Welche Seiten zusammengehören

Eine gedruckte Zeitung beginnt mit der Titelseite allein, dann folgen die Paare 2–3, 4–5 und so weiter; bei gerader Seitenzahl steht die letzte Seite allein. Der Reader bestimmt die sichtbaren Seiten aus dem aktuellen Seitenindex nach genau dieser Regel. Ein Sprung auf Seite 5 öffnet also die Doppelseite 4–5, und die Adresszeile zeigt die erste Seite des Paares. Die Navigation springt dann jeweils eine Doppelseite weiter, der Seitenzähler zeigt „Seite 4–5“.

Zwei Seiten, eine Höhe

Die Seiten einer Ausgabe sind nicht immer gleich groß: Eine Beilage kann ein Tabloid in einer Broadsheet-Zeitung sein. Jede Seite wird deshalb auf die Höhe der ersten sichtbaren Seite skaliert, und die Doppelseite liegt in einem einzigen Flex-Container mit vier Pixeln Bund. Zoom und Verschieben wirken auf den Container, nicht auf einzelne Seiten. So bewegen sich beide Seiten immer gemeinsam, und die prozentual positionierten Artikelbereiche bleiben exakt über den gedruckten Artikeln.

Doppelseite einer Zeitung im Inkfold-E-Paper-Reader
Seite 2 und 3 nebeneinander, rechts die Artikel beider Seiten.

Nur wo es sinnvoll ist

Eine Doppelseite auf dem Handy sind zwei unlesbare Briefmarken. Der Reader nutzt Doppelseiten erst ab einer Anzeigefläche von 760 Pixeln Breite, schaltet sie ab 1.200 Pixeln standardmäßig ein und merkt sich die Wahl des Lesers im Local Storage. Unterhalb der Grenze zeigt derselbe Knopf einen kurzen Hinweis, statt zwei Seiten in einen schmalen Bildschirm zu quetschen.

Alles andere musste mitziehen

  • Artikelliste: Die Seitenleiste listet die Artikel beider Seiten unter eigenen Seitenüberschriften.
  • Gesperrte Seiten: In einer Premiumausgabe kann eine Hälfte frei und die andere gesperrt sein; jede Seite zeigt ihre eigene Abo-Box, relativ zur Seite bemessen, damit sie mit dem Zoom skaliert.
  • Vorladen: Die mittleren Bilder der nächsten Doppelseite werden vorab geladen, wie in unserem Beitrag zur Optimierung der Seitenbilder beschrieben.
  • Rechts nach links: Auf Arabisch wird die Oberfläche gespiegelt, die Seiten bleiben aber in gedruckter Reihenfolge, denn so wurde die Zeitung gemacht.

Das Wichtigste

  • Die sichtbaren Seiten aus einer Regel ableiten: Titelseite allein, dann gerade–ungerade Paare.
  • Jede Seite auf eine gemeinsame Höhe skalieren und den Container transformieren, nicht die Seiten.
  • Doppelseiten nur auf breiten Bildschirmen anbieten und die Wahl des Lesers speichern.
  • Alles prüfen, was von „einer Seite“ ausging: Listen, Sperren, Vorladen und Leserichtung.

Die Doppelseite sehen Sie in der Inkfold-Live-Demo; die Software gibt es bei Charming Theme.

Sie planen eine digitale Ausgabe für Ihre Publikation? Sprechen wir darüber — ArtinTech Solution baut Leseerlebnisse wie dieses.

Share this article

Schreibe einen Kommentar

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