Cela faisait quelque temps que je me promettais de tester
The Box Office, c'est chose faite - non sans mal, d'ailleurs. Il s'agit d'un outil en ligne, qui permet aux webmasters de générer un ensemble de div transparentes qui seront superposées à une image, de manière à ce que le texte épouse les contours de l'image au lieu de buter sur sa bordure rectiligne. Euh... je rame un peu pour expliquer le principe, mais je compte sur l'illustration de ce billet pour le rendre intelligible, ainsi que sur
la démo du générateur. Jetons un oeil dans la coulisse pour mettre à jour les ressorts de l'illusion. D'abord, l'image est placée en arrière-plan d'une DIV, à gauche ou à droite. Sur cette image, on dispose en surimpression une série de DIV transparentes de longueurs variables, mais de hauteur constante, égale à la hauteur de l'interligne choisie pour le texte. Ces DIV, toutes
floatées à gauche (ou à droite), vont jouer le rôle de cales, contre lesquelles le texte viendra buter.
Toute l'astuce consiste à calculer précisément la longueur à assigner aux DIV pour que le texte épouse au plus près les contours de l'image. On peut certes le faire manuellement, mais c'est plutôt fastidieux, car il faut alors tâtonner, ajuster les DIV les unes par rapport aux autres et au texte...
The Box Office va nous épargner cette tâche, en calculant automatiquement la longueur des segments et en générant le code correspondant. Procédez ainsi : entrez l'URL de l'image à "bordurer" (
*.jpg uniquement, hélas), puis saisissez le code hexadécimal de la couleur de fond de l'image (sans le #) : c'est elle que le texte viendra recouvrir. Si le résultat vous convient, récupérez le code par copier-coller du source, mais sachez qu'il faudra l'adapter - reportez-vous au source de ce billet pour voir les modifications nécessaires.