To flow one article through magazine-style areas on a Mac, use CSS columns for a browser layout or linked text boxes in Pages for freely positioned regions. CSS Regions described automatic flow between separate browser boxes, but current desktop browsers do not support it. CSS Regions compatibility

This guide helps you choose and build a layout for one continuous article: text starts in area A, continues in B, and finishes in C. The browser example uses synthetic text in a local document you control; it does not alter an existing public website.

Can a browser automatically thread separate text regions?

The W3C CSS Regions draft describes precisely this arrangement. A source contributes content to a named flow using flow-into, and destination boxes receive it using flow-from. The destinations form a chain in document order, allowing content to continue between boxes with different positions and dimensions. However, the published document remains a Working Draft dated 9 October 2014. A specification describing a feature does not establish browser availability. CSS Regions Module Level 1

Current compatibility information lists CSS Regions as unsupported in Safari, Chrome, Firefox, and Edge. WebKit also records its removal in a completed implementation issue. Adding the old declarations to a modern page therefore does not provide dependable article threading. CSS Regions compatibility, Remove support for CSS regions

Start by deciding which part of the intended layout is essential. Three equal columns, three independently positioned boxes, and three printed pages require different tools.

Required outcome Practical route Boundary
Continuous article in regular browser columns Native CSS multi-column layout Columns belong to one container
Browser-generated pages for print or PDF Paged.js Pagination requires its script and document setup
Text flowing through freely positioned boxes on a Mac Linked text boxes in Pages The result is a Pages document
Automatic flow through arbitrary browser boxes A custom layout implementation The retired CSS Regions feature cannot supply this

These choices follow the documented models: MDN describes generated columns, Paged.js describes page fragmentation, and Apple documents linked text-box threads. Treat the table as a decision aid derived from those capabilities. Multiple-column layout, How Paged.js works, Link text boxes in Pages on Mac

Build a continuous browser article with CSS columns

Use this route when regular columns meet the design. Keep the article text together in one container and let the browser determine where each column ends. MDN documents that multi-column layout creates a continuous flow, but its columns cannot be given independently different widths or individual background colors. Multiple-column layout

On your Mac, open TextEdit and choose File > New, then Format > Make Plain Text. Paste the complete document below, save it as article-columns.html, and choose Use .html if prompted. These are Apple's documented steps for creating an HTML file in TextEdit. Work with HTML documents in TextEdit on Mac

The following is a complete HTML document with all styling and sample content included. It needs no library, network resource, or JavaScript. Open the saved file in your browser to inspect the layout; the rendering has not been tested here.

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

The columns shorthand requests a preferred width of 260 CSS pixels and a maximum of three columns. The browser determines how many fit. At the example's full 960-pixel content width, three columns separated by two 24-pixel gaps have an illustrative width of (960 − 2 × 24) ÷ 3 = 304 CSS pixels each. That arithmetic was checked; it is not a browser measurement. Multiple-column layout

The heading stays above the article because it is outside the column container. All six paragraphs remain in their original sequence inside it. Resize the browser window to examine the narrower layout, then find the final marker END-A to confirm you can reach the article's ending.

Control column filling without hiding the remainder

The example leaves the article's height automatic and uses column-fill: balance. Balancing attempts to distribute the content across columns. If your design instead requires filling one column to a specified height before continuing, column-fill: auto is the relevant setting. MDN documents interoperability differences and notes that Chrome consults auto only when the container has a size in the block dimension, such as a height in this horizontal layout. column-fill

A fixed height introduces an important failure condition: excess text can produce additional columns horizontally beyond the container. Setting a height does not limit the article to the visible columns. MDN explicitly documents this overflow behavior. Avoid concealing that remainder with overflow: hidden. Handling overflow in multi-column layout

For a reading layout, keep the automatic height used above unless horizontal continuation is intentional. If you experiment with fixed-height columns, inspect the full horizontal extent and check the ending marker again after every font-size or width change. A visually tidy first screen is insufficient evidence that the whole article fits.

