Gebruik CSS-kolommen voor een browserindeling of gekoppelde tekstvakken in Pages voor vrij geplaatste gebieden om één artikel door magazineachtige gebieden op een Mac te laten lopen. CSS Regions beschreef automatische doorstroming tussen afzonderlijke browservakken, maar wordt niet ondersteund door huidige desktopbrowsers. Compatibiliteit van CSS Regions

Deze gids helpt je een indeling te kiezen en op te bouwen voor één doorlopend artikel: de tekst begint in gebied A, gaat verder in B en eindigt in C. Het browservoorbeeld gebruikt synthetische tekst in een lokaal document dat je zelf beheert; het wijzigt geen bestaande openbare website.

Kan een browser tekst automatisch door afzonderlijke gebieden laten lopen?

Het W3C-ontwerp van CSS Regions beschrijft precies deze indeling. Een bron levert inhoud aan een benoemde flow met flow-into, en bestemmingsvakken ontvangen die met flow-from. De bestemmingen vormen een keten in documentvolgorde, waardoor inhoud kan doorlopen tussen vakken met verschillende posities en afmetingen. Het gepubliceerde document is echter nog steeds een Working Draft van 9 oktober 2014. Een specificatie die een functie beschrijft, betekent niet dat browsers die functie ondersteunen. CSS Regions Module Level 1

De huidige compatibiliteitsinformatie vermeldt dat CSS Regions niet wordt ondersteund in Safari, Chrome, Firefox en Edge. WebKit heeft de verwijdering ervan ook vastgelegd in een afgeronde implementatiekwestie. De oude declaraties aan een moderne pagina toevoegen, zorgt daarom niet voor betrouwbare doorstroming van artikelen. Compatibiliteit van CSS Regions, Ondersteuning voor CSS Regions verwijderen

Bepaal eerst welk onderdeel van de beoogde indeling essentieel is. Drie gelijke kolommen, drie afzonderlijk geplaatste vakken en drie afgedrukte pagina's vereisen verschillende hulpmiddelen.

Gewenst resultaat Praktische aanpak Beperking
Doorlopend artikel in reguliere browserkolommen Ingebouwde CSS-indeling met meerdere kolommen Kolommen horen bij één container
Door de browser gegenereerde pagina's voor afdrukken of pdf Paged.js Paginering vereist het script en de documentconfiguratie
Tekst die op een Mac door vrij geplaatste vakken loopt Gekoppelde tekstvakken in Pages Het resultaat is een Pages-document
Automatische doorstroming door willekeurige browservakken Een aangepaste indelingsimplementatie De opgeheven functie CSS Regions kan dit niet leveren

Deze keuzes volgen de gedocumenteerde modellen: MDN beschrijft gegenereerde kolommen, Paged.js beschrijft paginering en Apple documenteert gekoppelde tekstvakdraden. Beschouw de tabel als een beslissingshulpmiddel op basis van die mogelijkheden. Indeling met meerdere kolommen, Hoe Paged.js werkt, Tekstvakken koppelen in Pages op de Mac

Maak een doorlopend browserartikel met CSS-kolommen

Gebruik deze aanpak wanneer reguliere kolommen aan het ontwerp voldoen. Houd de artikeltekst bij elkaar in één container en laat de browser bepalen waar elke kolom eindigt. MDN documenteert dat een indeling met meerdere kolommen een doorlopende flow maakt, maar dat je de kolommen niet afzonderlijk verschillende breedtes of achtergrondkleuren kunt geven. Indeling met meerdere kolommen

Open op je Mac Teksteditor en kies Archief > Nieuw en vervolgens Opmaak > Maak platte tekst. Plak het volledige document hieronder, bewaar het als article-columns.html en kies indien gevraagd Gebruik .html. Dit zijn de door Apple beschreven stappen voor het maken van een HTML-bestand in Teksteditor. Werken met HTML-documenten in Teksteditor op de Mac

Hieronder staat een volledig HTML-document met alle opmaak en voorbeeldinhoud. Het heeft geen bibliotheek, netwerkbron of JavaScript nodig. Open het opgeslagen bestand in je browser om de indeling te bekijken; de weergave is hier niet getest.

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

