Reprise de numérotation par compteur CSS

**lolotibo35** · 22/02/2019, 16h17

Bonjour,

Je travaille actuellement sur un consulteur de données HTML5 (générées dynamiquement par XSL-T à partir de données XML).
Bien sûr la présentation de ces pages HTML est faite via CSS3.

Voici mon problème :
J'ai un type de document avec une structure arborescente numérotée.
La numérotation de ces éléments est faite grâce aux compteurs CSS.
Dans un cas précis (condition exclusive), on me demande de reprendre la numérotation, telle qu'elle était au niveau supérieur, en ignorant l'incrémentation qui a pu être faite entre temps.
Un exemple valant mieux qu'un long discours, voici ce dont j'ai besoin :

1. paragraphe 1
2. paragraphe 2

* SI bla bla bla

3. paragraphe 3

4. paragraphe 4

* SINON

3. paragraphe 5

4. paragraphe 6

5. paragraphe 7

Voici un extrait simplifié de mon code HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="procedure">
    <p class="action">paragraphe 1</p>
    <p class="action">paragraphe 2</p>
    <section class="exclusiveConditions">
        <section class="condition">
            <p class="cond">SI bla bla bla</p>
            <p class="action">paragraphe 3</p>
            <p class="action">paragraphe 4</p>
        </section>
        <section class="condition">
            <p class="cond">SINON</p>
            <p class="action">paragraphe 5</p>
            <p class="action">paragraphe 6</p>
            <p class="action">paragraphe 7</p>
        </section>
    </section>
</section>

Voici un extrait simplifié de mon code CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.procedure {
    counter-reset: compt1 0;
}
 
.action::before {
    content: counter(compt1) '. ';
}
 
.action {
    counter-increment: compt1;
}
 
.exclusiveConditions {
    margin-left: 2em;
}
 
.condition {
    margin-top: 2em;
}
 
.cond::before {
    content: '* ';
}

Mais en l'état actuel, il n'y a pas de reprise de numérotation après le "SINON", et les paragraphes 5, 6, et 7 qui doivent être numérotés 3, 4, et 5, sont numérotés 5, 6, et 7.
Il est évidemment possible de réinitialiser le compteur à 2 sur les conditions comme ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.condition {
    margin-top: 2em;
    counter-reset: compt1 2;
}

Mais je ne connais pas à priori le nombre de paragraphes numérotés avant les conditions exclusives ...
Autrement dit la réinitialisation à "2" est une inconnue.

Donc voilà ma question : quelqu'un voit-il une solution "pure CSS" (sans passer par du Javascript) ?
J'ai bien tenté quelque chose en utilisant les propriétés personnalisées CSS" (variables), mais sans succès.

Merci d'avance pour votre aide,
Lolo

**psychadelic** · 23/02/2019, 15h00

J ne crois pas que ce probleme puisse se régler uniquement en css.

par contre tu peux "peut-être" t'écrire cette "feature" en écrivant un wrapper css.

Invité · 23/02/2019, 15h25

Bonjour,

Une autre solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.procedure {
    counter-reset: compt1 0;
}
 
.procedure > .action {
    counter-increment: compt1;
}
.procedure > .action::before {
    content: counter(compt1) '. ';
}
 
.procedure > .exclusiveConditions {
    counter-reset: compt2 0;
    margin-left: 2em;
}
.condition {
    margin-top: 2em;
}
.procedure .exclusiveConditions .condition {
    counter-reset: compt2 0;
}
.procedure .exclusiveConditions .condition .action {
    counter-increment: compt2;
}
.procedure .exclusiveConditions .condition .action::before {
    content: counter(compt1) '-'counter(compt2) '. ';
}
 
.cond::before {
    content: '* ';
}

**lolotibo35** · 25/02/2019, 13h59

Bonjour et tout d'abord merci de vous être penchés sur mon cas.

Psychadelic, je ne comprends pas ce que tu entends par un wrapper CSS.
J'ai fait une recherche sur le web et je ne vois pas comment cela peut m'aider.

