Um einen Artikel auf dem Mac durch magazinartige Bereiche fließen zu lassen, verwenden Sie CSS-Spalten für ein Browserlayout oder verknüpfte Textfelder in Pages für frei positionierte Bereiche. CSS Regions beschrieb den automatischen Textfluss zwischen separaten Browserfeldern, wird jedoch von aktuellen Desktopbrowsern nicht unterstützt. Kompatibilität von CSS Regions

Diese Anleitung hilft Ihnen dabei, ein Layout für einen durchgehenden Artikel auszuwählen und zu erstellen: Der Text beginnt in Bereich A, wird in B fortgesetzt und endet in C. Das Browserbeispiel verwendet synthetischen Text in einem lokalen Dokument, das Sie selbst kontrollieren; eine vorhandene öffentliche Website wird dadurch nicht verändert.

Können Browser automatisch separate Textbereiche miteinander verknüpfen?

Der CSS-Regions-Entwurf des W3C beschreibt genau diese Anordnung. Eine Quelle speist Inhalte mithilfe von flow-into in einen benannten Fluss ein, und Zielbereiche übernehmen sie mithilfe von flow-from. Die Ziele bilden in Dokumentreihenfolge eine Kette, sodass Inhalte zwischen Bereichen mit unterschiedlichen Positionen und Abmessungen weiterfließen können. Das veröffentlichte Dokument ist jedoch weiterhin ein Arbeitsentwurf vom 9. Oktober 2014. Dass eine Spezifikation ein Merkmal beschreibt, bedeutet nicht, dass es in Browsern verfügbar ist. CSS Regions Module Level 1

Die aktuellen Kompatibilitätsinformationen führen CSS Regions für Safari, Chrome, Firefox und Edge als nicht unterstützt auf. WebKit verzeichnet außerdem die Entfernung in einem abgeschlossenen Implementierungsproblem. Die alten Deklarationen zu einer modernen Seite hinzuzufügen, sorgt daher nicht für eine zuverlässige Verknüpfung von Artikelbereichen. Kompatibilität von CSS Regions, Unterstützung für CSS Regions entfernen

Entscheiden Sie zunächst, welcher Teil des gewünschten Layouts unverzichtbar ist. Drei gleich breite Spalten, drei unabhängig positionierte Felder und drei gedruckte Seiten erfordern unterschiedliche Werkzeuge.

Gewünschtes Ergebnis Praktischer Weg Einschränkung
Durchgehender Artikel in regelmäßigen Browserspalten Native CSS-Mehrspaltenlayout Die Spalten gehören zu einem Container
Vom Browser erzeugte Seiten für den Druck oder als PDF Paged.js Die Paginierung erfordert das Skript und eine entsprechende Dokumenteinrichtung
Textfluss durch frei positionierte Felder auf einem Mac Verknüpfte Textfelder in Pages Das Ergebnis ist ein Pages-Dokument
Automatischer Textfluss durch beliebige Browserfelder Eine eigene Layoutimplementierung Das eingestellte CSS-Regions-Feature kann dies nicht bereitstellen

Diese Optionen richten sich nach den dokumentierten Modellen: MDN beschreibt erzeugte Spalten, Paged.js beschreibt die Aufteilung in Seiten und Apple dokumentiert verknüpfte Textfeldketten. Betrachten Sie die Tabelle als Entscheidungshilfe, die aus diesen Funktionen abgeleitet wurde. Mehrspaltenlayout, So funktioniert Paged.js, Textfelder in Pages auf dem Mac verknüpfen

Einen durchgehenden Browserartikel mit CSS-Spalten erstellen

Verwenden Sie diesen Weg, wenn regelmäßige Spalten zum Design passen. Lassen Sie den Artikeltext in einem Container zusammen und überlassen Sie dem Browser die Entscheidung, wo jede Spalte endet. MDN dokumentiert, dass ein Mehrspaltenlayout einen durchgehenden Textfluss erzeugt, die Spalten jedoch nicht unabhängig voneinander unterschiedliche Breiten oder eigene Hintergrundfarben haben können. Mehrspaltenlayout