De verkorte notatie columns vraagt om een voorkeursbreedte van 260 CSS-pixels en maximaal drie kolommen. De browser bepaalt hoeveel kolommen passen. Bij de volledige inhoudsbreedte van 960 pixels in het voorbeeld zijn drie kolommen met twee tussenruimten van 24 pixels elk illustratief (960 − 2 × 24) ÷ 3 = 304 CSS-pixels breed. Die berekening is gecontroleerd; het is geen meting in een browser. Indeling met meerdere kolommen

De kop blijft boven het artikel staan omdat deze buiten de kolomcontainer valt. Alle zes alinea's blijven in hun oorspronkelijke volgorde erin staan. Verklein het browservenster om de smallere indeling te bekijken en zoek daarna de slotmarkering END-A om te controleren of je het einde van het artikel kunt bereiken.

Bepaal hoe kolommen worden gevuld zonder de rest te verbergen

In het voorbeeld blijft de hoogte van het artikel automatisch en wordt column-fill: balance gebruikt. Bij het balanceren wordt geprobeerd de inhoud over de kolommen te verdelen. Als je ontwerp in plaats daarvan vereist dat één kolom tot een opgegeven hoogte wordt gevuld voordat de tekst verdergaat, is column-fill: auto de relevante instelling. MDN documenteert verschillen in interoperabiliteit en vermeldt dat Chrome auto alleen raadpleegt wanneer de container een afmeting in de blokrichting heeft, bijvoorbeeld een hoogte in deze horizontale indeling. column-fill

Een vaste hoogte introduceert een belangrijke situatie waarin het mis kan gaan: overtollige tekst kan horizontaal extra kolommen vormen buiten de container. Een hoogte instellen beperkt het artikel niet tot de zichtbare kolommen. MDN documenteert dit overloopgedrag expliciet. Verberg de rest niet met overflow: hidden. Overloop afhandelen in een indeling met meerdere kolommen

Houd voor een leesindeling de hierboven gebruikte automatische hoogte aan, tenzij horizontaal doorlopen de bedoeling is. Als je met kolommen met een vaste hoogte experimenteert, inspecteer dan de volledige horizontale breedte en controleer de slotmarkering opnieuw na elke wijziging van de lettergrootte of breedte. Een overzichtelijk eerste scherm is geen bewijs dat het hele artikel past.

Behandel alinea-einden als inhoudsstructuur, niet als vooraf bepaalde kolomeinden. Korte gegroepeerde onderdelen kunnen break-inside: avoid gebruiken om fragmentatie te ontmoedigen, zoals MDN demonstreert voor kaarten. Als je die regel op elke lange alinea toepast, wordt de indeling mogelijk minder flexibel. Gebruik hem daarom alleen wanneer het leesbaarheidsvoordeel opweegt tegen het bij elkaar houden van een bepaald onderdeel. Indeling met meerdere kolommen

Wat als de gebieden verschillende vormen of posities moeten hebben?

Denk aan een abstracte indeling met een breed gebied A boven een smal gebied B en een afzonderlijk gebied C rechtsonder. CSS-kolommen kunnen die willekeurige keten niet nabootsen door simpelweg drie containers op de pagina te plaatsen. Hun automatische flow hoort bij een container met meerdere kolommen; het ontwerp van CSS Regions was het afzonderlijke mechanisme bedoeld om bestemmingsvakken met elkaar te verbinden. Indeling met meerdere kolommen, CSS Regions Module Level 1

Voor een desktopcompositie op de Mac waarbij vrij geplaatste vakken essentieel zijn, biedt Pages gedocumenteerde tekstverbindingen. Begin met drie tekstvakken die je als A, B en C rangschikt, en plaats het volledige artikel in het eerste vak. Volgens Apple kun je een verbinding starten met een leeg vak of met een vak dat al tekst bevat. Tekstvakken koppelen in Pages op de Mac

  1. Selecteer vak A en klik op de witte cirkel bovenaan om de verbinding te starten.
  2. Selecteer elk leeg bestemmingsvak en klik op de witte cirkel om het aan de verbinding toe te voegen. Controleer de gedeelde cirkelkleur en de volgnummering.
  3. Als je de volgorde wilt corrigeren, klik je op de cirkel van een vak en kies je het nummer onder Lay-outvolgorde.
  4. Als het laatste vak een afkappingsindicator toont, vergroot dan een vak of voeg een ander gekoppeld vak toe. Vergrendelde of gegroepeerde vakken kunnen niet worden gekoppeld. Tekstvakken koppelen in Pages op de Mac