Treat paragraph breaks as content structure, rather than predetermined column endings. Short grouped items can use break-inside: avoid to discourage fragmentation, as MDN demonstrates for cards. Applying that rule to every long paragraph can make the arrangement less flexible, so introduce it only where keeping a particular unit together helps reading. Multiple-column layout

What if the regions must have different shapes or positions?

Consider an abstract layout with a wide region A above a narrow region B and a separate region C in the lower-right corner. CSS columns cannot reproduce that arbitrary chain simply by placing three containers on the page. Their automatic flow belongs to a multi-column container; the CSS Regions draft was the separate mechanism intended to connect destination boxes. Multiple-column layout, CSS Regions Module Level 1

For a Mac desktop composition where freely positioned boxes are essential, Pages supplies documented text threading. Start with three text boxes arranged as A, B, and C, and place the full article in the first box. Apple permits starting a thread with either an empty box or one that already contains text. Link text boxes in Pages on Mac

  1. Select box A and click its white circle at the top to start the thread.
  2. Select each empty destination box and click its white circle to join the thread. Check the shared circle color and sequence numbers.
  3. To correct the sequence, click a box's circle and choose its number under Layout Order.
  4. If the final box shows a clipping indicator, enlarge a box or add another linked box. Locked or grouped boxes cannot be linked. Link text boxes in Pages on Mac

Moving a box elsewhere on the same page does not automatically change the thread's reading order. Use Layout Order deliberately. This makes Pages a practical route to the visual composition, while keeping clear that its text-box threads do not add a feature to the browser. Link text boxes in Pages on Mac

When should you use Paged.js or a Regions polyfill?

Choose Paged.js when the intended result is a sequence of pages. Its official documentation describes a chunker that places content into a page, detects overflow, and continues into newly created pages. That is a useful browser-based pagination model, but the documentation does not establish arbitrary threading through independently positioned screen regions. How Paged.js works

The documented browser setup requires your HTML and CSS, the Paged.js script, a web server, and a browser. This changes the prerequisites from the standalone local-file example above. Follow the library's setup guide and inspect its generated pages before exporting. Getting Started with Paged.js

For PDF output, that guide recommends opening the browser's print dialog after pagination, selecting PDF output, removing print margins and browser headers and footers, and enabling background graphics. Print-control wording can differ between browsers. Getting Started with Paged.js

The older Adobe CSSRegions.js project more directly simulates region threading, but its own documentation calls it experimental and explicitly advises against using it in production as a substitute for native support. Its examples are useful for understanding the historical proposal, not as evidence of current browser capability. CSS Regions JavaScript Polyfill

Preserve browser text shaping when adapting the layout

Keep complete paragraphs as browser text wherever possible. Avoid estimating a region's capacity by assigning a fixed number of characters to it. The W3C text specification describes shaping across inline boundaries and conditions that interrupt it, including changes involving spacing, alignment, or isolation. Splitting and independently styling text fragments can therefore change more than their position. CSS Text Module Level 3

Canvas text measurement is also insufficient to supply article layout. WHATWG specifies that measureText() returns metrics for the supplied text, while fillText() paints text at coordinates. Its text-preparation algorithm uses an infinitely wide line box; a supplied maximum width can cause text to be fitted to that width. These operations do not automatically continue a paragraph through several DOM regions. HTML Standard: Canvas

For this task, native columns preserve the browser's role in line breaking and text rendering. If arbitrary browser regions remain mandatory, a custom implementation needs to account for changing text, font metrics, available dimensions, and unplaced content. Treat that as a separate layout project rather than a short character-splitting script.

Before settling on the design, inspect it at a wide window, a narrow window, and enlarged browser text. Follow the article from its first paragraph to END-A, check the continuation order, and look for clipped or horizontally displaced content. Use browser columns when regular flow meets the task, Paged.js when pages are the destination, and Pages threads when the placement of individual boxes determines the composition.

Sources