Jreaux62, ta solution ne fonctionne pas : ça donne 2-1, 2-2, ... au lieu de 3, 4, ...
J'avais bien pensé, moi aussi à introduire un second compteur et à l'additionner au premier, mais impossible de combiner la fonction calc() et les compteurs CSS.

Invité · 25/02/2019, 14h17

C'est pour ça que je parle d'"Une autre solution".
Et elle fonctionne très bien.

Ta numérotation n'est pas logique.

**psychadelic** · 25/02/2019, 14h51

un wrapper c'est comme un polyfill sauf que c'est un code qui n'est pensé que pour ton site.

et je pense aussi (comme jreaux62) que ta numérotation n'est pas logique.
je pense aussi que tu devrai utiliser des listes plutôt que des paragraphes, question de respect de balise et d'emploi correct des styles css,
sans négliger le fait que les listes savent gérer seules des compteurs

**lolotibo35** · 25/02/2019, 15h37

Malheureusement, ce n'est pas la mienne et ce n'est pas moi qui décide ! Je vous avoue que je m'en passerais volontiers.
Et c'est bien cette numérotation étrange qui m'est demandée par un organisme aéronautique militaire, sur la base d'une norme internationale.
Donc ce n'est pas une autre solution, mais une autre proposition de présentation, que je ne peux hélas pas utiliser.

Et dans son contexte, cette numérotation est logique.
Il faut lire les lignes dans l'ordre numérique, en prenant les bonnes directions aux "carrefours" des conditions.
Si on passe dans le "si" il faut faire comme si le "sinon" n'existait pas, et vice-versa, d'où la reprise de numérotation.

Je connais bien la multi-numérotation pour l'avoir déjà utilisée, mais vous l'aurez compris, elle ne s'adapte pas à mes besoins.
Comme je le disais aussi, j'ai énormément simplifié le code pour le forum, et il s'agit bien à l'origine de paragraphes assez complexes, pas de listes.
Et non, j'ai bien sûr essayé, la fonction calc() ne fonctionne pas avec la valeur d'un compteur.

Bref, je n'ai pas le choix, je vais passer par du Javascript !

Merci quand même pour votre aide, et bonne fin de journée à tous.

Invité · 25/02/2019, 15h49

Je pense aussi que ta structure HTML n'est pas logique.

Celle-ci me semble plus logique :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section class="procedure">
  <div>
    <div>
      <p>paragraphe 1</p>
      <p>paragraphe 2</p>
    </div>
  </div>
  <div>
    <div>
      <span>SI ...</span>
      <p>paragraphe 3-a</p>
      <p>paragraphe 4-a</p>
    </div>
    <div>
      <span>SINON</span>
      <p>paragraphe 3-b</p>
      <p>paragraphe 4-b</p>
      <p>paragraphe 5-b</p>
    </div>
  </div>
  <div>
    <div>
      <p>paragraphe 6</p>
      <p>paragraphe 7</p>
    </div>
  </div>
</section>

Cela dit, à vouloir TROP simplifier, on peut "oublier" des cas de figure.

1- Que ce passe-t-il par exemple dans le cas :

SI...
SINON SI...
SINON SI...
SINON

?

2- Peut-on aussi avoir des conditions IMBRIQUÉES dans d'autres conditions ??

SI...
- SI...
- SINON
SINON

**lolotibo35** · 25/02/2019, 17h12

Désolé, je ne choisis pas la structure HTML non plus.
Mais de toute façon, le problème n'est pas là.
Tu peux changer la structure comme tu veux, le dilemme de numérotation "exotique" demeure.

Pour répondre à tes questions, le cas 1 n'est pas prévu par la norme, le cas 2 est possible et bien sûr complexifie le bazar

C'est pour ça que je n'ai donné qu'un exemple simple, je n'ai pas "oublié".
Si quelqu'un avait trouvé une solution, j'aurai ensuite extrapolé.

Invité · 25/02/2019, 17h25

En CSS, ce ne sera pas possible.

Car il faut pouvoir :