Öffnen Sie auf Ihrem Mac TextEdit und wählen Sie Ablage > Neu und anschließend Format > Reiner Text. Fügen Sie das vollständige Dokument unten ein, sichern Sie es als article-columns.html und wählen Sie bei entsprechender Nachfrage Use .html. Dies sind die von Apple dokumentierten Schritte zum Erstellen einer HTML-Datei in TextEdit. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

Das folgende vollständige HTML-Dokument enthält alle Formatierungen und Beispielinhalte. Es benötigt weder eine Bibliothek noch eine Netzwerkressource oder JavaScript. Öffnen Sie die gespeicherte Datei in Ihrem Browser, um das Layout zu prüfen; die Darstellung wurde hier nicht getestet.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article A: Column Study</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 24px;
      background: #f4f1e9;
      color: #262626;
      font: 18px/1.6 Georgia, serif;
    }
    main {
      max-width: 960px;
      margin-inline: auto;
    }
    h1 {
      margin: 0 0 24px;
      font-size: 2rem;
      line-height: 1.15;
    }
    article {
      columns: 260px 3;
      column-gap: 24px;
      column-rule: 1px solid #bdb7ab;
      column-fill: balance;
      overflow-wrap: anywhere;
    }
    p { margin: 0 0 1em; }
    @media (max-width: 640px) {
      article { columns: auto; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Article A: Column Study</h1>
    <article aria-label="Synthetic article">
      <p>Section A begins with a study of simple forms. A square,
      a circle, and a narrow rectangle sit on a pale surface.
      Their spacing establishes a steady visual rhythm.</p>
      <p>The first arrangement leaves generous space around each
      form. The second brings the forms closer together. Both
      arrangements use the same pieces in a different order.</p>
      <p>Section B considers the surface beneath the forms.
      A smooth sheet creates an even field. A folded sheet
      introduces a line that changes the composition.</p>
      <p>A small label identifies each arrangement. Label A
      belongs to the wider spacing, while label B belongs to
      the closer spacing. The labels remain part of the text.</p>
      <p>Section C returns to the complete composition. The
      rectangle sits near one edge, with the circle beside it.
      The square completes the sequence at the other end.</p>
      <p>The final arrangement leaves an open area in the
      center. All three forms remain visible, and the text
      ends here with the marker END-A.</p>
    </article>
  </main>
</body>
</html>

Die Kurzschreibweise columns fordert eine bevorzugte Breite von 260 CSS-Pixeln und höchstens drei Spalten an. Der Browser bestimmt, wie viele Spalten hineinpassen. Bei der vollen Inhaltsbreite von 960 Pixeln im Beispiel haben drei Spalten mit zwei Abständen von jeweils 24 Pixeln eine illustrative Breite von je (960 − 2 × 24) ÷ 3 = 304 CSS-Pixeln. Diese Rechnung wurde überprüft; sie ist keine Messung im Browser. Mehrspaltenlayout

Die Überschrift bleibt über dem Artikel, weil sie sich außerhalb des Spaltencontainers befindet. Alle sechs Absätze bleiben darin in ihrer ursprünglichen Reihenfolge. Ändern Sie die Breite des Browserfensters, um das schmalere Layout zu untersuchen, und suchen Sie dann nach der Schlussmarkierung END-A, um zu bestätigen, dass Sie das Ende des Artikels erreichen können.

Den Spaltenfluss steuern, ohne den Rest auszublenden

Im Beispiel ist die Höhe des Artikels automatisch und column-fill: balance festgelegt. Die Ausbalancierung versucht, den Inhalt gleichmäßig auf die Spalten zu verteilen. Wenn Ihr Design stattdessen erfordert, eine Spalte bis zu einer festgelegten Höhe zu füllen, bevor der Text weiterfließt, ist column-fill: auto die passende Einstellung. MDN dokumentiert Unterschiede bei der Browserkompatibilität und weist darauf hin, dass Chrome auto nur dann berücksichtigt, wenn der Container in Blockrichtung eine festgelegte Größe hat, etwa eine Höhe in diesem horizontalen Layout. column-fill

Eine feste Höhe bringt eine wichtige Fehlerbedingung mit sich: Überschüssiger Text kann zusätzliche Spalten erzeugen, die horizontal über den Container hinausragen. Eine festgelegte Höhe begrenzt den Artikel nicht auf die sichtbaren Spalten. MDN dokumentiert dieses Überlaufverhalten ausdrücklich. Blenden Sie den Rest nicht mit overflow: hidden aus. Überlauf in Mehrspaltenlayouts behandeln

Lassen Sie für ein Leselayout die Höhe wie oben automatisch, sofern eine horizontale Fortsetzung nicht beabsichtigt ist. Wenn Sie mit Spalten fester Höhe experimentieren, untersuchen Sie die gesamte horizontale Ausdehnung und prüfen Sie die Schlussmarkierung nach jeder Änderung der Schriftgröße oder Breite erneut. Ein optisch aufgeräumter erster Bildschirm ist kein ausreichender Beleg dafür, dass der ganze Artikel hineinpasst.

Behandeln Sie Absatzumbrüche als Inhaltsstruktur und nicht als vorgegebene Spaltenenden. Bei kurzen zusammengehörigen Elementen kann break-inside: avoid eine Aufteilung verhindern, wie MDN es für Karten demonstriert. Diese Regel auf jeden langen Absatz anzuwenden, kann das Layout weniger flexibel machen; verwenden Sie sie daher nur dort, wo es die Lesbarkeit verbessert, eine bestimmte Einheit zusammenzuhalten. Mehrspaltenlayout

Was ist, wenn die Bereiche unterschiedliche Formen oder Positionen haben müssen?

Stellen Sie sich ein abstraktes Layout mit einem breiten Bereich A über einem schmalen Bereich B und einem separaten Bereich C unten rechts vor. CSS-Spalten können diese beliebige Kette nicht einfach dadurch nachbilden, dass drei Container auf der Seite platziert werden. Ihr automatischer Textfluss gehört zu einem Mehrspaltencontainer; der CSS-Regions-Entwurf war der separate Mechanismus, mit dem Zielbereiche verknüpft werden sollten. Mehrspaltenlayout, CSS Regions Module Level 1

Für eine Desktopgestaltung auf dem Mac, bei der frei positionierte Felder unverzichtbar sind, bietet Pages eine dokumentierte Textverknüpfung. Beginnen Sie mit drei Textfeldern, die als A, B und C angeordnet sind, und platzieren Sie den vollständigen Artikel im ersten Feld. Laut Apple kann eine Textfeldkette sowohl mit einem leeren Feld als auch mit einem Feld beginnen, das bereits Text enthält. Textfelder in Pages auf dem Mac verknüpfen

  1. Wählen Sie Feld A aus und klicken Sie oben auf den weißen Kreis, um die Verknüpfung zu beginnen.
  2. Wählen Sie jedes leere Zielfeld aus und klicken Sie auf seinen weißen Kreis, um es in die Verknüpfung aufzunehmen. Prüfen Sie die gemeinsame Kreisfarbe und die Reihenfolge der Nummern.
  3. Um die Reihenfolge zu korrigieren, klicken Sie auf den Kreis eines Feldes und wählen Sie dessen Nummer unter Layout Order.
  4. Wenn das letzte Feld eine Beschneidungsmarkierung anzeigt, vergrößern Sie ein Feld oder fügen Sie ein weiteres verknüpftes Feld hinzu. Gesperrte oder gruppierte Felder lassen sich nicht verknüpfen. Textfelder in Pages auf dem Mac verknüpfen

Wenn Sie ein Feld an eine andere Stelle auf derselben Seite bewegen, ändert sich die Lesereihenfolge der Verknüpfung nicht automatisch. Verwenden Sie Layout Order bewusst. So ist Pages eine praktische Möglichkeit, die visuelle Anordnung umzusetzen, während klar bleibt, dass die Textfeldverknüpfungen keine Funktion des Browsers erweitern. Textfelder in Pages auf dem Mac verknüpfen

Wann sollten Sie Paged.js oder ein Regions-Polyfill verwenden?

Wählen Sie Paged.js, wenn das gewünschte Ergebnis aus aufeinanderfolgenden Seiten besteht. Die offizielle Dokumentation beschreibt einen Chunker, der Inhalte auf einer Seite platziert, Überläufe erkennt und auf neu erstellten Seiten fortsetzt. Das ist ein nützliches browserbasiertes Paginierungsmodell; die Dokumentation belegt jedoch keinen beliebigen Textfluss durch unabhängig positionierte Bildschirmbereiche. So funktioniert Paged.js

Die dokumentierte Browsereinrichtung erfordert Ihr HTML und CSS, das Paged.js-Skript, einen Webserver und einen Browser. Damit ändern sich die Voraussetzungen gegenüber dem oben beschriebenen eigenständigen Beispiel mit einer lokalen Datei. Folgen Sie der Einrichtungsanleitung der Bibliothek und prüfen Sie die erzeugten Seiten, bevor Sie exportieren. Erste Schritte mit Paged.js

Für die PDF-Ausgabe empfiehlt diese Anleitung, nach der Paginierung den Druckdialog des Browsers zu öffnen, die PDF-Ausgabe zu wählen, Druckränder sowie Kopf- und Fußzeilen des Browsers zu entfernen und Hintergrundgrafiken zu aktivieren. Die Bezeichnungen der Druckoptionen können je nach Browser abweichen. Erste Schritte mit Paged.js

Das ältere Adobe-Projekt CSSRegions.js simuliert die Verknüpfung von Bereichen direkter, wird in seiner eigenen Dokumentation jedoch als experimentell bezeichnet. Außerdem wird ausdrücklich davon abgeraten, es als Ersatz für native Unterstützung in der Produktion einzusetzen. Seine Beispiele helfen, den historischen Vorschlag zu verstehen, sind aber kein Beleg für die aktuellen Fähigkeiten von Browsern. CSS-Regions-JavaScript-Polyfill

Beim Anpassen des Layouts die Textgestaltung des Browsers beibehalten

Lassen Sie vollständige Absätze möglichst als Browsertext bestehen. Vermeiden Sie es, die Kapazität eines Bereichs anhand einer festen Zeichenanzahl zu schätzen. Die W3C-Spezifikation für Text beschreibt die Textformung über Inline-Grenzen hinweg sowie Bedingungen, die sie unterbrechen, darunter Änderungen bei Abständen, Ausrichtung oder Isolation. Textfragmente aufzuteilen und unabhängig voneinander zu formatieren kann daher mehr als nur ihre Position verändern. CSS Text Module Level 3

Auch die Textmessung auf einer Canvas-Fläche reicht für das Artikellayout nicht aus. Laut WHATWG liefert measureText() Metriken für den angegebenen Text, während fillText() Text an Koordinaten zeichnet. Der Algorithmus zur Textvorbereitung verwendet einen unendlich breiten Zeilenbereich; eine angegebene maximale Breite kann dazu führen, dass der Text an diese Breite angepasst wird. Diese Vorgänge setzen einen Absatz nicht automatisch über mehrere DOM-Bereiche hinweg fort. HTML-Standard: Canvas

Bei dieser Aufgabe lassen native Spalten den Browser Zeilenumbrüche und Textdarstellung übernehmen. Wenn beliebige Browserbereiche weiterhin zwingend erforderlich sind, muss eine eigene Implementierung Änderungen am Text, Schriftmetriken, verfügbare Abmessungen und nicht platzierte Inhalte berücksichtigen. Behandeln Sie das als eigenes Layoutprojekt und nicht als kurzes Skript zur Aufteilung anhand der Zeichenanzahl.

Bevor Sie sich für das Design entscheiden, prüfen Sie es bei einem breiten und einem schmalen Fenster sowie mit vergrößertem Browsertext. Folgen Sie dem Artikel vom ersten Absatz bis zu END-A, prüfen Sie die Reihenfolge der Fortsetzung und achten Sie auf abgeschnittene oder horizontal verschobene Inhalte. Verwenden Sie Browserspalten, wenn der normale Textfluss zur Aufgabe passt, Paged.js, wenn Seiten das Ziel sind, und Pages-Textfeldketten, wenn die Position der einzelnen Felder die Gestaltung bestimmt.

Quellen