G224Conservar la sangría que da sentido al texto en pantallas estrechas

Un sitio web transmite información en forma de lista anidada. La comprensión de la jerarquía de la lista se apoya en la sangría de su contenido. Aunque es importante que el texto de cada elemento de la lista se reajuste, la jerarquía de la lista se vería perjudicada si se aplanara para que todo el contenido cupiera en una ventana gráfica de 320 píxeles CSS de ancho.

La siguiente lista de ejemplo contiene listas anidadas adicionales que aportan más contexto al texto de cada elemento de la lista padre. Para mantener la jerarquía visual, la sangría de cada nivel de la lista se conserva, pero se modifica cuando se alcanza un punto de ruptura (breakpoint) CSS definido por el autor. Se establecen estilos adicionales para distintos puntos de ruptura con el fin de mitigar la posibilidad de que el contenido se extienda más allá de una ventana gráfica de 320 píxeles de ancho, teniendo en cuenta a la vez el espaciado visual respecto a los bordes de la ventana gráfica para intentar que el contenido no resulte apretado. En el punto de ruptura más pequeño, el contenido de los elementos de la lista recibe una anchura mínima para mitigar el posible «aplastamiento» de las listas con muchos niveles anidados. En este punto de ruptura, cada nivel de lista anidada puede llevarse a la vista mediante desplazamiento horizontal y, una vez que una lista anidada es visible dentro de la ventana gráfica, solo será necesario el desplazamiento vertical para leer el contenido de sus elementos.

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

Un ejemplo práctico de una lista cuyos niveles anidados pueden leerse en una ventana gráfica de 320 píxeles de ancho.

Un sitio web que ofrece fragmentos de código necesita mantener la sangría de las líneas, ya que las sangrías son significativas no solo para la estructura del código, sino que en algunos lenguajes, como Python, son obligatorias para definir bloques de código.

A medida que el usuario amplía la página web, el CSS de la sangría puede ajustarse para mantener esta estructura necesaria y permitir, al mismo tiempo, que se vea más texto en una sola línea.

Lo siguiente representa un ejemplo de código en Python. La sangría de cada línea de texto es necesaria para crear un grupo de sentencias que se ejecutan como un bloque.

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")

El siguiente ejemplo de código muestra el uso de la sangría para transmitir el anidamiento de los elementos en un documento HTML:

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

La sangría de bloques de código como estos podría ajustarse para distintos tamaños de ventana gráfica mediante una consulta de medios (media query) CSS.

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

Un ejemplo práctico de fragmentos de código que usan CSS para modificar la anchura de la sangría en distintos puntos de ruptura.