CSS Fragmentation and Paged Print

Intermediate

CSS Fragmentation explains how one flow is split across fragmentainers such as pages and columns. This lesson owns that shared model and its break-control rules; Multi-column owns the column-generation model, while Paged Media owns the page model and page-specific descriptors.

The primary sources are the W3C CSS Fragmentation Module and CSS Paged Media Module. CSS Fragmentation Level 3 is a Candidate Recommendation; CSS Paged Media Level 3 is a Working Draft. Developing material is identified rather than presented as settled author guidance.

The shared fragmentation model

A fragmented flow is laid out through an ordered series of fragmentainers. A fragmentainer can be a page box, a column box, or another fragmentation container. When content reaches the available block-axis space, the flow can continue in the next fragmentainer.

The important distinction is between the content flow and the containers that receive its fragments. Fragmentation does not mean that the author created separate independent documents or layout items.

?

Fragmentation contexts

A fragmentation context is the ordered sequence of fragmentainers through which a flow is fragmented. A multi-column container creates a column fragmentation context; paged media creates a page fragmentation context.

The Multi-column lesson owns why those columns exist and how their widths, count, gaps, rules, and balancing work. This lesson owns what fragmentation means once a flow is being split across those containers.

?

Nested fragmentation

Fragmentation contexts can be nested. For example, a multi-column container can itself occur inside paged media. A page break can therefore interrupt a column context, producing another row of columns on the following page.

Do not turn nested fragmentation into a second layout algorithm. The lesson separates the outer fragmentation context from the inner one so each owner remains clear.

?

Break opportunities

A break can occur only at a possible break point. The fragmentation algorithm considers the surrounding boxes, line boundaries, and the constraints expressed by break-control properties.

A break opportunity is not automatically a forced break. The browser evaluates the available opportunities and the relevant constraints before deciding where content continues.

?

Forced breaks with `break-before`

`break-before` requests a break before an element. Its generic values can apply to the relevant fragmentation context, while context-specific values can target pages, columns, or regions.

The important curriculum boundary is that this lesson teaches the generic break mechanism. Multi-column demonstrates a column break; Paged Media provides the page environment in which page breaks operate.

.report{columns:2;height:8rem;column-gap:1rem}.report h3{margin:.25rem 0}.report p{margin:0 0 .75rem}.new-part{?:column}

`break-after` and the preceding box

`break-after` places a break request after an element. At a boundary between boxes, the browser considers the break-after value of the preceding box together with break-before of the following box and the containing break-inside constraints.

This is why a break is a relationship at a boundary, not merely a property that acts in isolation.

?

Avoiding breaks with `break-inside`

`break-inside` controls whether a box may be fragmented internally. `avoid` discourages breaks inside the box, while context-specific avoid values can target a type of fragmentation such as columns or pages.

Avoidance is a constraint on break selection, not a promise that content can never fragment. The algorithm may have to break when constraints cannot all be satisfied.

?

Forced versus unforced breaks

A forced break establishes a break at an eligible boundary. An unforced break is chosen by the layout algorithm when content needs to continue and no stronger constraint determines the boundary.

Forced breaks have priority over ordinary break restrictions at the relevant break point. They should therefore be used deliberately rather than as a substitute for understanding the fragmentation model.

?

`orphans` and `widows`

`orphans` and `widows` constrain how many lines of a block should remain at the beginning or end of a fragmented portion. They operate at line boundaries rather than being generic box-placement properties.

These properties matter when a text block is split across fragmentainers. They do not replace `break-inside`, and they do not define the line-breaking algorithm owned by Text Layout.

.lines{height:4rem;columns:2;column-gap:1rem}.lines p{?:3;widows:3;margin:0;line-height:1.3}

Fragmenting boxes and the box model

When a box is split across fragmentainers, each fragment represents part of that box. The fragmentation model therefore has to define how borders, padding, and margins behave across the split.

The general Box Model lesson remains the owner of what margins, padding, borders, and content areas are. Fragmentation owns what happens when those box areas are distributed across fragments.

?

`box-decoration-break`

`box-decoration-break` controls how an element's borders, padding, background, and other decoration are handled when the element is broken into multiple fragments. It is specifically about decoration across fragments, not the definition of borders or backgrounds themselves.

This lesson therefore demonstrates the fragmentation boundary while leaving background painting and border construction to their existing CSS owners.

