Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
31 mai 2009 7 31 /05 /mai /2009 19:04

détail du 'Dragon' de Max Escher

Les infobulles sont un grand classique : on apprend assez vite à en faire avec l'attribut title, on en voit de plus jolies sur d'autres sites, on veut les mêmes chez soi. On se renseigne un peu, on trouve des réponses dans les forums ou ailleurs, on en conclut rapidement que c'est une cuisine à base de span, de position:absolute, de marges négatives voire de z-index et d' overflow. Un peu découragé, on conclut qu'on n'y pige que pouic et que si ça marche du premier coup il faut courir acheter un billet de loterie.

Voilà un début stimulant… Moi aussi j'ai ma recette à faire des bulles et je l'utilise dans ce blog. Je n'ai rien inventé du tout, juste picoré ailleurs et un peu ajusté quelques trucs mal fichus. Essayons de reconstruire cette recette ensemble. Vous verrez que ce n'est pas si mystérieux quand on s'y prend dans l'ordre, quand on pense  organisation de l'info  avant de penser  effet décoratif . Et mine de rien vous allez apprendre deux ou trois choses sur le CSS.

Note : tout ceci est parfaitement possible dès le niveau  Confiance  puisque c'est purement du CSS.


Le point de départ

Vous le connaissez peut-être :

 Voici <a href="...." title="qui vous enverra je ne sais où !">un lien</a> muni d'une infobulle. 
et il vous donne ceci :

Voici un lien muni d'une infobulle.

Clair, simple et facile : même pas besoin de plonger dans le code source puisque, dans l'éditeur de texte OB, l'outil d'ajout de liens permet de définir le title. La  bulle  ainsi fabriquée a l'aspect des info-bulles du système d'exploitation – très souvent un rectangle jaune bordé de noir. Ça permet au lecteur de tout de suite comprendre devant quoi il se trouve, or c'est important un lecteur, on l'oublie quelquefois…

Mais bon – auteur tyrannique, tu veux des infobulles comme ci ou comme ça. Soit. Avant d'aller plus loin regardons encore ce code source si simplet. Moi j'y vois plusieurs choses intéressantes :

  1. le texte d'information est voisin du texte principal ("un lien") plutôt que relégué dans une quelconque table de correspondance ou, pire, dans un fichier annexe (Javascript ou autre chose) ;
  2. non seulement il est voisin du texte principal mais il est inclus dans le lien : entre <a...> et </a> se trouve tout ce qu'il faut savoir sur le lien ;
  3. il n'y a aucun renseignement de présentation (couleur, police de caractères, etc.), seulement de l'information : le texte. Ce texte n'est mentionné qu'une seule fois, et signalé par un seul mot à peu près explicite : title ;
  4. enfin il n'y a pas besoin d'ajouter autre chose au lien : pas de balise spéciale a_with_info, pas de décomposition en quinze temps dans le genre de complement="info", infotype="bubble", infotext="qui vous enverra je ne sais où !"

Résumé : des modifications minimales et placées à l'endroit logique pour ça. Pas de gras, rien que du muscle. Résultat : on comprend ce qu'on lit, on sait tout de suite comment le modifier, on le modifie à coup sûr. J'aime.

La même chose sans attribut

Il n'y a, en CSS, aucun moyen de préciser ce qu'on fait de l'attribut title. En gardant à l'esprit les remarques précédentes (faire simple, concis, auto-contenu) ce qui se rapprocherait le plus de ce qui précède, du point de vue de l'organisation des informations, serait à peu près

 Voici <a href="..." >un lien <span>qui vous enverra je ne sais où !</span> </a> muni d'une infobulle. 

Inutile de couiner qu'on n'aura pas d'effet d'infobulle à l'affichage : je sais. Mais au moins le texte informatif est-il 1-dans le lien 2-bien distingué du reste, et c'est l'essentiel. Comme un span est un objet des plus banals, qu'il peut y en avoir d'autres dans le lien, il sera bon de donner à celui-ci une classe qui signale sa nature :

 Voici <a href="..." >un lien <span class="infotexte">qui vous enverra je ne sais où !</span> </a> muni d'une infobulle. 

Si vous employez déjà une classe nommée infotexte trouvez un autre nom.