Een vak ergens anders op dezelfde pagina plaatsen, verandert de leesvolgorde van de verbinding niet automatisch. Gebruik Lay-outvolgorde bewust. Zo biedt Pages een praktische aanpak voor de visuele compositie, terwijl duidelijk blijft dat de tekstvakverbindingen geen functie aan de browser toevoegen. Tekstvakken koppelen in Pages op de Mac

Wanneer gebruik je Paged.js of een polyfill voor Regions?

Kies Paged.js wanneer het gewenste resultaat uit een reeks pagina's bestaat. De officiële documentatie beschrijft een chunker die inhoud op een pagina plaatst, overloop detecteert en doorgaat op nieuw aangemaakte pagina's. Dat is een bruikbaar browsermodel voor paginering, maar de documentatie toont niet aan dat tekst automatisch door afzonderlijk geplaatste schermgebieden kan lopen. Hoe Paged.js werkt

De gedocumenteerde browserconfiguratie vereist je HTML en CSS, het Paged.js-script, een webserver en een browser. Daarmee veranderen de vereisten ten opzichte van het zelfstandige voorbeeld met een lokaal bestand hierboven. Volg de configuratiegids van de bibliotheek en inspecteer de gegenereerde pagina's voordat je exporteert. Aan de slag met Paged.js

Voor pdf-uitvoer raadt die gids aan om na het pagineren het afdrukvenster van de browser te openen, pdf-uitvoer te selecteren, afdrukmarges en kop- en voetteksten van de browser te verwijderen en achtergrondafbeeldingen in te schakelen. De formulering van de afdrukinstellingen kan per browser verschillen. Aan de slag met Paged.js

Het oudere project CSSRegions.js van Adobe bootst het verbinden van gebieden directer na, maar de eigen documentatie noemt het experimenteel en raadt expliciet af om het in productie te gebruiken als vervanging voor ingebouwde ondersteuning. De voorbeelden zijn nuttig om het historische voorstel te begrijpen, maar vormen geen bewijs van huidige browsermogelijkheden. JavaScript-polyfill voor CSS Regions

Behoud de tekstvormgeving van de browser bij het aanpassen van de indeling

Houd volledige alinea's waar mogelijk als browsertekst. Probeer de capaciteit van een gebied niet te schatten door er een vast aantal tekens aan toe te wijzen. De W3C-tekstspecificatie beschrijft vormgeving over grenzen tussen inline-elementen en omstandigheden die dit onderbreken, waaronder wijzigingen in spatiëring, uitlijning of isolatie. Tekstfragmenten opsplitsen en afzonderlijk opmaken kan dus meer veranderen dan alleen hun positie. CSS Text Module Level 3

Tekst meten met canvas is ook onvoldoende om een artikelindeling te maken. WHATWG specificeert dat measureText() metrieken retourneert voor de opgegeven tekst, terwijl fillText() tekst op coördinaten tekent. Het algoritme voor tekstvoorbereiding gebruikt een oneindig breed regelvak; een opgegeven maximale breedte kan ertoe leiden dat tekst aan die breedte wordt aangepast. Deze bewerkingen laten tekst niet automatisch door verschillende DOM-gebieden lopen. HTML-standaard: Canvas

Bij deze taak behouden ingebouwde kolommen de rol van de browser bij regelafbreking en tekstweergave. Als willekeurige browsergebieden verplicht blijven, moet een aangepaste implementatie rekening houden met veranderende tekst, lettertypemetrieken, beschikbare afmetingen en niet-geplaatste inhoud. Behandel dat als een afzonderlijk indelingsproject, niet als een kort script dat tekens opsplitst.

Bekijk het ontwerp voordat je het definitief maakt in een breed en een smal venster, en met vergrote browsertekst. Volg het artikel van de eerste alinea tot END-A, controleer de volgorde waarin de tekst verdergaat en let op afgekapt of horizontaal verschoven materiaal. Gebruik browserkolommen wanneer reguliere doorstroming volstaat, Paged.js wanneer pagina's het doel zijn en Pages-tekstverbindingen wanneer de plaatsing van afzonderlijke vakken de compositie bepaalt.

Bronnen