.decor{columns:2;height:5rem;column-gap:1rem}.decor span{display:block;border:2px solid #777;padding:.5rem;?:clone}

Paged media: the page model belongs to Paged Media

Paged media introduces page boxes, page size, orientation, page selectors, page margins, and page-margin boxes. Those concepts belong to CSS Paged Media rather than the generic Fragmentation model.

The separation matters: Fragmentation answers how a flow breaks across pages; Paged Media answers what the page environment is and how page-specific presentation is described.

<article class="print-demo"><h2>Print-oriented document</h2><p>The page environment can be targeted with an ? rule.</p></article>

Page size and orientation

Paged Media defines page size and orientation for page boxes. These settings describe the paged presentation environment; they do not redefine the generic fragmentation algorithm.

Keep this boundary in mind when teaching print CSS: page geometry is a page-context concern, while break selection is a fragmentation concern.

Page selectors and page context

Paged Media also defines page selectors such as `:first`, `:left`, `:right`, and `:blank`, plus the `@page` rule and page-margin boxes. These features are useful when authoring paginated documents, but they are not general break algorithms.

The curriculum keeps page-context presentation here and uses the shared Fragmentation lesson for the mechanics that determine where content crosses page boundaries.

Printing and screen previews

A browser print preview can reveal fragmentation decisions that are invisible in continuous screen layout. Use it as an observation surface for page breaks, repeated page contexts, and content that moves between fragments.

Screen preview and print output are different media environments. The CSS lesson should teach the model and author controls without promising identical screen and print geometry.

Fragmentation versus Multi-column

Multi-column creates the columns and controls their sizing and balancing. Fragmentation defines the shared vocabulary and break rules that apply when the flow moves from one column fragment to another.

When a concept can be taught entirely inside Multi-column, keep it there. Introduce it again here only when it is a general fragmentation mechanism needed by pages and other fragmentainers.

Fragmentation versus Grid and Flexbox

Grid and Flexbox arrange items within their own layout algorithms. Fragmentation can occur inside or around those formatting contexts, but it does not replace their item-placement or free-space algorithms.

This distinction prevents the common mistake of treating every multi-region result as Grid. Fragmentation describes splitting a flow; Grid describes authored two-dimensional placement.

Fragmentation versus Overflow

Overflow answers what happens when content extends beyond a box's overflow area, including clipping and scrolling. Fragmentation instead creates successive fragmentainers through which a flow continues.

A scroll container and a fragmented flow can both involve content that does not fit in one visible area, but their mechanisms and ownership are different.

Fragmentation versus Writing Modes

Fragmentation proceeds in the block flow direction of its fragmentation context. Writing Modes defines that writing environment, including block and inline axes. Fragmentation consumes those axes; it does not redefine them.

This is a cross-module interaction rather than a reason to duplicate writing-mode definitions in the fragmentation lesson.

Debugging fragmentation

When a break looks wrong, first identify the fragmentation context and its fragmentainers. Then inspect the relevant break-before, break-after, break-inside, widows, and orphans constraints, followed by the available break opportunities.

Change one variable at a time. For example, switch `break-after: column` to `break-after: auto`, or remove `break-inside: avoid`, and observe which decision changes. This teaches the algorithm rather than memorizing isolated property names.

Stable versus developing specification boundaries

The W3C technical reports index currently lists CSS Fragmentation Level 3 as a Candidate Recommendation and Level 4 as a Draft Standard. CSS Paged Media Level 3 is a Working Draft. The lesson therefore treats Level 3 fragmentation fundamentals as the primary model and labels newer work as developing.

Current status is part of the technical knowledge: a draft can be useful and important without having the same stability as a completed Recommendation.

?

The ownership map

Fragmentation / Paged Print is the primary owner for the shared fragmentation model, fragmentainers, break opportunities, forced and unforced breaks, break-before/after/inside, widows, orphans, box splitting, and fragmentation-specific decoration behavior. Paged Media owns page geometry and page context. Multi-column owns column generation and column layout.

Grid remains the owner of two-dimensional placement; Flexbox owns its one-dimensional algorithm; Overflow owns scrolling and clipping; Writing Modes owns writing axes; Box Model owns the general box model; Text owns line-breaking and text processing. This lesson demonstrates those interactions without taking their concepts over.

.boundary{columns:2;column-gap:1rem;height:6rem}.boundary p{margin:0 0 .75rem}.boundary p:nth-child(2){?:column}

Putting the model together

A reliable mental model is: identify the fragmented flow, identify its fragmentation context and fragmentainers, find the possible break points, apply the relevant break constraints, then let the fragmentation algorithm continue the flow into the next fragmentainer. For pages, add the Paged Media page context; for columns, add the Multi-column column model.

That separation is the main anti-repetition rule for this lesson: teach fragmentation once as a shared mechanism, then let Multi-column and Paged Media specialize it for their own environments.