"mémoriser" le compteur à chaque niveau,
revenir à la numérotation "normale" une fois les "conditions" passées,
incrémenter le compteur d'un niveau en tenant compte de la valeur MAX du compteur de sous-niveau,
...

Donc :

soit en amont, en PHP (sauf que, apparemment, tu n'as pas "la main" sur le code à ce niveau là)
soit en aval, en JavaScript, au moment de l'affichage

**lolotibo35** · 25/02/2019, 17h28

Je te remercie. Comme je disais, je suis parti sur la solution Javascript.

**psychadelic** · 25/02/2019, 19h29

Bon, j'ai essayé plusieurs trucs avec un polyfill css, mais il y a "quelques" problèmes et je suis de moins en certain que cela soit possible avec.

du coup, et puisque qu'on à maintenant droit à du JS voici la solution la plus simple (amha)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Nuérotation incongrue</title>
  <style>
    section { margin-left: 20px }
    section.procedure {
      --section2_cpt: 30;
      counter-reset: compt1 0;
      counter-reset: compt2 0;
    }
    section.procedure > .action { counter-increment: compt1; }
    section.procedure > .action::before {  content: counter(compt1) '. '; }
 
    section.condition { counter-reset: compt2 var(--section2_cpt) }
 
    section.condition > p.action { counter-increment: compt2 }
    section.condition > p.action::before {  content: counter(compt2) '. '; }
  </style>
</head>
<body>
  <section class="procedure">
    <p class="action">paragraphe 1</p>
    <p class="action">paragraphe 2 </p>
    <section class="exclusiveConditions">
        <section class="condition">
            <p class="cond">SI bla bla bla</p>
            <p class="action">paragraphe 3</p>
            <p class="action">paragraphe 4</p>
        </section>
        <section class="condition">
            <p class="cond">SINON</p>
            <p class="action">paragraphe 5</p>
            <p class="action">paragraphe 6</p>
            <p class="action">paragraphe 7</p>
        </section>
    </section>
  </section>
 
  <script>
    const
      GrpSecProc = document.querySelector('section.procedure'),
      firstAction_Nbre = document.querySelectorAll('section.procedure > p').length
    ;
    GrpSecProc.style.setProperty('--section2_cpt', firstAction_Nbre);
  </script>
</body>
</html>

franchement : 4 lignes de JavaScript et une simple utilisation de variable css, ça devrait le faire non ?

**lolotibo35** · 26/02/2019, 09h21

Oui ça devrait le faire, mais ça prendra plus de 4 lignes et quelques noeuds au cerveau.
Car il faut gérer les imbrications, les changements de compteurs ...
Eh oui, j'ai simplifié pour le forum. Mais en fait, j'ai d'autres règles tordues, avec des conditions indépendantes, des conditions exclusives, certaines qui continuent la numérotation, certaines qui la changent, avec reprise de numérotation ou pas.

Bref, je ne vais pas vous embêter plus longtemps avec tout ça, merci de votre aide, je devrais y arriver avec du script, je voulais seulement savoir si je pouvais faire plus simple avec uniquement du CSS.
Bonne journée.

**psychadelic** · 26/02/2019, 16h36

Envoyé par lolotibo35

Car il faut gérer les imbrications, les changements de compteurs ...

je trouve pas trop, apres c'est juste une question de parcours d'arbre (les algorithmes son connus) ou il faut juste réaffecter un nouveau compteur via une variable css modifiée en js comme je te l'ai montré, et bien sur préparer une panoplie large dans le code css, tout dépends du nombre de sous-niveaux anisi que du nombre de reprises par remontées de niveaux possibles, sinon il ya peut-être moyen des générer cette partie css à la volée (une fois la page affichée), faudrait que je teste pour voir...

**lolotibo35** · 26/02/2019, 17h08

Envoyé par psychadelic

apres c'est juste ... il faut juste ...

Fais-moi confiance, c'est bien plus complexe en réalité.
Je dois suivre une spec. de 20 pages, rien que pour la numérotation et l'indentation.
Le HTML est généré par XSL-T à partir d'un fonds XML, dans une structure vraiment pas optimisée.
Il faut prendre en compte un filtrage dynamique.
...
Mais j'y arriverai !

**psychadelic** · 26/02/2019, 17h49

de toutes façons, ce système de numérotation m'a semble délirant dès le départ.

Si c'est si tordu que ça, à ta place j'abandonnerai l'ides de régler ça en css avec des counter-reset / counter-increment et des ::before .
il faut mieux générer en un insert de <span> avec la valeur du compteur sur les élément ayant besoin d'être numérotés.
je te ferai un exemple en fin de journée..

**lolotibo35** · 26/02/2019, 17h59

C'est gentil, mais ne perds pas ton temps, je ne suis pas loin de la solution.

On utilise les compteurs CSS, car ils permettent une re-numérotation lors d'un filtrage dynamique, sans utilisation de Javascript.
Ca fonctionnait très bien avant qu'on me demande de traiter ce type de document farfelu.
Je continue donc avec les compteurs CSS par souci d'homogénéité, et pour ne pas tout refaire.

**psychadelic** · 26/02/2019, 20h12

comme tu voudra...
mais jette un oeil la dessus : http://mcgivery.com/htmlelement-pseu...in-javascript/

**psychadelic** · 27/02/2019, 00h10

Bon, je l'ai fait quand même, pour 2 raisons :
1) quand j'ai un truc en tête et que j'ai un sentiment d'inachevé...
2) parce que j'ai l’impression que tu n'a pas saisi l'idée (avec les <span>) proposée précédemment : elle ne demande aucun changement sur les traitements xml existants.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Zarbi 2</title>
  <style>
    section { margin-left: 20px }
    p.action > span { display: inline-block; width: 15px; padding-right: 3px; text-align: right; color:red; font-weight: bold;}
  </style>
