Skip to content

Technique g20x:Accounting for meaningful text indentation and Reflow

About this Technique

This technique is not referenced from any Understanding document.

This technique applies to all technologies that support style switching.

Description

There are instances where indentation of text is considered important to the understandability of the text content. If the indentations were to be removed, then meaning or functionality could suffer. For instance, the nesting of unordered list hierarchies would become more difficult to notice if indentation were removed. Additionally, maintaining indentations can be important to help understand code patterns, if not even necessary for the code to function.

Maintaining indentation is important for these instances of text, and would be considered essential for two-dimensional scrolling if the text were enlarged and could not be fully presented within the available viewport. However, there are still styling modifications that could be made to help ensure the indentation was maintained, but as much text was made visible within the viewport as possible.

Examples

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 container.

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 the lists is maintained, but reduced once an author defined CSS breakpoint is met. The container of the text content of each list item is given a maximum width of 320 CSS pixels so that even though the list will require bi-dimensional scrolling to view all nested lists, each list item in each nested list level will be able to be read witout the need to scroll in two directions.

<div class=example>
	<ul>
		<li>
			<p>Make a list using one of the HTML list elements, or even an ARIA role=list container.</p>
			<ul>
				<li>
					<p>There are three types of lists in HTML which can contain list items (li elements.</p>
					<ul>
						<li><p>the ul element</li>
						<li><p>the ol element</li>
						<li><p>the menu element</li>
					</ul>
				</li>
				<li>
					<p>Another type of list, description lists, exist as well - but they do not contain list items (li 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 li elements can be omitted if the li element is immeditely followed by another li element or there is no more content in the parent list element.</p>
				
				
  • The list marker for each li element is initially based on the parent list element used.
    
					
      
						
    • The list maker can be modified by using CSS,
      • 
						
    • or the list marker can be modifed by using the type attribute, if the parent list element is an ol element.
      • 
					
    
				
    • 
			
		
		
  • 
			
    Validate your markup.
    
		
    • 
	


    @media screen and (max-width: 640px) {
	.example {
		overflow: auto;
		max-width: 640px;
	}
	ul {
		padding-inline-start: 1em;
	}
	li p {
		max-width: 320px;
		margin: .5em 0;
	}
}

    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;
	}
}

    Tests

    Procedure

    1. Open the content that requires horizontal scrolling on a full screen window.
    2. Zoom in or resize the browser window so that the viewport

    Expected Results

    • Checks X are true.
    Back to Top