Un sommaire qui suit votre progression de lecture

SommaireArticle

Vous avez certainement parcouru le sommaire de cet article avant d’en commencer la lecture. Mais ce que vous n’avez sûrement pas encore remarqué, c’est le sommaire de la barre latérale qui s’affiche lorsque l’on commence à descendre un peu dans la page. Cette table des matières est un peu spéciale et c’est elle la star du jour puisqu’il s’agit du sujet de cet article.

Préambule

Sur le blog de Netmacom, nous publions régulièrement des articles et mettons tout en œuvre pour que la navigation au sein de ceux-ci soit agréable. Dans cette optique, nous avons récemment mis en place un sommaire pour les articles décomposés en plusieurs parties. Cela permet au lecteur de mieux comprendre la structure de l’article avant de se plonger dedans.

En outre, un premier sommaire est présenté en début de page dans le corps même de l’article. Cependant, cette table des matières n’est plus visible une fois que l’on commence à avancer dans la lecture du billet. Pour permettre au lecteur de se retrouver peu importe son avancée, nous avons donc mis en place un second sommaire situé dans la sidebar. Celui-ci suit le défilement de la barre de scroll et reste donc visible jusqu’à la fin de l’article.

Jusque-là, c’est du déjà vu et il n’y a rien de très original. De nombreux sites proposent des sommaires pour leurs articles ou leurs tutoriels. En revanche, la petite touche sympa que nous avons apportée se situe au niveau du sommaire latéral, qui en plus de donner de l’information sur la structure de l’article, indique également à l’internaute la progression de sa lecture.

Remarque : Cet article n’a pas pour but d’expliquer comment créer un sommaire en PHP sur un site ou blog. Pour se faire, vous pouvez toujours utiliser le plugin Table of Contents Plus, si vous utilisez le CMS WordPress. L’objectif de cet article est de rendre plus dynamique et interactif un sommaire préalablement créé.

Un sommaire progressif

Après réflexion, je n’ai pas trouvé mieux que “sommaire progressif” pour nommer cette fonctionnalité. Si vous avez des idées, je vous invite à soumettre vos propositions par commentaire.

Ce que j’appelle donc un sommaire progressif, ou graduel, est un sommaire qui me permet en un coup d’œil de connaître la partie que je suis en train de lire. Il permet de suivre le cheminement de la lecture. En gros, si je lis le 4e paragraphe d’un article structuré en 5 parties, le sommaire me permet de voir que j’approche de la conclusion.

Personnellement, je n’avais jamais vu une telle fonctionnalité autre-part, bien que le concept soit très intéressant. C’est d’ailleurs ce qui m’a poussé à rédiger cet article. Je partage donc avec vous une exclusivité Netmacom et je vous invite une fois de plus à intervenir via les commentaires si vous avez des exemples de sites qui utilisent un tel système.

Fonctionnement

La table des matières qui suit la lecture se base sur la partie visible de la page web à un instant t, un instant dans notre cas étant en fait un évènement de scroll. Le principe est donc de vérifier à chaque instant qu’un paragraphe est visible dans la fenêtre de lecture, et si c’est le cas, de mettre en avant le titre correspondant dans le sommaire latéral via un effet graphique.

Sur le blog de Netmacom, nous avons fait le choix de ne mettre en valeur que les titres h2. Je vais donc poursuivre les explications en ce sens et le code source fourni par la suite se limitera donc à cela. Toutefois, ajouter les titres de niveaux inférieurs n’est pas très complexe.

Schémas explicatifs

Pour mieux comprendre cette histoire de fenêtre de lecture, voici un exemple avec une page web composée de 3 titres h2 et de sous-titres h3. Sur les trois écrans ci-dessous sont imagés des cas de lecture différents. Le rectangle rouge représente la fenêtre de lecture, c’est-à-dire la partie visible de la page.

  1. Le paragraphe d’introduction est visible dans sa globalité et le second paragraphe l’est en partie. Pour ce scénario, il faut alors mettre en surbrillance les deux premiers titres. (1 et 2).
  2. Seul le second paragraphe est visible alors seul le second titre doit être mis en valeur. (2).
  3. La fin du second paragraphe et le début de la conclusion sont visibles. Ces deux titres doivent donc être mis en surbrillance. (2 et 3).

Le positionnement en pixels

L’élément qui va nous permettre de déterminer si oui ou non, au moins une partie d’un paragraphe est visible à l’écran est la position de celui-ci dans la page. Les exemples précédents l’illustrent bien. J’entends par position les valeurs de ses offsets haut et bas en pixels. Ces valeurs peuvent être récupérées en jQuery de la façon suivante :

Une fois que l’on connait l’étendue de l’affichage de chaque paragraphe, il ne reste plus qu’à vérifier pour chacun d’eux s’ils sont compris dans la fenêtre de lecture.

La structure du sommaire

Dans notre cas, le sommaire est structuré sous forme d’une liste à un seul niveau. Le style de chaque niveau du sommaire est géré via des classes dont les noms sont incrémentés. La classe .toc2 correspond aux titres h2, la classe .toc3 aux titres h3 et ainsi de suite… Pour créer un décalage entre les h2 et les h3, il suffit donc d’utiliser un padding-left sur les li.toc3.

