Technique G224:Accounting for meaningful text indentation and Reflow

Example 1

A website conveys information in a nested list format. The understandability of the list hierarchy is supported by the indentation of the list content. While it is important for the individual list item text to reflow, the list hierarchy would suffer if flattened so that all content would fit within a 320 CSS pixel wide viewport.

The following example list contains additional nested lists to provide more context for each of the parent list item's text. To maintain the visual hierarchy, the indentation of each list level remains present, but modified once an author defined CSS breakpoint is met. Additional styles are set for different breakpoints to mitigate against the potential for content to extend beyond a 320px wide viewport, while accounting for visual spacing against the borders of the viewport, to attempt to make the content not feel cramped. At the smallest breakpoint, the content of list items receive a minimum width to mitigate against potentially "squished" content lists with many nested levels. At this breakpoint, each nested list level can be horizontally scrolled into view, and once a nested list is visible within the viewport, only vertical scrolling will be necessary to read the content of the nested list's items.

<div class="example">
	<ul>
		<li>
			<p>Make a list using one of the HTML list elements, or even an ARIA <code>role=list</code> container.</p>
			<ul>
				<li>
					<p>There are three types of lists in HTML which can contain list items (<code>li</code> elements.</p>
					<ul>
						<li><p>the <code>ul</code> element</li>
						<li><p>the <code>ol</code> element</li>
						<li><p>the <code>menu</code> element</li>
					</ul>
				</li>
				<li>
					<p>Another type of list, description lists, exist as well - but they do not contain list items (<code>li</code> elements).</p>
				</li>
        ...
			</ul>
		</li>
		<li>
			<p>Neither the start or end tags of any of the HTML list elements are omissible.</p>
			<ul>
				<li><p>The end tags of <code>li</code> elements can be omitted if the <code>li</code> element is immeditely followed by another <code>li</code> element or there is no more content in the parent list element.</p>
				</li>
				...
			</ul>
		</li>
		...
	</ul>
</div>

*, *::before, *::after {
    box-sizing: border-box;
}
body, html {
    font-family: arial;
}
@media screen and ( max-width: 640px ) {
    .example {
        overflow: auto;
        max-width: 640px;
    }
    ul {
        padding-inline-start: 1.25em;
    }
    li p {
        padding: .25em;
        margin: .5em 0 .5em -.25em;
        max-width: 300px; /* saftey net for max-width */
    }
}
@media screen and ( max-width: 400px ) {
    ul { padding-inline-start: 1em; }
    li p { min-width: 300px } {
        min-width: 300px;
    }
}

A working example of a list where nested levels can be read within a 320px wide viewport.

Example 2

A website providing code snippets needs to maintain line indentations, as the indentations are meaningful not only to the structure of the code, but in some languages - such as with Python, are requirements when defining blocks of code.

As a user zooms in the web page, the CSS of the indentation can be adjusted to maintain this necessary structure, while also allowing more text to be visible on a single line.

The following represents a Python code example. The indentation of each line of text is necessary to create a group of statements that are executed as a block.

def complex_function(x):
    if x > 0:
        for i in range(x):
            if i % 2 == 0:
                print(f"{i} is even")
                for a in range(i):
                    if a % 5 == 0:
                        print(f"  {a} can be divided by 5")
                    else:
                        print(f"  {a} cannot be divided by 5")
            else:
                print(f"{i} is odd")
                for a in range(i):
                    if a % 2 == 0:
                        print(f"  {a} is even")
                    else:
                        print(f"  {a} is odd")
    else:
        print("x is not a positive number")

The following code example demonstrates the use of indentation to convey the nesting of elements in an HTML document:

<html lang=en>
	<head>...</head>
	<body>
		<div>
			<!-- ... keep indenting as necessary  -->
		</div>
	</body>
</html>

The indentation of code blocks like these could be adjusted at different viewport sizies, via a CSS Media Query.

@media screen and ( min-width: 320px ) {
	pre {
		tab-size: 8px;
	}
}

@media screen and ( min-width: 640px ) {
	pre {
		tab-size: 16px;
	}
}

@media screen and ( min-width: 1280px ) {
	pre {
		tab-size: 32px;
	}
}

A working example of code snippets using CSS to modigy indentation width at different breakpoints.