Cette partie de la méthode pour monter un site web scientifique se focalise sur la préparation des documents pour la publication sous forme de pages web, dans une démarche de vulgarisation.
Les spécificités du web, dont l’absence de pagination en HTML d’une part, et l’existence des URL de fragment d’autre part, nécessitent de définir un maillage fin permettant aux visiteurs de repérer rapidement et partager simplement tout élément du contenu à l’aide d’adresses expressives, sans rendre problématique la mise à jour du document.
Adressage de fragments
Il existe deux systèmes, plus complémentaires que concurrents, pour adresser les fragments du contenu textuel : les liens d’intertitres et les liens d’alinéas. Autant les premiers sont courants, autant les seconds peuvent surprendre. C’est pourtant eux qu’il faut considérer en premiers, car c’est de leur disponibilité que dépendra en partie la conception (fréquence, nombre de niveaux) des intertitres.
Adresses d’alinéas
Les alinéas peuvent porter un identifiant composé des premiers mots, mais tout porte à penser que cette option n’avait encore jamais été considérée. Selon les informations revues, les alinéas ont toujours été identifiés par un numéro.
Adresses numériques
Les avantages sont la stabilité et l’intuitivité. Curieusement cette option ne semble pas avoir été envisagée. Au niveau de l’alinéa, les idées tournent traditionnellement autour des identifiants numériques incrémentés. Pas comme en Basic, où les lignes étaient manuellement numérotées par sauts de dix, mais automatiquement, au risque de casser les liens en aval en cas d’ajout, suppression, scission ou fusion d’alinéas.
Usage historique
Si la page est stable et figée, la numérotation des paragraphes telle qu’introduite par Douglas Engelbart dès les débuts sous le nom de « purple numbers » – inventé par sa fille – est une option.
Usage actuel
On peut la voir en action sur la version HTML de « Magic Ink » de Bret Victor.Bret Victor, Magic Ink. Information Software and the Graphical Interface, 15/03/2006 ; cf. la recension de Stéphane Bortzmeyer, Magic Ink, de Bret Victor, 05/07/2007.
Sur les pages susceptibles de mises à jour plus que marginales, le système nécessiterait d’être sensiblement aménagé pour garantir la stabilité des adresses,Quand Bret Victor, @worrydream sur Twitter, s’est confié dans un tweet du 18/11/2014 : « After all these years, I'm still thrilled when somebody links into an individual paragraph in Magic Ink. », Guillermo Rauch, partant sur l’hypothèse des mises à jour, donne à considérer en réponse, le 24 : « @worrydream what happens when you change the post's content by introducing new paragraphs? Links break? »
issues à l’origine d’un ou plusieurs numérotages des alinéas, des citations, des éléments de liste aussi s’ils sont assez longs.Les croisillons d’ancre « # » permettant aux visiteurs de récupérer les adresses de fragments sont ajoutés par JavaScript en présence de paragraphes, en utilisant leur identifiant comme « id="p1" », qui se trouve dans un élément de liste après l’alinéa « id="p141" ». Selon l’alinéa 407, le code de la page est généré par une version modifiée d’un utilitaire de John Gruber, à partir d’une source en Markdown modifié.
Possibilité dans WordPress
WordPress, comme DokuWiki, dispose d’une extension qui réalise la numérotation des alinéas, mais de l’aveu même de son auteur, elle nécessite d’être terminée et maintenue, car faute d’intérêt du public, elle est restée dans un état rudimentaire.Robert Sharp, Paragraph Level IDs, WordPress.org.
Adresses lexicales
Si pour les ancres de titres, la chaîne dérivée du titre constitue la règle, elle était jusqu’à présent l’exception pour les ancres d’alinéas. Rien n’est pourtant plus simple que de dériver une chaîne unique à partir de la première dizaine de mots. Le risque d’aboutir à des doublons à désambigüiser est beaucoup plus élevé au niveau des titres. Seule une figure de style peut conduire à commencer plusieurs alinéas d’une même page par la même phrase ou la même subordonnée longue.
Possibilités dans WordPress
WordPress offre les moyens d’avoir des ancres d’alinéas automatiques et visibles au survol ou en permanence, et aussi d’ajouter des ancres invisibles ad hoc qui se font plus discrets au prix de l’inaccessibilité aux visiteurs.
Ancres manuelles
À partir de la version 5.5, l’interface de WordPress facilite l’ajout d’identifiants aussi aux blocs d’alinéa, après l’avoir introduite auparavant pour les blocs de titre. Dans le panneau latéral du nouvel éditeur, sous la rubrique « Avancé », un champ au-dessus de celui des « Classe(s) CSS additionnelle(s) », intitulé « Ancre HTML », permet la saisie.
Ancres automatiques
L’extension Add Anchor Links,Karolína Vyskočilová, Add Anchor Links, WordPress.org, a reçu une bonne note. Il faut éviter par contre l’extension WP Anchor Header, dont la version 0.2.3 duplique le début de la source de la page au début du contenu et utilise un symbole moins joli et non aligné, étant ajouté après les titres.
prévue à l’origine pour les titres, y ferait double emploi avec l’extension Table of Contents Plus. Mais elle peut facilement être redestinée aux alinéas comme indiqué au chapitre 2.
Utilisation des ancres sur le site
L’utilisation des identifiants dans les liens internes dans la même page est de les faire précéder d’un croisillon dans le champ URL de la fenêtre de lien (Ctrl=K), ou dans les autres pages, de les ajouter après l’adresse et un croisillon. En pratique, surtout dans le dernier cas, la cible de l’ancre est activée dans une page afin que le contenu de la barre d’adresse corresponde à l’URL souhaitée.
Structure des documents
La manière de hiérarchiser des textes sur le web n’est pas directement compatible avec les usages en traitement de texte et en préparation de documents (LaTeX). Avant même de convertir des contenus depuis d’autres formats, il est bon de garder à l’œil quelques spécificités du HTML, afin que les pages produites s’intègrent sans faille. Cela concerne d’abord les niveaux de titres, mais aussi au moins deux manières incompatibles entre elles d’avoir des notes de bas de page, autant dire des notes de fin.
Comparé à la publication hors ligne, le web impose de sérieuses limitations sur le nombre de niveaux de titres utilisables.
Plus les contenus avancent dans la vulgarisation, moins ils ont de niveaux d’intertitres, certes, mais le web demande surtout de ne plus utiliser le niveau 1 pour les titres de chapitre ou de section au sein des documents. Diviser le contenu en autant de pages web est une manière de contourner cette exigence et d’en mitiger l’impact tout en se conformant aux bonnes pratiques du web, où les pages trop longues, même avec intertitres et tables des matières, risquent d’être moins lues et moins indexées par les moteurs de recherche.
Niveaux de titres
Pour la simplicité, un seul niveau d’intertitre est certes préféré, mais il est bon de ne pas y être limité, et de pouvoir faire usage d’autant de subdivisions que la clarté l’exige.
À la différence des traitements de texte,Chelsea Lee, How to Use Five Levels of Heading in an APA Style Paper, APA Style 6th Edition Blog, 14/04/2011.
les pages web réservent le niveau 1 au titre de la page, et elles ne prennent pas en charge de titres de niveau 7 ou inférieur. La limitation à six niveaux ou rangs de titre<h1>-<h6> : les éléments de titre de section, Mozilla Developer Network (MDN), 2005–25/04/2019.
est particulière à la spécification HTMLHTML 5.2, W3C Recommendation, World Wide Web Consortium (W3C), 14/12/2017 : 4.3.6. The h1, h2, h3, h4, h5, and h6 elements, et 4.3.9. Headings and sections.
, en dépit du fait que les traitements de texte aient en général dix niveaux. Dans la pratique, cela implique d’attribuer le niveau 1 au titre de la page, et de ne pas utiliser plus de cinq niveaux d’intertitres.What should you do if you need more than five heading when writing an APA paper?, Writing Stack Exchange, 20/08/2011–09/04/2016
Unicité du titre de premier rang
La règle la plus importante pour la clarté de la structure et son accessibilité est que le premier niveau de titre soit réservé au titre principal de chaque page web.Shaun Anderson, How To Use H1-H6 HTML Elements Properly (An easy to understand beginners guide to using semantically and structurally correct headings (H1, H2, H3 etc) in your HTML pages), Hobo UK SEO Services, 29/11/2017–21/05/2020.
Si dans chaque page web, il n’y a qu’un seul et unique « Titre 1 ».MDN, <h1>-<h6> : les éléments de titre de section : « Il est préférable d'éviter d'utiliser plus d'un élément <h1> sur une même page. »
cela est en désaccord avec la pratique courante en traitement de texte, où le Titre 1 figure en bonne place dans la galerie des styles de Word et s’utilise en général comme titre de section.Microsoft, Office, Improve accessibility with heading styles, 2020
Il est contre-intuitif de ne pas utiliser le Titre 1 à travers tout le document, d’autant plus qu’il existe un « Titre » générique qui semble approprié pour le titre du document.
Terminologie des titres
Cette profusion de styles de titres est source de confusion terminologique. Les styles nommés « Titre » tout court, et les styles similaires dépourvus de numéro qui figurent parmi les styles dans les traitements de texte sont de fait inutiles car sans équivalent en HTML.
Titre d’une page web
Le « titre » d’une page web est aussi une métadonnée, appelée « title » en anglais, fournie dans l’en-tête (élément <head>) de la page. Ce titre apparaît dans l’onglet et dans la barre de titre de la fenêtre, ainsi que dans le nom du fichier à l’impression. WordPress remplit ce champ automatiquement en concaténant le titre de la page et le titre du site, séparés par un tiret demi-cadratin entouré d’espaces.
Erreur dans l’adaptation linguistique
Si l’« en-tête » de la page web contenant des métadonnées porte son nom à juste titre, ce que Word appelle « en-têtes » sont en réalité les titres dans le document. Tant que l’utilisateur est dans Word, le risque de confusion est certes minime, mais l’imprécision du vocabulaire et la confusion qui en résulte ont tendance à s’intruder dans l’usage courant. Les responsables refusent de prendre en compte les retours d’utilisateurs les exhortant à corriger cette erreur regrettable.
Les titres en anglais
En anglais, les titres dans les documents s’appellent bien « headings », non « headers », mais il vaut la peine d’y insister si même des anglophones natifs formés en informatique confondent les deux termes et utilisent ce dernier à la place du premier.
Conversion traitement de texte – web
Dans les documents rédigés en traitement de texte, soit tous les titres sont déclassés d’un niveau, soit le document est divisé en autant de pages qu’il compte de titres de niveau 1, et des numéros de chapitre sont ajoutés comme suggéré dans la partie « Ajout de numéros de chapitre ».
L’extension WordPress de conversion de documents .docxMichael Williamson, Mammoth .docx converter, WordPress.org.
paraît ne pas permettre ce déclassement de niveaux de titres, et aucune solution n’est faisable en éditant le code source, car contrairement aux autres extensions, celle-ci paraît ne pas fonctionner par ses sources présentes dans le dossier « plugins/ ».Un email a été adressé à l’auteur de l’extension le 23/05/2020 : « I need to tweak the Mammoth default style map in
wp-content/plugins/mammoth-docx-converter/mammoth-editor.js (14767)
But Mammoth does not take the changes into account, however disabled and re-enabled it may be. Even messing with file- or directory names does not prevent Mammoth from working fine, while that would disable another plugin.
How can we effectively customize Mammoth’s code?
There is a need to edit the right side of the default style map so as to increment all heading levels (and map h6 to p).
The post title, that is not handled by Mammoth, is typically h1. That is fundamentally different from what users of word processors are accustomed to. So the first-level subheadings occurring across the document need to be mapped to h2, and so on until fifth level to h6.
That is also what other plugins like the Easy Table of Contents actually expect. The (default) "insert table before first heading" option has the table sit above first h2. When there is any extra h1 before, this will stray above the TOC.
No h1 in the blog posts is also the assumption that tutorials to add CSS heading numbering are based upon:
[code CSS comme sous « Numérotation des titres »]
For completeness, but off-topic: I’m using the footnotes for WordPress plugin, that enables bloggers to add footnotes inline on the fly. That is incompatible with what Mammoth converts imported footnotes to.
I don’t need the suggested fixes, tweaks and features for myself, but to provide a method that can be used by other people to create a personal website out of scientific content. »
Plus de 5 niveaux d’intertitres
La balise <section>, qui dans HTML5 permet d’avoir plusieurs occurrences de titres de niveau 1 dans la page, ne fonctionne pas dans WordPress.
Une autre méthode a été suggérée à base de déclarations supplémentaires, mais rien de tout cela ne fonctionne avec l’extension de table des matières recommandée. En pratique, on est limité à cinq niveaux d’intertitres.
Gérer les notes de fin
Savoir comment seront gérées les notes sur le futur site est un aspect prioritaire de l’adaptation des contenus, car il influe beaucoup sur la manière de préparer les textes. Dans une page importée à partir d’un .docx, il est difficile d’ajouter ou modifier des notes dans WordPress.
Nativement, WordPress prend en charge les notes de pied de page comme le fait SPIP avec les doubles parenthèses((Note.)). Plusieurs extensions peuvent aussi ajouter cette fonctionnalité. De plus, il existe des plugins bibiliographiques capables d’ajouter des notes autrement.
Notes bibliographiques
L’utilisation d’extensions bibliographiques dans WordPress apparaît comme une source de perte de temps et de productivité, et l’utilisation de « ABT » présenté ci-après est fortement déconseillée.
Gestionnaire avec la base de données
L’Academic Blogger’s ToolkitAcademic Blogger’s Toolkit, sur WordPress.org, page qui se dit obsolète et renvoie vers Academic Blogger’s Toolkit sur GitHub.
apparaît à première vue comme le meilleur choix pour un site scientifique ; hélas, elle entoure d’espaces nulles sécables les appels de notes, nombres en exposant seuls qui peuvent ainsi se retrouver en début de ligne ou seuls sur une nouvelle ligne, parfois suivis du point finalDans les sources de l’extension ABT, l’espace nulle apparaît 18 fois, dont 3 fois comme valeur de variable, assignée à f dans /wp-content/plugins/academic-bloggers-toolkit/bundle/editor.js (à la ligne 1 ; le script n’est présent que sous forme minifiée ; même mis en forme par l’éditeur de texte, il reste plus difficile à comprendre), à p dans bundle/editor-stores.js, et à d dans bundle/frontend.js(51).
. À la lecture, les notes ne sont présentées qu’en petite taille dans les infoboîtes quand le pointeur est sur l’appel de notes ou, sur mobile, quand l’utilisateur y met le doigt. L’apparence visuelle courante sur le web pour ce type d’élément fait défaut mais peut être ajoutée par CSS. Pour les consulter en taille normale au bas de la page, il faut faire défiler manuellement et perdre le fil. Difficile à compléter à cause de son code touffu, cette extension apparaît ainsi d’emblée comme un raté.
Si l’ajout de références importées, récupérées en ligne ou saisies dans un formulaire bénéficie d’un support logiciel puissant, impossible d’ajouter des notes libres en texte riche avec hyperliens.Manual Reference Type: Note [feature request] #610, docNeptun, GitHub, 20/05/2020. Il faut invoquer le menu du bloc dans l’éditeur Gutenberg pour saisir la note en texte brut, mais celle-ci est seulement stockée dans la liste ; ensuite elle paraît impossible à ajouter. Or les utilisateurs professionnels préfèrent l’éditeur classique : « I really like the inline widget for the classic editor. […] Also there was a “Generic – Note” part. […] — Same. But the author of this plugin has said, in layman’s terms, that he doesn’t care. As it is his volunteer time, he can do what he wants. I would gladly pay a shareware fee […] » (kirkayigit, ticktickatick, Hate Gutenberg, forum support pour ABT, WordPress.org).
Le menu « … » contient en haut de liste l’action « Enlever toutes les références » qui supprime toutes les notes sans demander confirmation !
Contrairement à ce que promet l’auteur,Academic Blogger’s Toolkit, Manifesto : « Need to write one long blog post with lots of references? Download this plugin, write the post, and then delete the plugin if you don't need it any longer. Freedom. »
sans la feuille de style bundle/frontend.css, les numéros dans la liste des notes sont dupliqués, parce que ceux ajoutés en vertu de l’élément « liste numérotée » ne sont plus supprimés devant ceux codés en dur, qui quittent la marge pour monter seuls sur une ligne.janos-farkas, Format After the Plug-in is Deactivated #594, GitHub, 29/11/2019. — Il faudra ajouter au minimum des règles CSS comme « ol.abt-bibliography__body {list-style-type:none;} div.csl-left-margin {float:left; margin-left:-1.5em;} » dans la feuille de style du thème enfant utilisé, règles qui semblent ne pas être fournies.
Après 26 000 téléchargements, il n’y a que 1 000 installations actives, et la tendance est à la baisse.Statistiques de l’Academic Blogger’s Toolkit, WordPress.org.
Notes encastrées avec champs
JReferencesJaniko, JReferences, WordPress.org.
est une extension d’origine française qui affiche nativement plusieurs champs, dont seul « titre » est requis, dans un style proche du modèle « lien web » de Wikipédia. Elle est relativement facile à étendre en PHPLe fichier à modifier, sous licence GNU GPL v2+, est disponible ici (télécharger la cible du lien).
pour accepter davantage de champs et ne plus exiger de titre. Les variables admettent le texte riche (italique, gras, hyperliens).
Un champ « note » peut être ajouté pour mettre toute sorte d’informations libres en note de fin. Les notes nommées peuvent être réutilisées jusqu’à 25 fois dans un même article,balwuw, Extraordinary, customizable footnotes plugin, Support, WordPress.org.
mais comme dans Wikipédia, la position dans l’alphabet n’est pas visible au niveau des appels de note. Cette extension permet de personnaliser la chaîne utilisée entre crochets pour les balises, dans le panneau de configuration à « Réglages > JREF References ».
Convertisseurs bibliographiques
Zotero NotesJaniko, Zotero Notes. WordPress.org.
permet d’ajouter des bibliographies depuis un compte Zotero.
PMID Citations with ReadOxMD, PMID Citations with Read. WordPress.org.
permet d’ajouter des bibliographies générées automatiquement à partir de la base de données PubMed.
PAPERCITEBenjamin Piwowarski, PAPERCITE, WordPress.org.
est une extension de gestion de base de données bibliographiques qui accepte les fichiers BibTex.
Notes libres
Suite à l’œuvre fondatrice de John Gruber en 2005,John Gruber, About the Footnotes, Daring Fireball, 20/07/2005.
, la plupart des plugins de notes utilisent le système que l’on retrouve aussi dans les moteurs de wiki, sauf que dans WordPress les balises ne peuvent être « <ref></ref> » comme sur Wikipédia, parce que les crochets pointus inférieur–supérieur ASCII sont convertis par l’éditeur Gutenberg en entités nommées afin qu’ils apparaissent tels quels dans les billets de blog. En général, les balises sont au choix, comme dans l’extension utilisée sur ce site.Outillage de publication A.M.R.GES, disponible sur WordPress.org et WordPress.com.
Comme il existe une vingtaine de plugins concurrents, une évaluation a été menée hors ligne afin de déterminer la ou les meilleures extensions pour les sites scientifiques. Les résultats sont mis en ligne ici au fur et à mesure.
Les extensions ont été testées dans l’ordre des résultats d’une recherche sur "footnotes" dans « Extensions > Ajouter » dans une installation locale de WordPress. Les résultats sont classés par catégories, et au sein de chaque catégorie, dans un ordre subjectif.
Extensions pour notes avec balisage
Choix initial
Jusqu’à sa première vandalisation et avant sa première remise en ligneEn 2021, ce site a été mis hors ligne par un cybercriminel qui a effacé tous les fichiers, comme il est possible en utilisant un webshell si l’hébergement n’est pas sécurisé comme les serveurs partagés d’Infomaniak. Et le 17/04/2023, la base de données, cette fois, a été effacée. Elle a été restaurée à partir d’une sauvegarde.
, ce site utilisait FootnotesMark Cheret, David Artiss, Footnotes, WordPress.org.
qui permet de nombreuses personnalisations. Les balises peuvent être choisies librement, les caractères inclus dans les appels de note, le symbole de retour qui s’affiche au début de la note.
Extensions fonctionnelles et utilisables
Easy FootnotesJason Yingling, Easy Footnotes, WordPress.org.
a le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour se trouve à la fin du texte de la note, qui s’affiche aussi dans une infoboîte au survol de l’appel de note. Les balises sont « [efn_note][/efn_note] ». Le tableau de bord est accessible via le menu « Réglages ». Les personnalisations peuvent aussi se faire en PHP dans le fichier « functions.php » du thème enfant selon les instructions.
Simple FootnotesAndrew Nacin, Simple Footnotes, WordPress.org.
a le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour se trouve à la fin du texte de la note, qui s’affiche aussi en infobulle au survol de l’appel de note. Les balises sont « [ref][/ref] ».
EndnotesHeavy Heavy, Erik Ford, Endnotes, WordPress.org.
est une amélioration logicielle de FD Footnotes. Un utilisateur a modifié la syntaxe en doublant les crochets afin de pouvoir utiliser des crochets dans les notes.ronsmithmd, A Tweak to the beginning/ending footnote delimiters, WordPress.org, 17/07/2017.
Les notes générées par cette extension ont le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour se trouve à la fin du texte de la note. Les balises sont « [1. » (un chiffre quelconque qui sera remplacé, un point et une espace) et « ] ». Dans le tableau de bord (dans « Réglages ») on peut saisir le titre, qui sera un heading 3 ou 2ᵉ niveau de titre, et une option ajoute une bouton (sous ce titre si présent) permettant d’afficher la listes des notes alors cachée par défaut.
FD Footnotes PluginJohn Watson, FD Footnotes Plugin, WordPress.org.
alerte qu’il n’est plus maintenu depuis 2016. Il a le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour se trouve à la fin du texte de la note. Les balises sont « [1. » (un chiffre quelconque qui sera remplacé, un point et une espace) et « ] ». Un utilisateur d’Endnotes a modifié la syntaxe en doublant les crochets afin de pouvoir utiliser des crochets dans les notes.ronsmithmd, A Tweak to the beginning/ending footnote delimiters, WordPress.org, 17/07/2017.
Le tableau de bord est à « Réglages > Footnotes ».
jQuery Hover FootnotesLance Weaver, jQuery Hover Footnotes, WordPress.org.
affiche le contenu des notes, en plus de la liste en bas, dans des infoboîtes, mais pas sur les mobiles. Le titre personnalisable de la liste des notes s’accompagne d’une explication, en anglais uniquement, de l’usage du symbole (personnalisable) du lien de retour, à la fin du texte de la note, qui déclenche comme l’appel de note le défilement standard HTML. La syntaxe permet de – mais n’oblige pas à – dissocier l’appel de la note et son contenu, mais oblige à choisir un nombre unique pour les deux, entre doubles accolades pour l’un, entre doubles crochets pour l’autre, balise à répéter pour fermer la note, qui peut être rédigée à n’importe quel endroit.
Extensions dysfonctionnelles ou obsolètes
Footnotes for WordPressCharles Johnson, Footnotes for WordPress, WordPress.org.
permet une gestion personnalisable des notes, dont les balises sont « [ref][/ref] », avec la possibilité de réutiliser des notes nommées, un peu à la manière de WikiMedia : « [ref name="id-unique"] (sans espace)[/ref] », ailleurs « [backref name="id-unique"] » (avec ou sans /, mais avec « back »). L’identifiant par défaut est le slug d’URL de l’article suivi de « ‑n‑ » et du numéro de la note. — Mais dans les appels de notes, entourés de crochets non hyperliés, le nombre est suivi, après une espace sécable, d’un symbole de lien externe, à la même fonctionnalité. Pour accéder au contenu de la note, un clic sur l’un ou l’autre ouvre une infoboîte, qui ne se referme que par un clic sur son bouton de fermeture en haut à droite – qui peut être en-dehors de l’écran si l’appel de note est proche du bord droit –, ou lorsque l’infoboîte d’une autre note est ouverte. Un clic sur un autre bouton fait défiler vers la note en bas de page, dans un encadré individuel. Le lien de retour d’une note nommée ramène toujours à la première occurrence de l’appel de note. L’empilement des boîtes de notes peut être repositionné à l’aide de la balise « [references/] ».
Footnotes Made EasyDavid Artiss, Footnotes Made Easy, WordPress.org.
a le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour, personnalisable, se trouve à la fin du texte de la note, qui s’affiche aussi en infobulle au survol de l’appel de note, personnalisable aussi. Une option remplace les infobulles par des infoboîtes, lesquelles toutefois s’affichent aussi en permanence en-dessous du pied de page, et chacune est visible lors du retour depuis la note et ne disparaît qu’après un clic en-dehors. Les balises, « (()) » (comme dans SPIP) par défaut, sont personnalisables.
Blank FootnotesCorrado Franco, Blank Footnotes, WordPress.org.
utilise la syntaxe Markdown qui oblige à ne placer que l’appel de note dans le texte, et la note tout à la fin du texte, et à numéroter soi-même les notes. Cette extension permet de réutiliser facilement le même appel de note, mais ne permet de retourner qu’à sa première occurrence. Dans la liste des notes, à titrer soi-même d’autant plus que les notes sont déjà au pied de l’article, les numéros sont alignés avec le texte des notes.
YAFootnotesstratosg, YAFootnotes, WordPress.org.
utilise la même syntaxe que jQuery Hover Footnotes permettant de dissocier les notes et les appels de notes, mais n’affiche jamais rien au niveau de l’appel de note. En bas, les notes ne sont pas renumérotées, leurs numéros sont alignés avec la note et, bien que stylés en hyperlien, ne permettent pas de retourner à l’appel ; la petite flèche est à la fin de la note.
Civil FootnotesAustin Sweeney, K. Adam White, Civil Footnotes, WordPress.org.
a le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour se trouve à la fin du texte de la note, dont le code source HTML s’affiche en infobulle au survol de l’appel de note, ce qui est inattendu dans une interface utilisateur. Les balises sont « (()) » uniquement. Les personnalisations se font au niveau CSS et, à la limite, en PHP dans le fichier « functions.php » du thème enfant. L’exigence affirmée d’insérer une espace avant les doubles parenthèses ouvrantes a disparu.
WP-BigfootAdam Martinez, WP-Bigfoot, WordPress.org.
affiche en guise d’appels de notes un bouton générique large, sans numéro. Un clic affiche le contenu de la note dans une infoboîte, sans faire défiler à la liste des notes, qui se trouve effectivement en bas de page avec les numéros.
AJS FootnotesAdam J. Seidl, AJS Footnotes, WordPress.org.
a le comportement de base HTML où le défilement instantané place les ancres sous le bord supérieur de l’écran, autant la note, qu’au retour l’appel de note. Le lien de retour, personnalisable, se trouve à la fin du texte de la note, qui au survol de l’appel de note (personnalisable) s’affiche aussi dans une infoboîte, très personnalisable mais inattentive au bord de l’écran et risquant donc d’être cachée en partie. Le panneau de configuration se trouve dans « Réglages ».
MNML FootnotesMauro Bringolf, MNML Footnotes, WordPress.org.
fonctionne uniquement avec les balises « [mnml_footnote][/mnml_footnote] ». Le contenu des notes est visible uniquement en bas de page, mais les liens de retour vers les appels de notes font défaut.
CredibilityEric Binnion, Credibility, WordPress.org.
s’installe et peut ouvrir son panneau de configuration, mais les notes ne fonctionnent plus, car cette extension est incompatible avec les versions 4 et 5 de WordPress.
Better FootnotesNashwan Doagan, Better Footnotes, WordPress.org.
utilise le symbole paragraphe (section) « § » comme appel de notes par défaut, et a un tableau de bord dans « Réglages », mais semble ne pas fonctionner dans l’instance testée.
Simple Footnotes Editor ButtonAndrew Patton, Simple Footnotes Editor Button, WordPress.org.
n’a pas été testé avec les versions 4 et 5 de WordPress, et le bouton indispensable dans la 2ᵉ rangée de la barre d’outils de l’éditeur classique n’apparaît plus aujourd’hui.
Advanced FootnotesYunus Tabakoğlu, Advanced Footnotes, WordPress.org.
est une extension qui n’est plus maintenue et dont l’installation échoue, mais sa dernière version, 1.1.2, a servi de base à l’extension Better Footnotes de Nashwan Doagan.
Gestionnaire de notes multifonction
CM FootnotesCreativeMindsSolutions, CM Footnotes, WordPress.org.
dispose d’un éditeur de pages pour « ajouter » des « notes », invite à créer un compte et propose une version payante qui prend en charge l’insertion de notes par balisage.
Extension pour annotations
Modern FootnotesPrism Tech Studios, Modern Footnotes, WordPress.
ne génère pas de liste des notes au bas de la page, malgré les appels de notes numérotés. L’infoboîte s’affiche seulement après un clic sur l’appel de note. Alternativement on peut faire afficher les notes en interlinéaire après un clic sur l’appel. Le contenu des annotations est perdu lors de l’impression, mais les appels de notes restent présents dans le PDF et produisent une erreur lorsqu’ils sont cliqués. En modifiant les styles, on peut les faire disparaître à l’impression et présenter le contenu des notes entre crochets. C’est du même ordre que quand Chrome imprime les pages en indiquant les URL en clair entre parenthèses après les hyperliens. Un panneau de réglages est dans le menu.
Inline FootnotesGavin Rehkemper, Inline Footnotes, WordPress.org.
affiche le contenu de la note uniquement en infobulle (au survol) et dans une infoboɩ̂te (au clic). À l’impression, seul reste l’appel de note. Celui-ci est entouré d’espace destiné à être coloré en bouton.
Side MatterChristopher Setzer, Side Matter, WordPress.org.
est incompatible avec les versions 4 et 5 de WordPress et ne fonctionne plus, sauf à placer des appels de note et à afficher les notes en infobulles.
Link FootnotesRyan Nutt, Link Footnotes, WordPress.org.
était limité aux URL et ne fonctionne pas avec les versions 4 et 5 de WordPress.
Couverture du sujet
Le sujet des liens de titres est traité en profondeur dans un article d’un hébergeur WordPress,Brian Jackson, How to Create Anchor Links in WordPress (4 Easy Methods), Kinsta, 20/08/2018–15/07/2020.
, mais le plugin indiqué n’est pas utilisé.« Hey Brian!¶Awesome post, i was wondering which one does Kinsta.com’s blog uses? The ones in this post look really good. » — « Hello Nasim, we just a custom solution for our anchor links. » Commentaires sur How to Create Anchor Links in WordPress (4 Easy Methods), 27/07/2020–03/08/2020.
Hélas la solution ne fonctionne pas car les ancres, absentes de la source HTML, sont ajoutées par un script qui ne désambiguise pas les doublons ; les liens près de chacune des 5 occurrences de « Step 1 », toutes complémentées de « id="step-1" », font défiler vers la première, car les identifiants sont censés être uniques par page. Le défilement en lui-même est ergonomique en ce qu’un lien partagé fait afficher d’abord le titre de la page pendant une seconde avant de faire défiler vers la première occurrence.Si le plugin WordPress WP Anchor Header indiqué était utilisé, la déclaration DOCTYPE et la balise ouvrante <html> seraient peut-être dupliquées au sein de la page, comme c’était le cas sur le présent site.
Lier des contenus en PDF
Les auteurs de sites web se doivent de mettre en œuvre toutes les ressources techniques pour maximiser la fluidité de la consultation des contenus. L’attention est un bien précieux. Trop sollicitée aujourd’hui, elle doit se tourner en priorité vers les informations environnementales vitales pour la survie de l’humanité, et vers les actions urgentes à mener dans le but de limiter le dérèglement climatique. Tout le reste passe a priori au second plan. D’où l’obligation morale des auteurs de sites de faire un maximum de choses pour éviter toute perte de temps. Une manière de relever ce défi est d’optimiser les liens vers les PDF afin que les navigateurs les ouvrent à la bonne page, voire les fassent défiler jusqu’au titre, à l’alinéa ou à l’illustration citée.
Malgré tous les efforts de vulgarisation, il reste beaucoup d’informations importantes disponibles uniquement en PDF. Il faut pouvoir pointer à l’intérieur de ces documents par des liens qui reproduisent la fonctionnalité des ancres HTML, ces identifiants ajoutables dans les balises comme valeur de l’argument « id ».Identificateur de fragment, Wikipédia, 03/05/2013–29/07/2020
Améliorer l’accès aux PDF grâce aux paramètres d’URL
La solution la plus à jour est d’ajouter à la fin de l’URL du fichier, des paramètres permettant au navigateur non seulement d’ouvrir le PDF à la bonne page, mais aussi de faire défiler la page jusqu’au bon endroit, voire d’agrandir la vue pour zoomer sur un détail.
Dans Adobe Acrobat, les auteurs de PDF peuvent certes définir des destinations spécifiant l’endroit sur une page et le facteur de zoom, mais ces destinations (appelées « signets », au risque de prêter à confusion avec les vrais signets ajoutés par le lecteur) sont difficiles à obtenir, et surtout elles ne fonctionnent que partiellement dans Chrome, qui assure plus de 60 %Statcounter, Browser Market Share in France — July 2020, Global Stats.
de la navigation internet en France, contre moins de 10 % pour Firefox, qui prend ces signets pleinement en charge. Car la vraie solution pour le webIs it possible to link to a bookmark within a PDF using URL parameters?, Stack Overflow, 2008.
telle que spécifiée par AdobeAdobe Systems Incorporated, Parameters for Opening PDF Files, Adobe® Acrobat® SDK, Avril 2007. — Ignorer l’alternative de répéter le croisillon, et concaténer plusieurs arguments uniquement avec l’esperluette.
est de préciser à la fin des URL non seulement la page,Depuis longtemps, la page est donnée en paramètre d’URL. Dans le panneau latéral du lecteur PDF de Firefox, c’est ce que l’on récupère via le menu contextuel des miniatures. Aussi dans celui des signets de pages encore dans la version 47.0, mais plus dans Firefox Quantum 58.0.2, qui fournit alors un tableau JSON en guise de paramètre, inutilisable dans Chrome.
mais aussi le facteur de zoom et le défilement depuis la gauche et le haut.
Jusqu’où faire défiler
Le comportement le plus à jour lors du défilement vers un titre est d’arrêter à peu près cinq lignes au-dessus. Traditionnellement, le titre était collé contre le bord supérieur de l’écran, dans une zone où les en-têtes et les menus sont plus attendus que les contenus. Le nouveau comportement est plus intuitif et donc plus ergonomique. Il est réalisé par l’extension WordPress qui génère les notes de fin de ce blog.Mark Cheret, David Artiss, Footnotes, WordPress.org.
Pour ce qui est du sujet de cette section, le comportement préféré s’observe dans le lecteur PDF intégré de Chrome quand on clique dans la table des matières.Pour les visiteurs non familiers avec Chrome : La table des matières d’un PDF s’affiche après un clic sur l’icone « signets » dans la barre d’en-tête qui, elle, s’affiche quand le pointeur de la souris s’approche du bord supérieur.
Par exemple, pour ouvrir la préface du Standard Unicode à la section introduisant les tableaux de caractères, l’URL se présentera à peu près comme ceci :
https://www.unicode.org/versions/Unicode13.0.0/Preface.pdf#page=5&zoom=125,198,334Cette adresse a exactement le même effet que l’ouverture du fichier par son URL et la navigation au titre « Unicode Code Charts » par le menu des signets dans le lecteur PDF de Chrome.Observation faite dans la version 84.0.4147.105 de Chrome. La fonctionnalité a été ajoutée dans Chrome en 2011 et était disponible à partir de la version 13.x, selon « Issue 65851: Navigation in PDF based on page# in URL - nice to have feature », Chromium Bug Tracker, 2011.
Quoi spécifier de plus
Choisir un facteur de zoom
Le facteur d’agrandissement de 125 est celui appliqué par le zoom automatique du lecteur PDF de Firefox sur un écran de 14″. Pour ne pas zoomer par défaut, sans vouloir empêcher Firefox de zoomer automatiquement, on peut mettre 0 au lieu de 100 (ou 125), car cela fonctionne dans Chrome, mais tester d’abord si la dernière version de Firefox le comprend.Encore Firefox 58.0.2 rejette tout le paramétrage de l’URL, même le numéro de page, si « zoom=0 ». Quant à « zoom=null,198,334 », cela ne fonctionne nulle part. Il est possible par contre de donner un facteur de zoom seul : « zoom=125 », « zoom=500 » (Chrome ne zoome pas plus près, Firefox si). Le problème à la base est qu’Adobe a oublié de spécifier comment ne pas indiquer de facteur de zoom tout en indiquant un défilement. Dans les règles de l’art, Adobe aurait même spécifié deux paramètres optionnels distincts : « zoom=pourcentage », et « scroll=x,y ».
Défilement horizontal
Le défilement horizontal de 198 unités (d’espace utilisateur par défaut) d’¹⁄₇₂ de pouce revient à cacher la marge gauche sur les petits écrans, tandis qu’il reste sans effet quand la page s’affiche en pleine largeur. Le chiffre provient de la destination G10883 donnée par Unicode.La destination G10883 du Standard Unicode se trouve en paramètre d’URL dans l’hyperlien de « Unicode Code Charts » vers le début des titres listés dans la page « Unicode 13.0 Web Bookmarks », liée depuis « Unicode® 13.0.0 ». Toutes les versions : « Web Bookmarks for the Unicode® Standard ».
Pour y accéder, commencer par décompresser le fichier grâce à l’utilitaire PDFtkPDFtk ou pdftk comme « PDF toolkit » est une suite de logiciels de Sid Steward, pour Windows, Mac et Linux. L’adresse mnémonique de la partie du site de PDF Labs consacrée au PDFtk est pdftk.com.
Une fois le PDF décompressé ouvert dans un éditeur de texte, une recherche sur « G10883 » mène à une partie de la liste des noms de destinations « /Names ». « G10883 » est associé à l’objet nᵒ 103 :
(G10883) 103 0 RCet objet contient les informations d’affichage :
103 0 obj
<<
/D [11 0 R /XYZ 198 364 null]
>>
endobj L’objet nᵒ 11 est la page 5 du PDF. On voit aussi qu’aucun facteur de zoom (Z) n’est spécifié, et que le décalage vertical (Y) est de 364 unités.
À propos des coordonnées dans le PDF
Si l’on mettait le nombre 364 dans le paramètre zoom, l’objectif n’était atteint que dans d’anciennes versions de Firefox (voir plus bas). Dans Chrome et selon la spécification d’Adobe, l’origine « 0,0 » du système de coordonnées se situe en haut à gauche, comme dans le format SVG de graphiques vectoriels porté par le W3C, tandis que la spécification du PDFAdobe Systems Incorporated, PDF Reference, third edition, Adobe Portable Document Format Version 1.4, 2001.
suit l’usage mathématique en plaçant l’origine en bas à gauche. Dans notre exemple, la destination associée au titre précédent, « The Unicode Character Database », à la même page, a une coordonnée Y de 512.
S’y ajoute que dans le PDF, les coordonnées de la page ne commencent pas forcément à zéro, car la page visible est une sous-boîte de la boîte média qui, elle, a l’origine dans son angle inférieur gauche. La page affichée correspond à une boîte de découpe ou de récolte, la « CropBox », différente de la boîte de rognage ou de massicotage « TrimBox » :
/MediaBox [0 0 612 792]
/CropBox [162.0 90.0 594.0 702.0]Complications contre-productives
Écueil-surprise à éviter
Pour ne pas décevoir les visiteurs du site, il ne faut surtout pas utiliser d’URL de PDF dont le paramètre est une destination nommée. Si ces adresses fonctionnent pleinement dans Firefox, Chrome au contraire ne fait défiler que jusqu’à la page de la destination, sans faire défiler jusqu’au titre.
Tester les navigateurs
Pour le tester, voici trois formes de l’adresse du troisième titre de la même page du Standard Unicode, « Unicode Standard Annexes » :
- page=5&zoom=125,198,531 : défile un peu au-dessus du titre, à la Chrome, dans Chrome ; fait sans doute de même dans une nouvelle version de Firefox mais allait deux titres plus haut avantZoom parameter implemented "upside-down" #2843, Mozilla, sur GitHub, 2013.
,Implemented #10773 with potential fix on #2843 #11786, Mozilla, sur GitHub, 2020.
; - page=5&zoom=125,198,216 : utilise les coordonnées PDF et fait défiler jusqu’au titre dans l’ancien Firefox, mais s’arrête deux titres plus haut dans Chrome ;
- G10754 : fait défiler au titre dans Firefox, tandis que dans Chrome, ce PDF s’ouvre à la bonne page, mais avec en haut de l’écran l’en-tête de la page xxiv du Standard Unicode.
C’est peut-être suffisant, mais les visiteurs pressés peuvent y voir un bug, parce que si le contenu du PDF est présenté sous forme de page web, le comportement attendu est celui de l’élément suivant :
<h2 id="G10754">Unicode Standard Annexes</h2>Opter pour la bonne solution
Le PDF n’admet pas de telles ancres au sein d’une page ; aussi Adobe a cherché à pallier cet inconvénient.
Mais Google a décidé de ne l’implémenter qu’en partie. Il faut comprendre pourquoi. Le système inventé par Adobe pour imiter les ancres HTML est fermé (difficulté de connaître la valeur et la destination de ces noms), redondant (Adobe promeut en parallèle les paramètres d’URL), et surtout, rigide. S’il partage ce défaut avec le HTML, il diffère de celui-ci en ce qu’il cannibalise sa solution : Sur le web, Adobe concurrence son propre bon produit – les paramètres d’URL – par son propre mauvais produit : les destinations nommées. En n’implémentant ces dernières dans Chrome qu’en partie, Google décourage les auteurs d’utiliser la mauvaise méthode et les encourage à utiliser la bonne.
Piège facile à reconnaître
Si encore en 2015, l’URL de tout titre figurant dans la table des matières ou, à défaut, de toute page d’un PDF pouvait être facilement récupérée dans le panneau latéral du lecteur PDF de Firefox via l’élément « copier le lien » du menu contextuel, aujourd’hui en 2020 cela ne fonctionne plus que pour certains fichiers, comme ceux de la spécification principale du Standard Unicode.Pour le voir fonctionner, cliquer sur l’un des titres listés dans la page « Unicode 13.0 Web Bookmarks », liée depuis « Unicode® 13.0.0 », ou celle d’une autre version listée dans « Web Bookmarks for the Unicode® Standard ».
Depuis le volet de navigation en mode table des matières de la plupart des autres PDF, qu’ils aient été générés par LibreOffice ou par Adobe Acrobat Pro Document Cloud, Firefox fournit désormais du code non interopérable, inutilisable par le lecteur PDF de Chrome : un tableau JSON comme celui-ci :
[{"num":32,"gen":0},{"name":"Fit"}]Le nombre après « num » est le numéro d’objet de la page ciblée. Étant destiné aux URL, le tout est encodé en pourcent :
%5B%7B%22num%22%3A32%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5Dwp-content/plugins/mammoth-docx-converter/mammoth-editor.js (14767)
But Mammoth does not take the changes into account, however disabled and re-enabled it may be. Even messing with file- or directory names does not prevent Mammoth from working fine, while that would disable another plugin.
How can we effectively customize Mammoth’s code?
There is a need to edit the right side of the default style map so as to increment all heading levels (and map h6 to p).
The post title, that is not handled by Mammoth, is typically h1. That is fundamentally different from what users of word processors are accustomed to. So the first-level subheadings occurring across the document need to be mapped to h2, and so on until fifth level to h6.
That is also what other plugins like the Easy Table of Contents actually expect. The (default) "insert table before first heading" option has the table sit above first h2. When there is any extra h1 before, this will stray above the TOC.
No h1 in the blog posts is also the assumption that tutorials to add CSS heading numbering are based upon:
[code CSS comme sous « Numérotation des titres »]
For completeness, but off-topic: I’m using the footnotes for WordPress plugin, that enables bloggers to add footnotes inline on the fly. That is incompatible with what Mammoth converts imported footnotes to.
I don’t need the suggested fixes, tweaks and features for myself, but to provide a method that can be used by other people to create a personal website out of scientific content. »
Please use the backbutton to scroll up exactly where you left.
Dernière modification :