Effet lignes de trame (scanlines) sur un site web

Une ligne fine tous les quatre pixels, sur toute la page : c’est la trame d’un vieux moniteur, le souvenir d’un écran où l’image se dessinait ligne après ligne. L’effet est très marqué. On le choisit pour dire une époque, une culture technique, une esthétique de la machine ; il se voit trop pour servir de simple finition.

Sans

Trame

D’où vient l’effet

Sur un téléviseur à tube cathodique, l’image ne s’affiche jamais d’un bloc. Elle est balayée de gauche à droite et de haut en bas, une ligne après l’autre. La télévision analogique française en traçait 625 par image, à raison de cinquante demi-images par seconde, selon la recommandation de l’Union internationale des télécommunications qui décrit les systèmes de télévision du monde. Avant elle, la France avait diffusé en 819 lignes, le plus fin des formats que cite Britannica, avec le système dit E, que la recommandation donne en usage jusqu’en 1984.

Ces demi-images s’entrelacent. La première pose une ligne sur deux, en laissant entre elles un espace vide de même largeur ; la seconde vient remplir ces espaces. Elles se succèdent assez vite pour que l’œil n’en voie qu’une seule image (Britannica). De près, la structure en lignes reste pourtant visible, et c’est elle que le calque imite. Pour qui a grandi devant un écran à tube, quelques lignes suffisent à dire « télévision », « console », « moniteur de régie ».

Quand la poser

La trame raconte l’écran et la machine. Elle va :

• à un studio de création qui travaille l’image de synthèse ou le motion design, et revendique une culture de l’écran ;
• à un transporteur ou une plateforme logistique, dont la page se lit comme un tableau de bord ;
• à une usine ou un bureau technique, où la précision et le relevé priment sur le décor ;
• à une salle d’arcade, un studio de son, un festival tourné vers le rétro.

Trois mises en page de l’atelier la posent d’office. La mise en page Studio 3D l’associe à la halation : un écran allumé dans le noir. La mise en page Transport et la mise en page Industrie la portent seule, sur des pages faites de chiffres et de capacités.

Quand s’en passer. Un cabinet de santé, un restaurant, une maison d’hôtes : tout ce qui doit paraître chaleureux et humain gagne à rester sans trame. Évitez-la aussi sur une page chargée en texte fin, car une ligne tous les quatre pixels traverse chaque lettre de petite taille. Enfin, ne la cumulez pas avec la trame de points : deux grilles régulières superposées peuvent produire des ondulations parasites, le moiré.

Le bon dosage

Dans la bibliothèque, la trame trace une ligne d’un pixel tous les quatre pixels, dans la couleur du texte du site à 40 %, et le calque entier est posé à 18 % d’opacité. Sur une page sombre au texte clair, les lignes sont claires ; sur une page claire au texte foncé, elles sont foncées. La trame reste ainsi dans la palette.

Son pas est fixé en pixels d’écran : il garde la même finesse quelle que soit la taille du texte. La raison est écrite dans la feuille de la bibliothèque : une trame qui grossirait avec la typographie perdrait sa finesse d’écran et tournerait au rideau.

Comme les autres matières, elle laisse le premier écran nu et se lève à mesure qu’on descend : la vidéo d’accueil reste intacte. Et la règle de la bibliothèque vaut ici comme ailleurs : deux calques au plus. Au-delà, l’image se salit, et plus personne ne sait lequel retirer.

Ce qu’elle coûte

Très peu. Le calque est un dégradé répété, dessiné une fois par le navigateur, sans fichier à télécharger, posé en position fixe.

Il est immobile. Les effets de moniteur animés, où une barre lumineuse descend l’écran ou bien les lignes scintillent, demandent au navigateur de redessiner une surface plein écran à chaque image ; la bibliothèque n’anime aucun calque. La seule chose qui varie est l’opacité de la trame pendant le premier défilement, et l’opacité se change sans repeindre l’écran (web.dev).

L’accessibilité

• Le contraste. Les lignes passent sur le texte comme sur l’image. À la dose de la bibliothèque, elles pèsent peu, mais elles s’ajoutent au fond : mesurez le contraste du texte courant à l’endroit le moins favorable, avec au moins 4,5 pour 1 (WCAG 2.2, critère 1.4.3), et relisez les petits caractères à l’œil.
• Le mouvement réduit. Quand un visiteur demande moins d’animations (prefers-reduced-motion), le grain et le givre disparaissent. La trame reste, parce qu’elle ne bouge pas.
• Aucun clignotement. Le tube scintillait à cinquante demi-images par seconde. Le calque garde ses lignes et laisse le scintillement au passé : rien n’y clignote.

Comment elle est faite

Un dégradé linéaire répété, repeating-linear-gradient(), orienté de haut en bas : un pixel de couleur, trois pixels transparents, et le motif recommence jusqu’au bas de l’écran (MDN). La couleur est celle du texte du site, mêlée à la transparence par color-mix().

.m.m--trame {
  opacity: calc(var(--trame, .18) * var(--m-voile, 1));
  background: repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--fg) 40%, transparent) 0 1px,
    transparent 1px 4px);
}

--trame porte l’intensité, --m-voile le lever du calque après le premier écran. Sur un écran à haute densité, un pixel de CSS couvre deux ou trois pixels physiques : la proportion entre ligne et intervalle reste la même. Sur un écran mis à l’échelle à 125 % ou 150 %, certaines lignes peuvent sembler plus épaisses que d’autres ; regardez la page sur les appareils de vos clients avant de la publier.

Dans l’atelier

La trame fait partie des dix matières de la bibliothèque. On la choisit à l’étape « La matière », après le fond.