La texture papier sur un site web

La texture papier pose sur toute la page la fibre d’un papier épais. Elle sort le site du verre de l’écran et le pose sur une matière : la page se lit comme une lettre, un faire-part, un rapport bien imprimé. C’est la texture des métiers où le numérique doit se faire oublier : le conseil, le soin, le droit, l’édition.

Sans

Papier

La démonstration prend une affiche claire, le mur d’un atelier de peinture, parce que la texture travaille en assombrissant : une image déjà sombre ne lui laisse presque rien à faire. Elle se voit pleinement sur une palette claire : crème, ivoire, gris pâle, sable.

D’où vient l’effet

Le papier est une matière en feuilles minces, faite de fibres qui adhèrent entre elles. Jusqu’à la première moitié du XIXe siècle, ces fibres venaient des chiffons ; la pâte de bois les a remplacées ensuite, et la première pâte mécanique date de 1860 (Larousse).

Fait à la main, la feuille garde aussi la trace du tamis qui l’a formée. Le papier vergé porte les marques de ses fils, les vergeures (Académie française), qui apparaissent en lignes fines quand on lève la feuille vers la lumière. Le papier vélin est formé sur une toile métallique très fine, et paraît tissé par transparence. En Occident, James Whatman est sans doute le premier à l’avoir fabriqué, et le Virgile imprimé par John Baskerville en 1757 est le premier livre connu à l’employer (American Bookbinders Museum, 2015).

La bibliothèque de l’atelier en garde la fibre, sans vergeures ni filigrane : un bruit gris, irrégulier, étiré dans un sens, qui évoque un papier épais et un peu rugueux. Sur un écran, il rappelle ce qu’on associe à l’imprimé : le soin, la durée, le document qu’on signe.

Quand le poser

Cinq des vingt-quatre mises en page prêtes de l’atelier l’emploient :

• la mise en page Cabinet de santé, pour les dentistes, les kinés et les médecins, qui doivent rassurer sans infantiliser ;
• la mise en page Conseil, pour les consultants, les experts-comptables et les bureaux d’études ;
• la mise en page Cabinet juridique, pour les avocats, les notaires et les commissaires de justice ;
• la mise en page Association, pour les clubs, les ONG et les collectifs ;
• la mise en page Bien-être, pour le yoga, le massage et les thérapies, où elle s’accompagne d’une fuite de lumière.

Les cinq ont un fond fixe, une image plutôt qu’un film : la page se regarde posément, comme un document. La texture papier convient aussi à un éditeur, une librairie, un relieur, une papeterie, une créatrice de faire-part, un architecte qui montre ses carnets de croquis.

Il vaut mieux s’en passer :

• sur une palette très sombre. En mode produit, la texture ne fait qu’assombrir ; sur du noir, elle n’a presque plus rien à faire, et la bibliothèque conseille de baisser son intensité ;
• avec le grain : deux textures se disputent la même surface, et aucune des deux ne se lit ;
• avec une lueur néon : la fibre et le néon viennent de deux mondes, et l’un fait douter de l’autre ;
• sur un site qui vit de l’écran et de la vitesse : un logiciel, un studio 3D, un développeur de jeux. Le papier y ressemble à un déguisement.

Le bon dosage

Dans la bibliothèque, le papier est posé à 50 % d’opacité, en mode de fusion produit (multiply). C’est, avec les caustiques, l’intensité par défaut la plus haute du jeu, et elle a sa raison : le motif est un gris irrégulier, lui-même à demi transparent, et le mode produit ne sait qu’assombrir. Un calque blanc ne change rien, un calque noir rend tout noir, un gris assombrit un peu, comme deux images imprimées sur des films transparents qu’on superpose (MDN). Sur une page claire, la fibre ressort nettement ; sur une page sombre, elle s’efface presque.

La règle des deux calques au plus vaut ici comme ailleurs : au troisième, l’image se salit, et plus personne ne sait lequel retirer. Dans la mise en page Bien-être, le papier partage déjà la page avec la fuite de lumière, et les deux se répondent : la lumière chaude éclaircit un coin, le papier assombrit doucement le reste.

Ce qu’il coûte

Le motif est une petite image SVG de 180 pixels de côté, écrite directement dans la feuille de style : aucun fichier à télécharger. Le navigateur fabrique le bruit à partir d’un filtre, puis répète la tuile sur toute la page. Elle ne change jamais, et rien n’oblige à la redessiner pendant qu’on fait défiler.

C’est la condition pour que le calque ne coûte presque rien. Un navigateur n’anime à peu de frais que la position et l’opacité d’un calque (web.dev) ; une texture plein écran qui bougerait le forcerait à repeindre l’écran entier à chaque image. Le papier reste donc immobile. Il se lève seulement à mesure qu’on quitte le premier écran, pour laisser la vidéo ou l’image d’accueil intacte.

L’accessibilité

• Le contraste. Le calque se pose par-dessus tout, texte compris, et il assombrit. Un texte clair sur fond sombre perd un peu d’éclat ; un fond clair se ternit sous un texte foncé. Vérifiez le contraste là où la fibre est la plus dense : au moins 4,5 pour 1 pour un texte courant, et 3 pour 1 pour un grand titre (W3C, WCAG 2.2).
• Le mouvement réduit. Quand le visiteur demande à son appareil moins d’animations (prefers-reduced-motion), la bibliothèque retire le grain et le givre. Le papier reste : il est immobile.
• Aucun clignotement. Le calque ne bouge pas et ne clignote jamais.

Comment il est fait

Le motif naît d’un filtre SVG, feTurbulence, qui fabrique un bruit de Perlin, celui qu’on emploie pour imiter les nuages ou le marbre. Tout tient dans sa fréquence : l’attribut baseFrequency accepte deux nombres, le premier pour l’horizontale, le second pour la verticale (MDN). Une fréquence très basse en largeur et très haute en hauteur étire le bruit en filaments horizontaux, comme les fibres d’une feuille. Un second filtre, feColorMatrix, en retire toute couleur :

<filter id="f">
  <feTurbulence type="fractalNoise" baseFrequency=".035 .9" numOctaves="3"/>
  <feColorMatrix type="saturate" values="0"/>
</filter>
<rect width="100%" height="100%" filter="url(#f)" opacity=".55"/>

Le dessin est inscrit dans la feuille de style comme image de fond d’un calque posé par-dessus la page, qui se fond dans l’image en mode produit. L’opacité multiplie le réglage du calque par le « voile » qui le retient sur le premier écran :

.m.m--papier {
  mix-blend-mode: multiply;
  opacity: calc(var(--papier, .5) * var(--m-voile, 1));
  background-image: url("data:image/svg+xml;utf8,<svg …>…</svg>");
}

Dans l’atelier

La texture papier fait partie des dix matières de la bibliothèque. On la choisit à l’étape « La matière », après le fond, seule ou avec une seconde matière.