J’ai développé, pour Blog-Mode.info, un effet que je crois inédit en HTML : il s’agit de faire circuler le texte autour d’une image (en jargon typographique : « habiller l’image avec le texte »), cette image étant fixe dans la page, et le texte conservant ses possibilités de déplacement vertical (scroll).

Comme c’est assez difficile à décrire, autant aller voir à quoi cela ressemble sur cette page.

Tout se passe dans la partie en bas à droite de la page : on a un mannequin, qui se détache sur le fond vert, et le texte s’affiche en suivant les limites de l’image (et non, comme c’est habituellement le cas en HTML, suivant le rectangle du fichier image). Pour réaliser l’habillage, j’utilise le script pour SPIP que j’ai développé en mars 2006, qui fabrique automatiquement le code HTML à partir du fichier image. Ce script a, depuis, été transformé en plugin pour SPIP, et c’est cette version que j’utilise sur Blog-Mode (j’en ai profité, au passage, pour l’améliorer).

Mais, ici, ça n’est pas l’habillage irrégulier (développé en 2006) qui est original : c’est le fait que l’image est fixée en bas à droite de l’écran. Si on fait défiler le texte verticalement, l’image ne « bouge » pas à l’écran, et le texte se déplace en continuant à respecter la forme irrégulière de l’habillage.

Et ça, c’est à ma connaissance totalement inédit.

Commençons par créer le contenu et la structure de notre page.

La structure est très simple :
• un div #contenu contenant la partie qui nous intéresse ici (on pourra ajouter, évidemment, un #header, un #footer par ailleurs) ;
• un premer div #elastique qui, pour l’instant, ne sert à rien ;
• un div #image qui contient l’image que nous allons chercher à afficher en bas à droite de notre document ;
• un #pave_texte qui contient le texte du document (titre et texte libre).

Commençons par donner un style à ces différents éléments :

Quelques astuces sont à noter ici :
• je donne une couleur de fond à #elastique et #image, uniquement dans le but de visualiser mon effet ; dans la version finale, on supprimera évidemment ces couleurs ;
• body colle directement aux bords de la fenêtre, avec margin et padding à zéro ;
• c’est #contenu qui va servir, ici, de fenêtre défilante : on lui donne une hauteur de 100% et un overflow automatique ; il occupe ainsi toute la fenêtre ;
• très important : #elastique et #image sont en float right, ce qui force leur affichage à droite de la fenêtre et oblige le texte à les habiller ; l’astuce ici est d’indiquer, pour #image, un clear right, qui permet d’obtenir l’effet suivant : #image est bien un élément flottant à droite, mais il se positionne sous l’élément flottant précédent (#elastique).

Notez bien : le clear right est à l’intérieur du style de #image, et pas dans un div qui le précéderait. Tout est dans cette séquence de #image :

