Title: CSS Overflow Module Level 5
Status: FPWD
Prepare for TR: yes
Work Status: Revising
Date: 2024-12-17
ED: https://drafts.csswg.org/css-overflow-5/
TR: https://www.w3.org/TR/css-overflow-5/
Shortname: css-overflow
Group: csswg
Level: 5
Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/, w3cid 43241
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Robert Flack, Google, flackr@google.com, w3cid 98451
Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media.
	It builds on the CSS Overflow Module Level 4,
	adding the ability to generate and associate various scrolling controls
	(markers to indicate scroll progress, buttons to trigger scrolling),
	and adding an appendix containing an experimental exploration
	of redirecting overflow by fragmentation.

type: dfn; spec:css-multicol-1; text:overflow column
spec:css-pseudo-4; type:selector; text:::first-letter
spec:css-pseudo-4; type:selector; text:::first-line
spec:css-writing-modes-4; type:dfn; text:start
spec:css-writing-modes-4; type:dfn; text:end

spec: css21

url: https://www.w3.org/TR/CSS21/visudet.html#strut; type: dfn; text: strut;

Introduction

Overflow Concepts and Terminology

Scrolling overflow

Scroll navigation controls

Scroll markers

Scroll marker grouping

The 'scroll-marker-group' property

	Name: scroll-marker-group
	Value: none | before | after
	Initial: none
	Applies to: [=scroll containers=]
	Inherited: no
	Computed value: specified value
	Animation Type: discrete
	Canonical Order: per grammar
	

none

The [=scroll container=] does not create a '::scroll-marker-group' pseudo-element.

before

The [=scroll container=] generates a ''::scroll-marker-group'' pseudo-element whose box is an immediate preceding sibling to its [=originating element=].

after

The [=scroll container=] generates a ''::scroll-marker-group'' pseudo-element whose box is an immediate following sibling to its [=originating element=].

The ''::scroll-marker-group'' pseudo-element

		/* The generation of ::scroll-marker pseudo-elements shouldn't
		 * invalidate layout outside of this pseudo-element. */
		::scroll-marker-group { contain: size !important; }
	

The ''::scroll-marker'' pseudo-element

Selecting The Active Scroll Marker: the '':target-current'' pseudo-class

			a:target-current {
				font-weight: bold;
			}
		

Activation behavior

Next tab-index-ordered focus

Scroll Buttons

: up : down : left : right :: Selects the ''::scroll-button()'' corresponding to the given physical direction. : block-start : block-end : inline-start : inline-end :: Selects the indicated ''::scroll-button()'' pseudo-element. : prev :: Selects either the [=block-start=] or [=inline-start=] ''::scroll-button()'', whichever's axis has more "scrollable pages" in the [=originating element=]: the [=originating element's=] [=scrollable overflow area|scrollable overflow height=] divided by its [=scrollport=] height, or the same but for widths. If both dimensions are equally sized, selects the [=block-start=] ''::scroll-button()''.

For example, say the [=originating element=] was 800px wide and 500px tall, while its [=scrollable overflow area=] was 1200px wide and 1000px tall. The horizontal scrolling thus represents 1.5 "pages" (1200/800), while the vertical scrolling represents 2 "pages" (1000/500), so (assuming the element is in English) the ''::scroll-button(prev)'' selector would select the [=block-start=] button. : next :: Identical to ''::scroll-button()/prev'', except it selects the [=block-end=] or [=inline-end=] ''::scroll-button()'' instead.

Focus behavior

The active element

Focus related pseudo-classes

Focus navigation order

Appendix A: Redirection of Overflow

