Partage
  • Partager sur Facebook
  • Partager sur Twitter

Numéroter les lignes d'un texte dans une page html

11 janvier 2014 à 15:31:17

Bonjour,

j'ai de nombreux textes sur mon site qui sont assez longs et j'aurais voulu afficher le numéro de chaque ligne (pour que le lecteur puisse la retrouver facilement).

Sur chaque page, l'intégralité du texte est écrit entre les balises p et j'utilise des br dans le cas des paragraphes. Pour les retours à la ligne, ils sont fait automatiquement par le navigateur.

exemple :

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut diam sed eros sollicitudin elementum ac sed mauris. Maecenas est sapien, interdum a semper sit amet, aliquet eget turpis. Donec nisi lectus, consectetur at vehicula sed, lobortis id mi. Sed at porta mi. Donec mollis posuere lectus, nec convallis eros feugiat vitae. Nullam euismod egestas velit, eu commodo nulla laoreet sollicitudin. Fusce pharetra consequat fringilla. Praesent feugiat cursus elementum. Sed pharetra elit sed velit rutrum condimentum. Sed tristique varius justo, varius pharetra ligula dapibus nec. Etiam fermentum purus vitae turpis porta blandit. Nullam cursus gravida nisi molestie semper.
</p>
et le visiteur verrait ça sur le site :

1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut diam sed eros sollicitudin
2 sollicitudin elementum ac sed mauris. Maecenas est sapien, interdum a semper sit amet,
2
3
...

Voici une page de mon site contenant un texte assez long dans laquelle j'aimerai afficher le numéro de ligne en marge :

http://www.tefandel.com/saison-1-episode-1-le-cargo-qu-il-vous-faut-!.html

Je n'ai trouvé aucune solution en cherchant sur le net.

Alors peut-être que ce n'est pas la bonne direction à prendre et qu'il y a de meilleures solutions pour que le lecteur puisse se repérer dans le texte. Je suis ouvert à toutes suggestions.

Merci

-
Edité par raspitef 11 janvier 2014 à 15:31:51

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2014 à 15:40:21

Hello,

Ce n'est que mon avis, à toi d'être en accord ou pas.

Perso je pense que numéroter les lignes serait une erreur, ton texte ressemblera à une liste , il sera moins lisible et se serait assez déroutant pour le lecteur.

Pourquoi ne pas décomposer le tout en chapitres, sous chapitres , introduction etc... comme le font la plupart des sites qui comportent beaucoup de texte. Ce serait plus naturel non?

Ainsi les titres, sous-titres seraient des liens (#ancres) qui faciliterait la navigation.

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2014 à 16:11:39

Salut,

effectivement, numéroter toutes les lignes sans exception serait un peu "too much". Je pensais n'indiquer le numéro que toutes les dix lignes (10, 20, 30, ...).

j'ai déjà pensé à décomposer les textes et utiliser des ancres mais cela ne correspond pas vraiment à ce dont j'ai besoin pour le moment. Par contre, je garde ça en tête pour plus tard car c'est utile si le visiteur interrompt sa lecture et y revient plus tard.

Le problème pour le visiteur (que je cherche à régler actuellement) se situe au moment de scroller la page vers le bas pour continuer la lecture et le but serait qu'il puisse repérer facilement sa ligne (l'endroit où il en était dans sa lecture).

J'explore d'autres pistes que la numérotation mais je n'ai rien trouvé de concret

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2014 à 16:42:16

Il y a de nombreuses  possibilités, sans JS, tu peux mettre un numéro type lien à certains endroits de ta page, et au clic du charge vers une #ancre pour que le texte se place au niveau voulu. C'est juste un exemple, avec du JS tu pourrais scroller la page lentement....

-> http://codepen.io/anon/pen/mBnAK

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2014 à 17:13:32

Salut,

et en css :

A chaque ligne que tu veux numéroter (ici ça crée un rond gris avec le chiffre en blanc :) ) tu attribues une class:

nav:before {counter-increment: nav;content: "" counter(nav) "";font-weight: bold;padding:15px 5px 5px 5px;color: #fff;font-size: 28px;float:left;margin:40px 0 0 -70px;display: inline-block;position: relative
;width: 2em;height: 1.6em;background: #ccc;border-radius: 50%;text-align:center;}

et tu déclares de remettre le compteur à zéro pour chaque page :

body{...;counter-reset: nav;}


Pour info, il y a un peu bug si t'as mis 1 système de pagination sur ta page car çà remet les compteurs à zéro pour chaque page...
Si je trouve une soluce pour ce dernier point, je le posterais ici....

Voilà c'est cadeau :)
@plus

  • Partager sur Facebook
  • Partager sur Twitter
11 janvier 2014 à 17:34:11

Merci beaucoup pour vos réponses et votre aide. Je vais tester ce que vous proposez et regarder ce que ça donne.

Là, j'étais resté sur mon idée de mettre un numéro toutes les dix lignes en l'incrémentant grâce à une boucle qui s'interromprait quand la hauteur totale de la page est atteinte. Mais bon, ça risque d'être assez lourd.

En tout cas, vous me donnez des idées pour la suite et je vous en remercie.

  • Partager sur Facebook
  • Partager sur Twitter
23 septembre 2018 à 15:51:56

-
Edité par jam83 23 septembre 2018 à 15:53:15

  • Partager sur Facebook
  • Partager sur Twitter
23 septembre 2018 à 20:42:37

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. Me contacter par MP si besoin.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)