C’est le présence du clear et du float dans le même style qui permet d’avoir cet habillage qui concerne plusieurs float à la suite (le texte qui suit habille à la fois #elastique et #image, qui ont pourtant des largeurs différentes).

On constate ici que :
• l’élément bleu, #elastique, a pour l’instant une hauteur fixée de 150 pixels ;
• l’élément rouge, #image, chasse bien le texte, et commence à 150 pixels du haut de la fenêtre.

Que se passe-t-il si l’on fait varier la hauteur du pavé bleu (#elastique) ? On aurait l’#image qui se décalerait vers le haut ou vers le bas, et le texte l’habillerait à sa nouvelle position.

Et si l’on calcule correctement la hauteur du pavé bleu, on peut décider de positionner, au pixel près, le pavé rouge pour qu’il s’affiche en bas à droite de la fenêtre.

Nous allons donc ajouter du jQuery pour calculer et modifier la hauteur de #elastique.

Et voilà : l’image se positionne en bas à droite de la fenêtre, parce qu’elle est repoussée par le pavé bleu dont la hauteur est calculée en javascript :

La hauteur de l’élastique, c’est tout simplement : la hauteur de la fenêtre moins la hauteur de l’image.

On obtient là le bon affichage au chargement de l’écran. Mais en revanche, ça ne fonctionne pas quand on scrolle...

Modifions donc notre code :

Désormais, on demande de recalculer la hauteur du pavé bleu à chaque fois qu’on détecte que le contenu a été scrollé (c’est la fonction « scroll » de jQuery qui permet de redéclencher le calcul hauteur_elastique()).

Et, dans le calcul de la hauteur de l’élastique (jusqu’à présent égale à la hauteur de la fenêtre moins la hauteur de l’image), on ajoute la position du scroll de la fenêtre. Si on a scrollé de 100 pixels (le « haut » du pavé de texte se situe donc 100 pixels au-dessus du début de la fenêtre), il faut bien descendre l’image de 100 pixels supplémentaires.

Que se passe-t-il si la hauteur de la fenêtre est inférieure à la hauteur de l’image (ce qui arrive assez souvent si l’image est grande, comme sur Blog-Mode) ? On obtient une hauteur de l’élément #elastique négative ; et on ne doit évidemment pas créer d’élément de hauteur inférieure à zéro ou nulle.

On complète donc par un petit test :

Si la hauteur calculée pour l’élément #elastique est inférieure à 1 pixel, on se contente de cacher l’élément. Sinon on l’affiche et on applique sa nouvelle hauteur.

On a maintenant l’affichage correct au chargement de la page, puis lorsqu’on scroll le texte. Il reste un élément à corriger : quand on redimensionne la page. Il nous suffit de redéclencher le calcul de la hauteur #elastique quand on détecte l’événement $(window).resize(). Notre code devient :

Voilà, le gros du travail est fait, avec un principe très simple et du code javascript/jquery tout aussi simple. Des codeurs avancés pourront certainement rendre le code javascript beaucoup plus compacte, mais j’aime bien conserver un code très simple et très lisible.

Il reste cependant une difficulté à résoudre : à moins de consulter cette page avec Safari ou Chrome, on a un effet de sautillement très disgracieux lors du scroll.

La solution que j’applique : je n’affiche pas l’image directement dans le pavé #image, mais en background du pavé qui contient l’ensemble de la page. Le pavé #image se contente alors de créer l’espace (de hauteur et de la largeur identiques à l’image) pour l’habillage du texte.

On rencontre alors une seconde difficulté : on ne peut pas appliquer l’image en background de #contenu, parce que cet élément est scrollable. Et Internet Explorer se comporte alors d’une façon spécifique : le background se déplace avec le contenu complet de la page et non dans la partie réellement affichable du pavé.

Je fabrique donc, uniquement dans le but de positionner correctement l’image en bas à droite, un pavé supplémentaire (#contenu_image qui contient #contenu).

Mon code est désormais complet :

En pratique, j’ai encore quelques modifications : la hauteur de #contenu_image n’est pas de 100% de mon écran (je veux afficher un footer et un header), et les solutions purement CSS ne fonctionnent pas avec Internet Explorer 6 (alors que la bidouille Javascript, elle, est totalement compatible, je ne vais donc pas me fâcher avec MSIE 6 juste parce que je dois calculer la hauteur d’un pavé).

J’ajoute donc un petit morceau de script qui calcule la hauteur réelle de #contenu_image en fonction de la hauteur de la fenêtre.

Sous Internet Explorer, la barre de scroll verticale de la fenêtre complète ne disparaît pas : elle est seulement désactivée, et la scrollbar de #contenu apparaît « à l’intérieur » au lieu de bien se positionner à sa place. J’ajoute donc un élément de style pour la compatibilité avec IE 6 et IE 7 :

Attention à n’insérer ce genre de bidouille que tout à la fin de vos développements : en effet, il ne faut surtout pas utiliser ce genre de choses pour masquer des éléments « qui dépassent » de votre page — ces éléments devraient être corrigés proprement dans vos feuilles de style —, mais simplement pour ne pas afficher les scrollbar désactivées. Le overflow hidden du body doit jamais servir à masquer la misère d’un code mal fichu (ici, il s’agit seulement de masquer des scrollbar qui sont déjà inactives).

Je passe dans SPIP

Il nous reste à réaliser l’habillage irrégulier. Pour cela, il suffit de supprimer le pavé #image et de le remplacer par la série de div calculés par le filtre image_ragged de SPIP.

Je prends le logo de mon article, je force sa hauteur à 300 pixels, et là-dessus je demande à SPIP de me fabriquer les éléments flottants très fins qui permettent l’habillage irrégulier. Chacun de ces éléments flottants contient (comme pour le #image initial) la séquence clear right et float right (attention à ne pas installer le logo passé par image_ragged à l’intérieur d’un grand pavé tel que #image : sinon on casserait la séquence d’éléments flottants).

Comme j’ai décidé de placer l’image en fond de #contenu_image, je ne dois logiquement pas la réafficher ici, et ne conserver que les div qui fabriquent la forme irrégulière. Or, image_ragged place l’image en fond (background) de chacun des div qu’il fabrique. Le filtre |replace{url(.*),rien.gif} me permet donc de remplacer les images en fond par l’image vide par défaut de SPIP.

Je dois finalement modifier légèrement mon javascript : dans hauteur_elastique, je ne peux plus demander de retirer $("#image").height() à la hauteur de la fenêtre, puisqu’il n’y a plus de pavé #image. Comme j’ai décidé de forcer la hauteur de mon image à 300 pixels, inutile de faire faire le calcul par jQuery, je peux directement indiquer la valeur de mon choix : ici 320 (parce qu’image_ragged ajoute un bloc de 20 pixels en haut de l’image, pour éviter que le texte ne vienne se superposer sur le haut de l’image) :

Inconvénients

Il y a deux principaux inconvénients liés à cette méthode.

• Le premier est un problème de lisibilité du texte ; la largeur de chaque ligne de texte qui habille l’image change lorsqu’on scrolle (puisque l’image habillée, elle, ne se déplace pas). On a donc, pendant le scroll, des mots qui changent de ligne en permanence, et c’est très difficile à lire.

Pour limiter les dégâts : n’appliquer l’effet que sur des textes courts et avec des paragraphes pas trop longs (les changements de paragraphes sont plus faciles à retrouver quand la mise en page a changé lors du scroll).

• Vous ne pouvez utiliser aucun élément de type float dans le texte. Même pas des float left. La séquence float right, clear right rejette en effet tous les float en dehors de la page, y compris les éléments flottant à gauche. Pas d’images flottantes, donc, dans le corps de votre article.