Channeling Overflow: the 'continue' property

		Name: continue
		New Values: overflow | paginate | fragments
		Initial: auto
		Applies to: block containers [[!CSS2]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
		Inherited: no
		Percentages: N/A
		Computed value: see below
		Animation type: discrete
	

auto

''continue/auto'' may only occur as a computed value if the element is a CSS Region other than the last one in a region chain. Content that doesn't fit is pushed to the next region of the chain. In all other cases, ''continue/auto'' computes to one of the other values. Issue: this is different from the definition in [[css-overflow-4#continue]], where the specified value is the computed value. Which is model better?

overflow

Content that doesn't fit overflows, according to the 'overflow' property

paginate

Content that doesn't fit paginates. This creates a paginated view inside the element similar to the way that 'overflow: scroll' creates a scrollable view. See paginated overflow Note: Print is effectively "continue: paginate" on the root.

fragments

content that doesn't fit causes the element to copy itself and continue laying out. See fragment overflow.

Paginated overflow

			@media (overflow-block: paged), (overflow-block: optional-paged) {
				:root {
					continue: paginate;
				}
			}
		

Fragmented Overflow

						<!DOCTYPE HTML>
						<title>Breaking content into
						  equal-sized cards</title>
						<style>
						  .in-cards {
						    continue: fragments;

						    width: 13em;
						    height: 8em;

						    padding: 4px;
						    border: medium solid blue;
						    margin: 6px;

						    font: medium/1.3 Times New
						      Roman, Times, serif;
						  }
						</style>
						<div class="in-cards">
						  In this example, the text in the div
						  is broken into a series of cards.
						  These cards all have the same style.
						  The presence of enough content to
						  overflow one of the cards causes
						  another one to be created.  The second
						  card is created just like it's the
						  next sibling of the first.
						</div>
					

						<!DOCTYPE HTML>
						<style>
						  .article {
						    continue: fragments;
						  }
						  .article::first-letter {
						    font-size: 2em;
						    line-height: 0.9;
						  }
						  .article::nth-fragment(1) {
						    font-size: 1.5em;
						    max-lines: 3;
						  }
						  .article::nth-fragment(2) {
						    column-count: 2;
						  }
						</style>
						<div class="article">
						  ...
						</div>
					

Fragment styling

The ''::nth-fragment()'' pseudo-element

Styling of fragments

						<!DOCTYPE HTML>
						<style>
						  .bouncy-columns {
						    continue: fragments;
						    width: 6em;
						    height: 10em;
						    float: left;
						    margin: 1em;
						    font: medium/1.25 Times New
						      Roman, Times, serif;
						  }
						  .bouncy-columns::nth-fragment(1) {
						    background: aqua; color: black;
						    transform: rotate(-3deg);
						  }
						  .bouncy-columns::nth-fragment(2) {
						    background: yellow; color: black;
						    transform: rotate(3deg);
						  }
						</style>
						<div class="bouncy-columns">
						  ...
						</div>
					

					<!DOCTYPE HTML>
					<style>
					  .article {
					    continue: fragments;
					  }
					  .article::nth-fragment(1) {
					    font-size: 1.5em;
					    margin-bottom: 1em;
					    height: 4em;
					  }
					  .article::nth-fragment(2) {
					    margin-left: 5em;
					    margin-right: 2em;
					  }
					</style>
					<div class="article">
					  The <code>font-size</code> property...
					</div>
					

Styling inside fragments

						<!DOCTYPE HTML>
						<style>
						  .dark-columns {
						    continue: fragments;
						    width: 6em;
						    height: 10em;
						    float: left;
						    margin-right: 1em;
						    font: medium/1.25 Times New
						      Roman, Times, serif;
						  }
						  .dark-columns::nth-fragment(1) {
						    background: aqua; color: black;
						  }
						  .dark-columns::nth-fragment(1) :link {
						    color: blue;
						  }
						  .dark-columns::nth-fragment(1) :visited {
						    color: purple;
						  }
						  .dark-columns::nth-fragment(2) {
						    background: navy; color: white;
						  }
						  .dark-columns::nth-fragment(2) :link {
						    color: aqua;
						  }
						  .dark-columns::nth-fragment(2) :visited {
						    color: fuchsia;
						  }
						</style>
						<div class="dark-columns">
						  ...
						</div>
					

Appendix C: Privacy Considerations

Appendix D: Security Considerations

Changes Since Level 4

Acknowledgments

Thanks especially to the feedback from Rossen Atanassov, Bert Bos, Tantek Çelik, John Daggett, fantasai, Daniel Glazman, Vincent Hardy, Håkon Wium Lie, Peter Linss, Robert O'Callahan, Florian Rivoal, Alan Stearns, Steve Zilles, and all the rest of the www-style community.