Petite spécificité pour les titres h2, ils possèdent un span dont la valeur est le numéro du paragraphe. C’est ce span que l’on va customiser en fonction de la visibilité du paragraphe auquel il appartient. Sur Netmacom, les paragraphes visibles voient leur numéro virer au orange. Pour différencier chacun des spans, ils possèdent tous une classe numeroX, où X correspond au numéro du paragraphe. Un id aurait également pu être utilisé.

 

Code source

Le code suivant permet à chaque scroll de l’internaute de récupérer les positions de début et de fin des titres h2 de l’article. On aurait pu effectuer ce calcul au chargement de la page, car le refaire à chaque scroll peut ralentir les machines un peu lentes. Toutefois, recalculer à chaque fois ces positions possède l’avantage de rendre le script précis, même si la hauteur d’un paragraphe varie suite à une action d’expansion d’un élément par exemple.

Une fois l’étendue de chaque paragraphe calculée, on déplace le sommaire pour le placer en haut de la fenêtre de lecture. Dans cet exemple, le sommaire sera toujours situé 20 pixels en-dessous du haut de la fenêtre.

Pour finir, on parcourt les titres numérotés et on leur ajoute/retire la classe .current selon que le paragraphe correspondant est visible ou non. Vous l’aurez compris, le style à appliquer pour mettre en avant les titres visibles dans la fenêtre de lecture est à définir sur cette classe.

Remarque : Cet article utilisant lui-même un sommaire progressif, il se suffit en tant que démonstration. Pour voir le script intégré dans une page réelle, il vous suffit donc de regarder son code source.

Un effet “smoothy” sur les ancres

Un sommaire sur une page web fonctionne avec le système d’ancres. Une ancre est le terme situé après le caractère # dans une URL. Il permet au navigateur de descendre jusqu’à l’élément HTML possédant le même identifiant que l’ancre. Par défaut, le défilement effectué par les navigateurs est brut. Il est possible de rendre cet effet un peu plus sympathique en utilisant les jQuery Easing. Voici le code de l’effet que nous utilisons :

 

Faire évoluer le script

Intégrer les sous-titres

Comme indiqué un peu plus haut dans l’article, le script fourni n’utilise que les titres h2. Il est donc possible de faire évoluer le sommaire en prenant en compte un niveau plus fin de titres. Cela peut être intéressant si vos articles sont particulièrement longs et bien structurés.

Petit indice pour aller dans ce sens, il faut modifier le sélecteur jQuery pour qu’il prenne en compte les hn, et modifier la structure HTML afin de pouvoir récupérer chaque sous-titre de chaque paragraphe au niveau du DOM.

Calculer un ratio de visibilité

Une autre amélioration pourrait porter sur le type de mise en valeur des titres visibles. On pourrait imaginer accentuer la couleur du titre selon le taux de visibilité de son paragraphe. Par exemple, si un paragraphe P1 est visible entièrement, alors on met son titre en orange foncé. En revanche, si un paragraphe P2 n’est visible que de moitié, on met alors son titre en orange un peu plus clair. Pour ce faire, il faudrait calculer un ratio de visibilité, utilisant l’étendue de chaque paragraphe et la taille de la fenêtre de lecture.

 

Pour le reste, libre à vous d’ajouter les fonctionnalités que vous souhaitez, de créer votre structure HTML et surtout votre propre style d’affichage CSS. Des tas d’effets peuvent être mis en place afin de mettre en avant les paragraphes en cours de lecture.

Un sommaire qui suit votre progression de lecture, 4.7 out of 5 based on 7 ratings

Commentaires

#1
Loïc

Merci pour le tuto que vais prochainement mettre en pratique, comme dit sur veille-seo !

Le sommaire progressif est très agréable en terme d’expérience utilisateur, en plus il permet de combler de manière utile l’espace vide à coté du texte pour les articles un peu longs.

Même le changement de couleur du sommaire en fonction de l’endroit ou l’on se trouve qui me paraissait un peu superflu à première vue, est finalement pratique pour voir d’un coup d’oeil ou l’on en est.

#2
Nyco

Bonjour,

Articles très intéressant et bien expliqué.
C’est vraiment pratique pour la lecture, merci beaucoup :).

#3
Jérôme Fafchamps

Sympa comme idée :)

Un de ces jours, je vais le mettre en place..

#4
yann

Je viens de trouver un menu plutot pas mal et qui ressemble un peu à ce que tu propose :
http://www.themesandco.com/customizr/

J’essaye de le développer pour mon site sous WP, tu as des idées ?
merci !!! :)

Morgan Fabre

Bonsoir Yann,

Ce menu va même un peu plus loin. Il est vraiment pas mal. L’animation au changement de h2 est perfectible par contre, il n’y a pas de transition, c’est un peu brutal.

Pour ce qui est de l’intégration à WP, tu peux regarder du côté du plugin cité dans l’article, à savoir “Table of Content Plus”. Tu devrais pouvoir customiser son thème.

Pour ma part, j’ai utilisé un bout de code PHP trouvé sur le net que j’ai ensuite customisé, puis j’ai développé le JavaScript comme expliqué dans l’article.

Réagissez à cet article

Données obligatoires