Toujours rien de spécial à l'affichage, en voici d'ailleurs la preuve :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Et pourtant, avec ce balisage très rudimentaire, nous avons épuisé pour ce premier article la question des modifications HTML : à partir d'ici, et toujours pour ce premier article, tout est du CSS. Vous pouvez vous amuser à créer un article de test contenant exactement ce paragraphe, puis ensuite à compléter votre CSS étape par étape – c'est même une bonne idée.

Décoration

Commençons par le plus facile : donner à ce texte un aspect plus ou moins heureux. Par exemple :

 .infotexte {border:2px dashed red; color:blue; background:white} 

Résultat :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Le texte est-il assez en évidence ?

Distinguons-nous du tout-venant

Bien sûr ça cloche un peu. Je ne parle pas de l'esthétique (discutable…) mais de l'arrangement du texte : l'infobulle vient toujours s'inviter entre les mots un lien et  muni. Attendons encore un peu avant de traiter du survol du lien. Ce qu'on voudrait c'est que, au repos, le texte soit arrangé ainsi :

Voici un lien muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

et que l'infobulle vienne gracieusement se placer au-dessus quand on l'invite.

Comment ajouter l'infobulle sans bousculer tout le monde ? Une goutte de jargon : vous lisez le texte de haut en bas et de gauche à droite, vous parcourez des yeux un long serpentin de lettres et d'images, serpentin qui descend une marche d'escalier chaque fois qu'il atteint le bord droit ( Dinnnng , faisait la vieille Underwood fétiche d'Ernest Hemingway). Ce long serpentin, en termes de CSS, s'appelle le  flux  du texte. Le navigateur lit la page HTML, reconstitue ce flux un mot après l'autre, et le dispose au mieux dans l'écran.

En insérant le span d'infobulle vous ajoutez quelque chose dans le flux et vous modifiez donc ce flux. Mais où l'insérer ailleurs que dans le flux ?

Il y a une réponse à cette question, le positionnement absolu. En précisant position:absolute dans la définition de la classe

 .infotexte {border:2px dashed red; color:blue; background:white; position:absolute} 
le span  sort du flux  : le reste de la page fera comme s'il n'avait jamais été là, et donc  muni viendra s'écrire juste après un lien.

C'est un premier pas intéressant mais… où donc va le span ? Hé bien il ne bouge pas, il reste benoîtement à l'endroit où il se trouvait avant de se lancer dans la quête de l'absolu. Mais il y a du monde là, maintenant ? Très juste et il faut décider. La décision est : je m'assieds sur vous – en clair le span (avec son fond et sa bordure) s'écrit par-dessus le reste du texte. Autant vous montrer ce que ça donne :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

D'accord ce n'est pas au point, remarquez tout de même que le texte normal est maintenant disposé comme désiré (= comme s'il n'y avait pas d'infobulle).

Gardons notre quant-à-nous

Bon : voilà que l'infobulle plane au-dessus de la piétaille mais toujours à l'aplomb de son point d'amarrage initial. Comment allonger l'amarre ?

Le positionnement absolu sert souvent à envoyer un bout de texte à un endroit bien défini de la page mais ce n'est pas notre besoin : nous, on veut juste l'éloigner  un peu  de son point de départ. Un peu mais à une distance constante de ce point de départ : vous imaginez si les infobulles apparaissaient toutes au même endroit de la page ?

Cela s'obtient comme pour décaler  un peu  du texte normal : on ajoute ou retranche des marges. Supposons qu'on veuille l'infobulle placée plus bas que un lien, pour dégager la vue, mais qu'elle morde un petit peu sur ce même un lien, histoire de montrer le rapport entre les deux. Une façon de l'obtenir est

 .infotexte {border:2px dashed red; color:blue; background:white; position:absolute; margin-top:1em;margin-left:-1em} 

Application immédiate :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Bouge de là !

Nous y sommes presque : il ne reste plus qu'à sortir l'infobulle du champ lorsqu'on ne survole pas le lien.

Plusieurs techniques sont pensables pour un même résultat visuel (en jouant sur display ou visibility), la plus respectueuse en termes d'accessibilité est de jouer sur les marges pour envoyer l'infobulle très loin hors de l'écran.

Accessibilité ? Tout le monde n'a pas de bons yeux, tout le monde ne peut pas utiliser une souris (plâtrez-vous donc un bras, vous comprendrez). Il existe des moyens de navigation adaptés : synthèse de parole ou, tout bonnement, navigation au clavier. Je sais que mon blog n'est pas à citer en exemple sous ce rapport et ne donnerai donc aucune leçon là-dessus. Mais, puisque j'ai entendu parler d'une technique  accessible  et répondant au besoin du jour, je l'utilise et vous la propose. Ça fera toujours ça de moins à reprendre le jour où je saurai corriger mes lacunes – et, encore une fois, je sais qu'il y en a.

Nous disions donc… Pour que la bulle parte au diable Vauvert quand on ne survole pas le lien, c'est très simple :

 .infotexte {margin-left:-999em} 

Lecteur sataniste, tu peux utiliser -666em si ça t'amuse. Le résultat, naturellement :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Hi hi… l'infobulle se trouve maintenant très loin à gauche du bord gauche de l'écran. Tendez le bras dans le vide et palpez l'air, vous la sentirez peut-être. Et pour la faire revenir ? En français ça se dit  un infotexte placé dans un lien qu'on survole a une marge gauche de -1em . En CSS c'est tout comme :

 a:hover .infotexte {margin-left:-1em} 
ou, pour donner le CSS complet :
 .infotexte {border:2px dashed red; color:blue; background:white; position:absolute; margin-top:1em;margin-left:-999em} a:hover .infotexte {margin-left:-1em} 

Voilà le résultat, passez le curseur sur le lien :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Avant-dernière précaution

L'infobulle est dans le lien, l'aspect de son texte peut donc être influencé par celui du lien. Il sera prudent alors de préciser complètement, une fois pour toutes, ces propriétés dans le CSS  :

 .infotexte {border:2px dashed red; color:blue; background:white; font-weight:normal; font-style:normal;font-family:sans-serif; font-size:10px;line-height:normal; text-decoration:none; position:absolute; margin-top:1em;margin-left:-999em} a:hover .infotexte {margin-left:-1em} 

Si bien sûr vous préférez des infobulles en énormes lettres gothiques, en gras et en italique, libre à vous. Nous n'avons pas le mêmes goûts…

Dernière précaution

En l'état ça marche bien mais, dans un blog OB, vous risquez une surprise si le lien se trouve près d'un bord droit et que l'infobulle doive donc déborder à droite : elle ne débordera peut-être pas mais sera rognée,  massicotée  au ras du bord. Cela vient de ce que les blogs OB sont configurés par défaut pour qu'il en soit ainsi. Supposons qu'il s'agisse de bulles dans les articles et que, comme sur le blog que vous êtes en train de lire, les articles se trouvent dans la cellule cl_1_0. La correction en CSS est simple :

 #cl_1_0 {overflow:visible} 
et dès lors tout ce qui déborde des articles, de n'importe quel côté, se verra, et pas seulement les infobulles : si vous avez pris la mauvaise habitude de mettre des photos trop grandes en comptant sur ce rognage pour sauver les apparences, tant pis pour vous !

La suite

À ce stade l'infobulle est un simple rectangle à fond coloré. On n'a pas beaucoup progressé par rapport aux infobulles standard si ce n'est, tout de même, qu'on peut en changer la police de caractères, la couleur de fond et les bordures. Un prochain article examinera la manière d'embellir un peu tout ça.


commentaires

christina 20/09/2009 02:00

j'allais vous le dire, de rajouter le lien vers la suite, et hop entre temps c'est fait

Florence 04/06/2009 00:10

Vous, vous avez sûrement fait un stage à l'URSSAF

Bren du fat ! 04/06/2009 21:01


Non, mais comme tout bon Français j'ai été exposé à une de ces spécialités nationales que le monde nous envie : la prose administrative...


Florence 03/06/2009 23:35

Sorry... à la 2ème ligne, il fallait lire "contemplant"
Je crains que cette faute d'inattention ne me coûte mon stage...

AïmD 04/06/2009 00:07


Mmhhh...l'affaire est grave, en effet.
Vous me voyez forcé de transmettre votre dossier au sous-comité compétent de la commission idoine au sein du service approprié relevant de la direction souveraine, lequel sous-comité, contrôlé par
la commission encadrée par le service surveillé par la direction, se fera un devoir autant qu'un plaisir de l'examiner dans les meilleurs délais.
Veuillez agréer, Madame, etc. etc.


Florence 03/06/2009 23:21

C'est à propos du stage (voir + haut) ...

Concernant l'avis de mes parents : ma pauvre mère ne pourra me donner son avis qu'à la Toussaint, en contenplant mon prochain pot de chrysanthèmes...
Et mon père, bien sûr, dit qu'il ne faut pas parler aux étrangers

Mais voilà la vraie question : sommes-nous réellement des étrangers ? alors que je vous lis avec plus que de l'intérêt... j'ose même parler de plaisir

A propos d'étrangers ...
Il y a des années, lorsque j'habitais Cologne, un ami journaliste m'avait donné un auto-collant qui disait (en allemand - je traduis) : "Tous les hommes sont des étrangers... presque partout dans le monde".

:-))
F.

