[CSS] Comment cacher du texte indésirable ?

16.09.2007

Pour une fois, on va s'offrir un petit sujet tout simple et nourri d'une expérience récente.

De quoi est-il question ? De tous les petits bouts de texte imposés par la plate-forme de blog : Inscription à la newsletter , Photo précédente , publié par etc. .

J'ai trouvé quatre procédés différents, que je présenterai par ordre de difficulté croissante en expliquant, comme d'habitude, sur des exemples leur principe et les raisons de choisir tel ou tel.

Bonus tardif : une cinquième méthode signalée en commentaire. M'a seulement fallu le temps de trouver un titre pour l'inclure dans l'article…

Frankenstein ou le Prométhée moderne Mary Shelley

Le plus simple serait encore de ne pas écrire du tout ces textes. Ce n'est pas seulement une boutade (même si …) : l'administration OB permet de préciser assez finement pas mal de choses, plus particulièrement du côté des articles. La première question à se poser est donc : existe-t-il un moyen de ne pas inclure ce texte dans la page ?

Si la réponse était toujours oui, mon article serait terminé.

Supposons que non : le texte est bel et bien dans la page HTML, il faut donc le masquer.

À ce stade, il me semble sage de sauvegarder la page incriminée sur votre micro, pour pouvoir examiner tranquillement son code HTML avec un bon éditeur de texte – ou encore utiliser la très commode barre WebDeveloper de Firefox. M'enfin, si vous préférez expérimenter sans filet directement sur votre blog, ça ne regarde que vous – et vos lecteurs, qui assisteront en direct aux soubresauts de la bête.

Mais vous êtes raisonnable, le fichier est chez vous, vous l'avez regardé sans stress inutile, et repéré le texte qui offense vos chastes prunelles.

Amédée, ou comment s'en débarrasser Ionesco

Commençons par la situation la plus favorable : le texte est doté d'un identifiant, d'une classe, ou au moins se trouve compris dans un span ou un div anonyme mais rien que pour lui – c'est souvent vrai dans les modules, où pratiquement tout est identifié. On peut alors élaborer un sélecteur plus ou moins raffiné pour désigner le texte. Ne reste plus qu'à indiquer dans le fichier CSS qu'on veut retirer le trublion de la page.

Pour retirer le trublion de la page on écrit {display:none}. Deux exemples pris dans le présent blog :

