Por qué existe esta página
Cada vez que se toca una variable de color o una regla de blog-article.css, hay que verificar el resultado contra contenido real. Los artículos publicados no sirven para eso: ninguno usa a la vez tablas, citas, código embebido y listas anidadas. Este artículo sí. Es una hoja de muestra — un espécimen tipográfico con todos los elementos que el editor puede producir, cada uno acompañado de la regla que lo gobierna.
Si algo se ve mal acá, se ve mal en todo el blog.
Cómo leerla
El orden sigue al del archivo de estilos: primero texto y encabezados, después listas, código, multimedia, citas y tablas. Cada bloque demuestra lo que describe.
Texto corrido y énfasis
Este es un párrafo normal. El interlineado y el margen inferior salen de la regla base; el ancho de línea lo fija el contenedor del artículo, no el CSS de prosa. Dentro del párrafo conviven negrita, cursiva, subrayado, tachado y un enlace externo, que se distingue por el subrayado naranja y cambia de color al pasar el cursor.
El código en línea usa una caja propia: npm run build se lee distinto de un enlace aunque compartan el verde profundo, porque lleva fuente monoespaciada y fondo crema. También aparecen subíndices y superíndices cuando el texto los pide.
Encabezado de tercer nivel
Los h3 ordenan las secciones internas de un tema. Bajan de tamaño respecto al h2 pero mantienen el peso.
Encabezado de cuarto nivel
Los h4 son el último nivel con jerarquía visual clara. Por debajo conviene usar texto normal.
Epígrafe o antetítulo
El h6 no funciona como encabezado sino como etiqueta: sirve para epígrafes, créditos de imagen y aclaraciones al pie de un bloque.
Alineaciones
Alineado a la izquierda. Es el valor por omisión y casi siempre el correcto para texto largo.
Alineado al centro. Reservado para pies de foto y frases sueltas.
Alineado a la derecha. Útil para atribuciones cortas.
Justificado. Reparte el espacio entre palabras para que ambos bordes queden rectos; en columnas angostas abre huecos incómodos, así que se usa poco. Este párrafo es largo a propósito, porque la justificación solo se nota cuando el texto ocupa varias líneas y el navegador tiene margen para estirar los espacios.
Listas
Lista numerada
Para secuencias donde el orden importa: pasos de un proceso, prioridades, cronologías.
- Definir el problema antes de escribir código.
- Medir el estado actual para tener contra qué comparar.
- Aplicar el cambio más pequeño que se pueda verificar.
- Volver a medir y decidir si vale la pena seguir.
Lista con viñetas
Para conjuntos donde el orden es indistinto.
- La viñeta es un punto aqua, no un guion.
- Cada ítem arranca con mayúscula y cierra con punto.
- Si un ítem necesita dos oraciones, probablemente sea un párrafo.
Lista heredada
El editor guarda toda lista como <ol> y distingue el tipo con el atributo data-list. El contenido antiguo todavía trae <ul> real, así que el CSS lo contempla y lo pinta igual:
- Un
<ul>auténtico, como el que dejó el editor anterior. - Se ve idéntico a la lista con viñetas de arriba.
Código
El bloque de código sirve para fragmentos que se copian y pegan. Fondo oscuro, desplazamiento horizontal cuando la línea no entra, y barra de desplazamiento con estilo propio:
// Relación de contraste según WCAG 2.1
const luminancia = ([r, g, b]) =>
[r, g, b]
.map(canal => canal / 255)
.map(canal => canal <= 0.03928 ? canal / 12.92 : ((canal + 0.055) / 1.055) ** 2.4)
.reduce((total, canal, i) => total + canal * [0.2126, 0.7152, 0.0722][i], 0)
export function contraste(frente, fondo) {
const [claro, oscuro] = [luminancia(frente), luminancia(fondo)].sort((a, b) => b - a)
return (claro + 0.05) / (oscuro + 0.05)
}
// AA exige 4.5 para texto normal y 3.0 para texto grande y elementos de interfaz.
console.log(contraste([0, 106, 104], [254, 249, 240]).toFixed(2))Para nombres de archivo, comandos o propiedades sueltas basta el código en línea: --night-elevated, color-mix(), src/app/globals.css.
Imágenes y video
Las imágenes ocupan todo el ancho de la columna, con esquinas redondeadas y un contorno tenue que las separa del fondo blanco.
Pie de foto: el h6 centrado es el formato acordado para los créditos.
Los videos embebidos respetan la proporción 16:9 y se adaptan al ancho disponible.
Citas
La cita destaca una frase ajena. El último párrafo de la cita, cuando hay más de uno, se trata como atribución y baja de tamaño y contraste:
El contraste no es una cuestión de gusto. Es la diferencia entre un texto que alguien puede leer y uno que no.
— Pauta WCAG 1.4.3, traducida libremente
Si la cita tiene un solo párrafo, no hay atribución y el párrafo conserva el tamaño completo:
Medir primero, opinar después.
Tablas
Las tablas sirven para comparar valores, no para maquetar. Encabezado con fondo propio, celdas con borde fino y desplazamiento horizontal en pantallas angostas.
| Elemento | Color de texto | Fondo | Contraste |
|---|---|---|---|
| Texto corrido | --black |
Blanco | 11.58 |
| Enlace | --aqua-dark |
Blanco | 5.71 |
| Código en línea | --aqua-dark |
--white |
5.42 |
| Atribución de cita | --black al 70% |
Blanco | 4.92 |
Qué revisar antes de publicar
- Que ningún texto baje de 4.5 de contraste sobre su fondo real.
- Que las listas con viñetas muestren el punto aqua y no un número.
- Que el bloque de código desplace en horizontal en lugar de cortar la línea.
- Que la tabla no rompa el ancho de la columna en pantalla de teléfono.
Cuando los cuatro puntos dan bien, el cambio de estilos está listo.
