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)