Le but est d'avoir une jolie bibliographie sur ma page professionnelle qui reprend les us scientifiques, ça doit ressembler à ça :

[ABCD08]  Titre de l'article
          Noms des auteurs
          Références exacte de l'article
          Liens, etc.

[CDE07]   Titre de l'article
          Noms des auteurs
          Références exacte de l'article
          Liens, etc.

[Celui07] Titre de l'article
          Noms des auteurs
          Références exacte de l'article
          Liens, etc.

J'ai voulu faire ça bien, genre je suis un gourou du web sémantique, xhtml et CSS. Seulement, ce n'est pas mon rayon, l'informatique théorique est assez éloignée des bonnes pratiques du web.

Voila à quoi ressemble[1] mon code HTML :

<ol class="publications">
    <li id="ABCD08">
          Titre<br />
          Auteurs<br />
          Références<br />
          Autre
    </li>
    <li id="CDE07">
          Titre<br />
          Celui et al.<br />
          Références<br />
          Autre
    </li>
    <li id="Celui07">
          Titre<br />
          Celui<br />
          Références<br />
          Autre
     </li>
</ol>

Puisque j'ai besoin d'utiliser des attributs id pour faire des ancres, autant utiliser les ids des papiers, après tout, ils sont fait pour ça.[2] Et puisque j'ai les id, pas la peine de les réécrire.

Donc à ce point là, je me suis dit : Chouette, il suffit d'utiliser l'attribut id comme "bullet" pour mes items de liste, et c'est gagné. En plus, c'est le navigateur qui va gérer la "tabulation" comme il le fait pour les numérotations, ça va être trop simple.

Sauf que je n'ai pas trouvé comment faire,[3] et c'est là que commence le vilain hack CSS. Bon ça marche, mais si quelqu'un sait faire mieux, je suis preneur.

L'idée est de générer l'id de l'article et le placer grace au pseudo-element :before. Seulement celui-ci fait parti intégrante de <li> et n'est donc pas facilement manipulable. C'est pourquoi j'utilise pour lui display: block ce qui a pour conséquence de lui donner une ligne rien que pour lui. On place tout ce beau monde en jouant sur les marges négatives.

Voici mon code CSS :

.publications {
   list-style-type: none;
   line-height: 2.5ex;
   padding: 0; 
   margin: 0;
}
.publications > li:before {
   display: block;
   width: 8em;
   margin-left: -8em;
   margin-bottom: -2.5ex;
   content: "[" attr(id) "]";
}
.publications > li {
   padding-left: 8em;
}

Moralité : ce serait bien de pouvoir faire quelque chose du genre

list-style-text: child.attr(id);

(ou que j'apprenne mieux le CSS)

Notes

[1] j'ai simplifié ce qu'il y a dans les <li>

[2] L'attribut id ne peut pas commencer par [

[3] Sur A List Apart il y a une astuce pour faire ça si le texte du "bullet" a une longueur fixe, ce qui n'est pas mon cas