Malgré tout (en l'absence d'AïmD) 04/06/2009 00:02


Hé... le monde est plein d'étrangers, et cela depuis au moins la tour de Babel. C'est ce qui le rend si dangereux - cherchez l'erreur...


Axi 03/06/2009 14:21

Malheureusement non, je n'ai toujours pas la bulle en totalité.

Effectivement je ne vois pas de solution pure CSS. Il reste la possibilité d'utiliser javascript pour récupérer la taille de la fenêtre et ajuster le positionnement de la bulle en conséquence...

Les mêmes 03/06/2009 15:23


Du JS pour ça ? Bazooka contre les moustiques... et autres soucis en cascade (place de la pointe de la bulle, etc...)
Texte simplifié, cela suffit-il ? D'autres bulles à problèmes ?


Axi 03/06/2009 10:41

Très bon article encore une fois !

Mais comme d'hab je chipote (et te donne l'occasion d'étoffer la suite de ton article) : tes infobulles sur tes icônes de la rubrique Orientation sont très belles (j'adore l'effet philactère !), et elles débordent bien de leur conteneur, mais celles de droite débordent de la fenêtre de mon navigateur, provoquant l'affichage de l'ascenseur horizontal. Et bien sûr, quand je veux attraper cet ascenseur, il disparait avec l'infobulle...