</head>
<body>
  <section class="procedure">
    <p class="action">paragraphe 1</p>
    <p class="action">paragraphe 2 </p>
    <section class="exclusiveConditions">
        <section class="condition">
            <p class="cond">SI bla bla bla</p>
            <p class="action">paragraphe 3</p>
            <p class="action">paragraphe 4</p>
        </section>
        <section class="condition">
            <p class="cond">SINON</p>
            <p class="action">paragraphe 5</p>
            <p class="action">paragraphe 6</p>
            <p class="action">paragraphe 7</p>
        </section>
    </section>
  </section>
 
  <script>
    const GrpSecProc = document.querySelector('section.procedure');
    var compteurNiv = [];
    compteurNiv[0] = 0;
 
    GrpSecProc.childNodes.forEach( child_n0=>{
      switch(child_n0.tagName){
        case 'P':
          check_add_SPAN_f(child_n0,0);
        break;
        case 'SECTION':
          child_n0.childNodes.forEach( child_n1=>{
            if (child_n1.tagName==='SECTION'
            && child_n1.classList.contains('condition')
            ){
              compteurNiv[1] = compteurNiv[0];
 
              child_n1.childNodes.forEach( child_n2=>{
                if (child_n2.tagName==='P') {
                  check_add_SPAN_f(child_n2,1);
                }
              });
            }
          }); 
        break;
      };
    });
 
    function check_add_SPAN_f(node,niv)
    {
      if ( node.classList.contains('action') ) {
        let xSP = document.createElement('span');
        xSP.textContent = ++compteurNiv[niv]+ '. ';
        node.insertAdjacentElement('afterbegin', xSP );
      }
    }
  </script>
</body>
</html>

Il y a certainement un moyen de faire une procédure récursive (pour parcourir ton arborescence) mais le principe est la et peut sans doute mieux s'adapter à ton problème (vs utilisation des compteurs css)

**lolotibo35** · 01/03/2019, 17h00

De retour sur les ondes ...

Ta solution peut fonctionner, mais je n'aime pas trop la numérotation <span>, question de goût.

Par contre j'aime bien le principe de ton lien permettant de travailler sur les pseudo-elements.
Je vais peut-être l'en inspirer.

Merci encore !

Reprise de numérotation par compteur CSS

CSS

Discussions similaires

Partager

Partager