Core · Mostrar contenido
Texto corrido
Establece líneas de unos 70 caracteres y espacio entre bloques de texto largo, sea cual sea el marcado que escriba el editor.
Ejemplo
Un artículo breve en texto corrido, con dos encabezados, una lista y una cita.
Since March 2016, a group of volunteers has read the tide gauge in the port at six in the morning and six in the evening. Their sheets are the longest record of the sea in the bay that anyone has kept by hand, and the council will publish them as a table of open data.
How the readings were taken
Each reading is the height of the water against the gauge, to the nearest centimetre. The sheet calls it level_cm.
- Two readings a day, every day of the year.
- 41 volunteers over ten years.
- Fewer than one reading in a hundred left out.
We did not set out to measure the climate. We wanted to know when to take the boats out.
Four centimetres in ten years
The average height at high tide was 4 cm higher in 2025 than in 2016, close to what the national gauges record along the coast.
Problemas conocidos
Una tabla sin contenedor que sea más ancha que la columna desplaza la página lateralmente en pantallas estrechas. Coloca las tablas anchas en el contenedor de tablas de core, table, .luz-table-wrap, que permite desplazarse por su interior.
Aún no se ha probado con un lector de pantalla.
Código
Copiar el marcado
<div class="luz-prose">
<!-- What the editor or the Markdown writes, as it is -->
<p>Since March 2016, a group of volunteers has read the tide gauge…</p>
<h2 id="method">How the readings were taken</h2>
<p>…</p>
<ul class="wp-block-list">
<li>…</li>
</ul>
<figure>
<img src="gauge.jpg" width="1200" height="800" alt="The tide gauge in the port, a post marked in centimetres">
<figcaption>The gauge at low tide.</figcaption>
</figure>
</div>Variantes y opciones
No hay modificadores.
| Clase o propiedad | Qué hace |
|---|---|
.luz-prose | En el elemento que contiene el texto: líneas de unos 70 caracteres, espacio entre bloques, sangría y viñetas para las listas, y el código integrado con aspecto de ficha |
--luz-prose-measure | El ancho máximo de línea, 70ch de forma predeterminada. Establécelo en el contenedor entre 60ch y 80ch |
Cómo funciona
Solo CSS, en components/prose.css. Todos los selectores están dentro de :where(), así que prevalece un componente de LUZ dentro del texto o una regla tuya.
- Longitud de línea. Cada bloque del contenedor tiene como máximo la anchura de
--luz-prose-measure. Las figuras, tablas, bloques de código, imágenes, vídeos y.luz-table-wrapocupan todo el ancho del contenedor, pero no lo superan. - Espacio entre bloques. Cada bloque empieza
--luz-space-mdpor debajo del anterior. Los encabezados y las líneas separadoras empiezan más abajo (--luz-space-xl), y el bloque posterior a un encabezado queda más cerca (--luz-space-sm). Se usan márgenes, no una separación: los componentes conservan sus propios márgenes y los dos se combinan. - Listas. Todas las listas recuperan su sangría y sus viñetas, con o sin clase (por ejemplo, la lista
ul.wp-block-listde un editor), salvo las que tengan un objeto de maquetación (.o-grid,.o-stack) o una clase de componente de LUZ. - Código integrado tiene el aspecto de
.luz-code-inline. Las palabras y direcciones largas saltan de línea en vez de desplazar la página lateralmente. - Los elementos sin clase toman los mismos tres pasos entre bloques en
luz.css, así que ambos coinciden; el texto corrido está en una capa posterior y prevalece donde se superponen. El texto corrido añade la longitud de línea y las listas.
Sin JavaScript
No cambia nada: el texto corrido se crea con CSS.
Teclado y ARIA
El texto corrido no recibe el foco ni añade un rol. Pulsa Tab para llegar a los enlaces y controles que contiene, en el orden de origen.
- Un
<pre>largo se desplaza lateralmente por su interior. Para recorrerlo con el teclado, asígnaletabindex="0",role="region"y un nombre, como hace el bloque de código de core. - Los encabezados internos crean el esquema del texto: empieza en el nivel posterior al título de la página y no te saltes ninguno.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa el texto corrido alrededor de texto continuo cuyo marcado no escribes bloque a bloque: el cuerpo de una entrada o de una página de un editor de CMS, Markdown o un artículo de ayuda.
Cuándo no usarlo
No lo apliques a toda una página ni a una interfaz: la cabecera, la navegación, los formularios y las tarjetas se organizan por sí solos.
- Para una columna de bloques que construyas tú, usa
.o-stack. - Para una o dos líneas dentro de un componente, como el texto de una tarjeta, usa las clases del propio componente.
Qué hacer y qué no
Cómo escribir el contenido
Escribe para quien lee las primeras palabras de cada línea y se salta el resto.
- Una idea por párrafo. Expón el punto principal al principio.
- Usa encabezados ordenados y en mayúscula inicial, que expliquen el tema de cada sección.
- Usa una lista para tres o más elementos del mismo tipo; para dos, escribe una frase.
- Usa enlaces que indiquen adónde llevan y pies que expliquen qué muestran las figuras.
Contraste y foco
El texto y los enlaces conservan los colores de los elementos de core; el código integrado usa el color de código sobre una superficie apagada.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Texto | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Enlace | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Cita | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Código integrado | --luz-color-code on --luz-surface-muted | 5.3:1 | 8.1:1 | 9.0:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
- Foco: los enlaces conservan el contorno de 2 px
--luz-focus-ringde core, a 2 px del texto. - Enlaces: están subrayados, así que no se distinguen solo por el color (WCAG 1.4.1).
Tokens que usa
Los 11 tokens que lee components/prose.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Spacing and sizing
--luz-space-2xs,--luz-space-3xs,--luz-space-md,--luz-space-sm,--luz-space-xl,--luz-space-xs- Typography
--luz-text-xs- Radius
--luz-radius-sm
El teclado y ARIA están en la pestaña Código.