.box-footer {display:none}: retire le pied de tous les modules
.calendrier .box-titre {display:none}: retire le titre du module "Calendrier" (écrire Calendrier au-dessus d'un tableau contenant des nombres de 1 à 31 disposés en sept colonnes m'a toujours semblé un bel exemple de précision inutile)
(note 2013 : ce n'est plus vrai aujourd'hui parce qu'une infernale cuisine de JS modifie le titre de ce module – mais passons, vous avez compris)

Inutile d'insister, la technique est facile, bien connue, et marche avec tous les navigateurs.

Retenez seulement le point essentiel : l'élément HTML ainsi traité figure bien dans la page, il est bien transmis au micro de votre lecteur mais, visuellement, tout se passe comme si le code HTML correspondant avait été effacé de la page. C'est bien pourquoi j'emploie ici retirer plutôt que masquer . Subtilité absconse ? Lisez plutôt la suite (crévinguiou, transformer du bidouillage de blog en roman à suspens, fallait oser !).

L'homme invisible H.G. Wells

Cas un peu plus compliqué : le fragment indésirable n'est pas identifiable explicitement. Au lieu de ça, il se trouve pris dans autre chose. Cet autre chose est, lui, facilement désignable par un sélecteur mais contient aussi des éléments que l'on veut conserver à l'écran.

Un exemple ici est le module d'inscription à la newsletter, où la phrase Inscription à la newsletter me semblait faire double emploi avec le titre du module. Comment éliminer la phrase ?

Comme toujours, on commence par regarder le code HTML pour savoir qui est dans quoi :

 <div class="box newsletter"> <!-- Le module --> <div class="box-titre"> <!-- 1 - titre du module--> <h2><span>Abonnez-vous !</span></h2> </div> <div class="box-content"> <!-- 2 - corps du module --> Inscription à la newsletter <!-- 2.1 baratin --> <form > <!-- 2.2 formulaire --> <!-- une zone de saisie et un bouton --> </form> </div> <div class="box-footer"> <!-- 3 - pied du module --> <h2><span>&nbsp;</span></h2> </div> </div>

(code allégé, annoté et redisposé pour les besoins de la cause)

Le baratin n'a pas reçu d'étiquetage (classe ou identifiant) particulier : comment ne masquer que lui et pas le <form> ?

On peut imaginer contourner la difficulté en déclarant retirer tout le corps du module …

 .newsletter .box-content{display:none}

… MAIS faire réapparaître le composant souhaité :

 .newsletter form {display:block}

Bon raisonnement, malheureusement ça ne marche pas. Le recours à {display:none} élimine de l'affichage le corps du module et tous ses constituants – comme annoncé, tout se passe comme si le code HTML du corps de module ne figurait plus dans la page.

Alors ? Il y a une autre voie : on peut déclarer qu'un élément, tout en continuant à figurer dans la page, y est invisible , transparent . Ça se dit {visibility:hidden}. Comme l'élément, bien qu'invisible, est considéré comme toujours présent, on peut faire réapparaître certains de ses constituants. Ce qui donne un CSS tel que :

 .newsletter .box-content {visibility:hidden;} .newsletter form {visibility:visible;}

Ça marche parfaitement, et avec tous les navigateurs.

Il reste un petit hic : la phrase maudite est transparente mais pas supprimée, et elle occupe toujours de la place. Le plus simple, si on veut fignoler, est alors de faire remonter l'élément suivant (ici le formulaire de saisie) en lui donnant une marge négative, pour lui permettre d'empiéter sur l'emplacement du texte. Le CSS définif est donc :

 .newsletter .box-content {visibility:hidden;} .newsletter form {visibility:visible; margin-top:-14px;}

(la valeur exacte de la marge négative dépend évidemment de la présentation du blog)

Un résultat d'expérience perso : les marges négatives marchent bien dans tous les navigateurs – tant qu'on n'en abuse pas. Quand on commence à les empiler (p.ex. une marge négative en haut et positive en bas sur un même élément), il arrive à Internet Explorer de perdre pied pour la mise en page et de donner dans le peek-a-boo (=affichage erratique). Prudence et test systématique, donc.

Un néant à l'égard de l'infini Pascal

Les deux techniques précédentes, simples et fiables, sont de grands classiques. Certains cas tordus demandent cependant plus d'ingéniosité.

Un exemple ici est fourni par la pagination, au-dessus des articles : les mots début , précédent , suivant , fin m'agaçaient un peu et j'aurais bien mis une image à leur place. Pour y comprendre quelque chose, regardons le code de suivant (celui des trois autres est analogue) :

 <!-- next page --> <a href="..." rel="next" class="textNext">suivant</a>

Mettre une image, c'est facile : il suffit de la définir comme image de fond :

 a.textNext {background-image:url(une-certaine-image.gif)}

Mais comment masquer le texte, et seulement le texte, du lien, en conservant ce lien ? Pas question bien sûr de retirer le lien de la page, pas question non plus de le rendre invisible : il serait inutilisable parce que le fond serait lui aussi invisible.

Je n'ai trouvé qu'un bricolage un peu scabreux : utiliser une police de taille … zéro !

 a.textNext {font-size:0}

Scabreux mais rigolo : le texte se trouve réduit à un carré de zéro pixel de côté, et le pavé correspondant en est tout ratatiné ! Pour le regonfler, il suffit d'ajuster le padding :

 a.textNext, a.textLast, a.textPrevious, a.textFirst {text-decoration: none; font-size: 0; padding: 15px 20px 8px;}

(là aussi, les valeurs de padding sont à adapter à votre cas particulier)

Cette technique est à réserver aux cas les plus rétifs :

l'ajustement des padding peut être très fastidieux
surtout, la taille zéro n'est pas comprise par tous les navigateurs. Surprise, ce n'est pas Internet Explorer qui fait ici des siennes, mais Safari qui se distingue – à qui se fier ? Du coup, sous Safari, les pavés en question sont énormes : le padding a augmenté alors que le texte a gardé sa taille d'origine.

Pour résoudre la question j'ai alors tenté, sans toucher à la taille des caractères ni au padding, de donner au texte la même couleur qu'au fond, à défaut de pouvoir écrire {color:transparent} qui serait pourtant l'idéal mais n'est pas compris par tous les navigateurs (là, c'est IE le maillon faible). Le jeu sur les couleurs marche naturellement très bien dans tous les navigateurs mais l'encombrement du texte ne change pas – et on ne peut pas lui imposer une largeur puisque c'est une boîte en ligne ( inline box ).

En résumé : cette troisième technique ne tient pas ses promesses et il a donc fallu, tadaaaam, inventer une quatrième technique.

Zazie dans le métro Raymond Queneau

C'est fou la quantité d'humanité qui tient dans un métro aux heures de pointe … Voilà le principe de la dernière technique que je n'ai empruntée à personne : tasser les lettres du texte dans un coin vide du motif de fond. Il y a une propriété CSS pour tasser les lettres : letter-spacing. Si la valeur en est positive, elle s'ajoute à l'espace déjà présent entre les lettres ; négative, elle s'en retranche et les lettres se rapprochent, jusqu'à finir par se superposer ou presque. On obtient une boulette de texte large comme un peu plus d'un caractère et donc plus facile à planquer que le texte normal.

Si l'on pousse la valeur négative assez loin, le texte peut aller jusqu'à s'écrire de droite à gauche ! Mais tous les navigateurs ne gèrent pas correctement un cas aussi pathologique, certains explosent bien avant d'en arriver à cette inversion du sens d'écriture, et des essais s'imposent. Voici le CSS que j'ai utilisé un temps pour les flèches du bandeau de pagination :

 .textNext, .textLast, .textPrevious, .textFirst {letter-spacing: -0.8ex; color: #f7efde;background-repeat: no-repeat;} a.textFirst,a.textPrevious {background-position:center right; padding-left :0} a.textNext, a.textLast {background-position:center left; padding-right:0} a.textFirst { padding-right:25px; margin-right:-5px; background-image: url([...]/nav16-First.gif) } a.textPrevious { padding-right:15px; margin-right:10px; background-image: url([...]/nav16-Previous.gif)} a.textNext { padding-left :18px; margin-left :10px; background-image: url([...]/nav16-Next.gif) } a.textLast { padding-left :25px; background-image: url([...]/nav16-Last.gif) }

La couleur du texte est bien sûr la même que celle du fond. Quant aux margin et padding gauche et droite, ils ont été trouvés, par ajustements successifs, pour que la boulette de texte soit rejetée dans une zone vide du fond sans empiéter sur le dessin des background-image. La valeur de ces margin et padding dépend donc étroitement de ce dessin.

Vous l'avez compris, mieux vaut réserver cette technique bricoloïdo-crapoteuse aux cas pénibles comme celui-ci…

Pousse-toi, tu bouches la vue Anonyme, cinéma

Celle-là est offerte par un commentateur et je m'en veux de n'y avoir pas pensé moi-même ! Elle utilise la propriété text-indent qui décale la première ligne d'un élément de type bloc. C'est à dire ? C'est à dire que, pour la plupart de mes paragraphes, on a text-indent:0 mais…

Mais que pour celui-ci, auquel j'ai ajouté style="text-indent : 10em", la première ligne est décalée de 10em vers la droite. Pour que vous compreniez bien, il faut maintenant que je baratine assez longtemps pour que le paragraphe compte au moins une ligne supplémentaire qui, elle, sera calée sur la marge de gauche tout comme les suivantes. Là, on se calme, il y en a assez.

Ça marche aussi avec des valeurs négatives. Ici j'ai ajouté style="text-indent : -2em" et la première ligne se décale de 2em vers la gauche. Attention, le paragraphe suivant commence comme celui-ci :

Ça marche aussi avec des valeurs négatives mais si on ajoute, en plus, un overflow bien choisi pour arriver à style="text-indent : -2em; overflow : hidden", ce qui dépasse du paragraphe est rogné.

Je vous laisse trouver la manière de mettre ça en œuvre, vous êtes grand. Faites attention tout de même : text-indent n'agit que sur des éléments de type bloc. Voici un span à fond gris et voici un autre span à fond gris avec text-indent:2em. Hé bien on n'observe aucun décalage…

À cette contrainte près, voilà une bonne technique simple à comprendre et à appliquer – enfin, je crois.

Chouchous