Mais je suis sûr que tu as déjà la solution à ce problème !

AïmD ! supervisé par WvS 03/06/2009 14:10


Merci pour le mot gentil
Pour l'ascenseur horizontal : je vois très bien ce dont tu parles. Il n'y a pas de solution ménageant chèvre et chou, j'avais les choix suivants :
1- supprimer l'ascenseur horizontal en rognant ce qui déborde du blog. Pas très sympa pour le lecteur
2- élargir le blog (sa marge D) assez pour y inclure la bulle. Du coup ascenseur horizontal systématique sur les écrans un peu étroits et perplexité du lecteur : pourquoi cet ascenseur là où il n'y
a rien à voir (sauf si on survole un certain lien) ?
3-changer le texte de la bulle pour qu'elle ne déborde plus, ou un peu moins
4-déplacer la bulle vers la gauche
J'ai finalement décalé la bulle la plus saillante, celle du "signet", vers la gauche. Est-ce suffisant ?


Florence 01/06/2009 22:44

Vous prenez parfois des stagiaires ?

AïmD ! 02/06/2009 00:08


Hou ! Vous en avez parlé à vos parents ?


Florence 01/06/2009 17:59

"I am impressed" dit-elle en anglais pour souligner son admiration!
:-))

AïmD ! 01/06/2009 21:54


"Thanks", répondit Hemingway.
"Glps", fit-il en avalant cul-sec son dixième daïquiri de la soirée
:-)


Cln 01/06/2009 17:53

Y'a de la poésie, dans ce tuto là ! ^ ^

AïmD ! 01/06/2009 21:53


Héhé... il fallait bien ça pour faire passer la pilule ! Et puis, si ça peut aider à comprendre que le CSS manie des notions finalement très concrètes, pourquoi se priver ?


Archives