davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Écrire ou coder l’éditorial (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.lobrassard.net/carnet/2024-03-22-ecrire-coder-editorial.html">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Écrire ou coder l’éditorial</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.lobrassard.net/carnet/2024-03-22-ecrire-coder-editorial.html" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-03-25
    </p>
  </nav>
  <hr>
  <p>À la <a href="https://www.ecrituresnumeriques.ca/" target="_blank" rel="external">Chaire de recherche du Canada sur les écritures numériques</a>, on travaille (notamment) sur la revue <a href="https://www.sens-public.org/"><cite>Sens public</cite></a>. Le défi du jour consistait à adapter la présentation d’extraits de poésie en grec ancien selon le contexte, ainsi qu’une numérotation des lignes sous forme d’annotation. Je ne connais rien au grec ancien ni à la poésie qui s’y rattache (et je me doute que c’est le cas pour bien des gens !), mais il me semble que la démarche éditoriale mise en pratique ici (qui consiste en un dialogue interdisciplinaire) mérite qu’on s’y intéresse un tout petit moment.</p>
<h2 id="lédition-systématique-des-distiques-élégiaques">L’édition (systématique) des distiques élégiaques</h2>
<p>Examinons un <em>distique élégiaque</em>, dont voici une source au format texte brut :</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>Νῦν μοι "Χαῖρε" λέγεις, ὅτε σου τὸ πρόσωπον ἀπῆλθεν  </span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>  κεῖνο τὸ τῆς λύγδου, βάσκανε, λειότερον·  </span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a>νῦν μοι προσπαίζεις, ὅτε τὰς τρίχας ἠφάνικάς σου  </span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>  τὰς ἐπὶ τοῖς σοβαροῖς αὐχέσι πλαζομένας.</span></code></pre></div>
<p>Le premier vers est en hexamètre, le deuxième est en pentamètre ; le troisième vers est en hexamètre, le quatrième en pentamètre ; etc. Il y a un patron : les <strong>vers impairs</strong> sont en <strong>hexamètre</strong> ; les <strong>vers pairs</strong> sont en <strong>pentamètre</strong> et devront de surcroît apparaître <strong>en retrait</strong>.</p>
<p>Au niveau du code, j’ai pensé systématiser la présentation visuelle pour toujours mettre en retrait les lignes paires d’un poème balisé comme tel. Seul hic : il est possible que les éditrices choisissent de tronquer un poème <strong>pour n’en montrer qu’un extrait</strong>, si bien qu’un style automatisant la mise en forme des lignes selon une règle de type pair/impair ne reflètera pas nécessairement la réalité. Il fallait donc que les éditrices puissent avoir la main sur la présentation des poèmes. <em>Faudrait-il leur donner la possibilité de mettre en retrait n’importe quel vers?</em></p>
<h2 id="wysiwym-à-la-rescousse">WYSIWYM à la rescousse</h2>
<p>La chaîne éditoriale de <cite>Sens public</cite> repose sur un processus de révision scientifique, mais aussi <strong>technique</strong>, et celui-ci commence à être éprouvé depuis de nombreuses années. Ce processus a pris la forme d’un projet de recherche : <a href="https://stylo.huma-num.fr/">Stylo</a>, un éditeur de texte pensé pour les sciences humaines.</p>
<p>La plateforme propose de saisir un corps de texte au format <strong>Markdown</strong>. Celui-ci sera traité avec le logiciel <a href="https://pandoc.org/"><code>pandoc</code></a>, créé par le philosophe John MacFarlane. Cela est bon à savoir, car le corps du texte pourra utiliser une syntaxe à la « saveur » de Pandoc. C’est précisément cette saveur qui nous permettra de baliser le texte avec des éléments qui seront pour nous <em>sémantiques</em>, suivant le paradigme du <em lang="en">what you see is what you mean</em> (<abbr title="What You See Is What You Mean" lang="en">WYSIWYM</abbr>) : écrivez, balisez explicitement ce que vous voulez dire.</p>
<div class="margin-note">
<aside>
<a href="https://pandoc.org/" target="_blank" rel="external">Pandoc</a> est un parseur de documents. C’est un logiciel utilisé en ligne de commande qui permet d’effectuer des conversions entre plusieurs formats de documents (<code>docx</code>, <code>LaTeX</code>, <code>markdown</code>, <code>txt</code>, etc.).
</aside>
</div>
<p>La mise en retrait des vers en pentamètre a une <strong>valeur sémantique</strong> : elle est contextuellement, sémantiquement liée à un type de vers bien spécifique (le <em>pentamètre</em>). Sauf qu’en édition, et éventuellement dans le contexte des <a href="https://gren.openum.ca/" rel="external"><em>éditions critiques</em></a>, mieux vaut prendre le problème à l’envers de « l’intuition visuelle » : ce n’est pas parce qu’un vers est indenté qu’il devient un pentamètre, <strong>mais c’est bien parce que c’est un pentamètre qu’il devra apparaître en retrait</strong>.</p>
<figure>
<img src="https://www.lobrassard.net/img/2024-03-22-distique-elegiaque-exemple.jpg" alt="Exemple de vers d’un distique élégiaque dans l’édition courante. Les lignes paires sont mises en retrait.">
<figcaption aria-hidden="true">Exemple de vers d’un distique élégiaque dans l’édition courante. Les lignes paires sont mises en retrait.</figcaption>
</figure>
<p>Plutôt que de permettre aux éditrices d’apporter une correction visuelle arbitraire et <em>ad hoc</em>, nous avons opté pour une forme de <strong>balisage sémantique</strong>. Ce qui a semblé naturel, c’était de marquer à l’aide d’un balisage simple et explicite ; en somme, de les <em>nommer</em>. Ainsi, en utilisant la fonctionnalité <a href="https://pandoc.org/MANUAL.html#extension-bracketed_spans"><code>bracked_spans</code></a> de Pandoc pour le Markdown (balisage de type <code>[texte]{.classe}</code>), nous pouvons marquer chaque ligne <em>explicitement</em> comme étant un hexamètre ou un pentamètre.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Lorem ipsum dolor sit amet si</span><span class="co">]</span>{.hexametre}  </span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>  <span class="co">[</span><span class="ot">Vade ma vaecum</span><span class="co">]</span>{.pentametre}  </span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Lorem ipsum dolor sit amet si</span><span class="co">]</span>{.hexametre}  </span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>  <span class="co">[</span><span class="ot">Vade ma vaecum</span><span class="co">]</span>{.pentametre}  </span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="co">&lt;!-- </span></span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="co">  Note: la «mise en retrait» effectuée dans le texte</span></span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a><span class="co">  source au format Markdown n'a aucun impact dans le rendu</span></span>
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a><span class="co">  final, et n'est utilisé qu'à titre de démonstration.</span></span>
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a><span class="co">--&gt;</span></span></code></pre></div>
<p>Grâce à cette syntaxe, nous avons indiqué un surcroît d’information <em>sans pour l’instant affecter le rendu visuel</em>. On rend ainsi possible la systématisation d’une (éventuelle) règle d’affichage en fonction du <strong>sens</strong>, de la <strong>sémantique du balisage</strong>.</p>
<h2 id="une-ligne-de-css-mais-non-la-moindre">Une ligne de CSS (mais non la moindre)</h2>
<p>La syntaxe utilisée pour baliser les vers n’a pas été choisie au hasard : elle permet d’indiquer une « <strong>classe</strong> » sur un passage du texte. Une classe fonctionne un peu comme un système d’étiquettes ou de catégories : chaque élément <em>balisé</em> du document peut en avoir une seule, ou plusieurs.</p>
<div class="margin-note">
<aside>
Il est possible de combiner les classes pour en avoir plus d’une sur un même passage. Dans notre cas d’étude, nous pourrions par exemple marquer chaque vers en pentamètre de deux classes : une classe <code>.vers</code> et une classe <code>.vers--pentametre</code>, ce qui donnerait le balisage <code>[vers du poème]{.vers.vers--pentametre}</code>.
</aside>
</div>
<p>Une classe permet d’appliquer un <strong>style</strong> de manière systématique pour tous les éléments qui ont cette classe. Pour les documents web, la <strong>présentation visuelle</strong> est décrite séparément de la <strong>structure du document</strong>, grâce aux feuilles de style au langage <abbr lang="en" title="Cascading Style Sheets">CSS</abbr>.</p>
<p>Pour régler l’affichage des pentamètres en retrait, voici le morceau de solution que je propose (les quelques lignes de code fonctionnel sont précédées de plusieurs lignes de prose qui éclairent le contexte) :</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">/**</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="co"> * Dans l'édition des distiques élégiaques, une ligne</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="co"> * en pentamètre est visuellement mise en retrait.</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="co"> * </span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="co"> * Nous y appliquons une «marge» intérieure de `2em`</span></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="co"> * (`1em` correspond à la largeur d'un cadratin).</span></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="co"> * </span></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a><span class="co"> * On utilise la propriété `margin-inline-start` pour</span></span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a><span class="co"> * appliquer le retrait en fonction de la direction</span></span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a><span class="co"> * naturelle du texte dans son contexte linguistique</span></span>
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a><span class="co"> * (de gauche à droite en français, mais cela pourrait</span></span>
<span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a><span class="co"> * être de droite à gauche en yiddish).</span></span>
<span id="cb3-13"><a href="#cb3-13" aria-hidden="true" tabindex="-1"></a><span class="co"> */</span></span>
<span id="cb3-14"><a href="#cb3-14" aria-hidden="true" tabindex="-1"></a><span class="fu">.pentametre</span> {</span>
<span id="cb3-15"><a href="#cb3-15" aria-hidden="true" tabindex="-1"></a>  <span class="kw">margin-inline-start</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb3-16"><a href="#cb3-16" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>Et voilà !</p>
<figure>
<img src="https://www.lobrassard.net/img/2024-03-22-distique-elegiaque-style-retrait.jpg" alt="Résultat visuel d’un poème dont on a balisé les lignes en pentamètre (avec mise en retrait uniforme).">
<figcaption aria-hidden="true">Résultat visuel d’un poème dont on a balisé les lignes en pentamètre (avec mise en retrait uniforme).</figcaption>
</figure>
<h2 id="un-autre-défi-éditorial-la-numérotation-des-lignes">Un autre défi éditorial : la numérotation des lignes</h2>
<p>Les éditrices souhaitaient afficher le numéro de certaines lignes, comme cela se fait habituellement dans l’édition de ce type de texte (le <em>distique élégiaque</em>). La numérotation se fait aux lignes par bonds de cinq :</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>Νῦν μοι "Χαῖρε" λέγεις, ὅτε σου τὸ πρόσωπον ἀπῆλθεν  </span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a>  κεῖνο τὸ τῆς λύγδου, βάσκανε, λειότερον·  </span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a>νῦν μοι προσπαίζεις, ὅτε τὰς τρίχας ἠφάνικάς σου  </span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a>  τὰς ἐπὶ τοῖς σοβαροῖς αὐχέσι πλαζομένας.  </span>
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a>μηκέτι μοι, μετέωρε, προσέρχεο μηδὲ συνάντα 5 <span class="co">&lt;!-- Numéro --&gt;</span>  </span>
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a>  ἀντὶ ῥόδου γὰρ ἐγὼ τὴν βάτον οὐ δέχομαι.  </span></code></pre></div>
<div class="margin-note">
<details open>
<summary>
Anti-exemple de numérotation
</summary>
<figure>
<img src="https://www.lobrassard.net/img/2024-03-22-distique-elegiaque-mauvaise-numerotation.jpg" alt="Exemple d’une mise en forme des numéros de ligne qu’on voudrait éviter : les numéros ne sont pas alignés (et ont sans doute été insérés à même le texte à citer). Anti-exemple envoyé par Mathilde V.">
<figcaption aria-hidden="true">Exemple d’une mise en forme des numéros de ligne qu’on voudrait éviter : les numéros ne sont pas alignés (et ont sans doute été insérés à même le texte à citer). Anti-exemple envoyé par Mathilde V.</figcaption>
</figure>
</details>
</div>
<p>Si les éditrices ajoutent le numéro de vers directement dans le texte, celui-ci apparaîtra au bout de la ligne, <em>comme s’il faisait partie du poème</em>. De plus, les vers n’ont pas la même largeur (ils n’ont pas la même métrique et le nombre de caractères est rarement le même) : les nombres ne seront pas alignés, ce qui n’est ni pratique ni visuellement harmonieux.</p>
<p>Solution ? Marquer l’intention de numérotation avec une balise « invisible » : un attribut <code>data-numerotation=""</code> inscrit sur la ligne que l’on souhaite numéroter. La numérotation des lignes se fait « manuellement », puisque ce sont souvent des extraits qui sont présentés et qui peuvent être tronqués.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="co">&lt;!-- </span></span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="co">  La numérotation (qui prendra une mise en forme</span></span>
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a><span class="co">  particulière) sera appliquée sur la ligne qui est</span></span>
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a><span class="co">  marquée de l'attribut `data-numerotation`.</span></span>
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a><span class="co"> --&gt;</span></span>
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">μηκέτι μοι, μετέωρε, προσέρχεο μηδὲ συνάντα</span><span class="co">]</span>{data-numerotation="15"}  </span>
<span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a>  ἀντὶ ῥόδου γὰρ ἐγὼ τὴν βάτον οὐ δέχομαι.  </span></code></pre></div>
<p>La <strong>mise en forme</strong>, traitée séparément de la structure logique du document, se fait aisément avec quelques propriétés <abbr lang="en" title="Cascading Style Sheets">CSS</abbr> :</p>
<ol type="1">
<li>afficher le numéro de la ligne depuis un attribut (une « métadonnée ») ;</li>
<li>conserver un espace minimal pour que le texte ne vienne jamais se coller au numéro ;</li>
<li>envoyer le numéro <em>à la fin de la ligne</em>, peu importe si nous sommes dans une langue qui s’écrit gauche à droite ou de droite à gauche ;</li>
<li>ajuster l’apparence pour distinguer visuellement (mais subtilement) la numérotation du reste du texte.</li>
</ol>
<div class="sourceCode" id="cb6"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="co">/**</span></span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="co"> * L'attribut `data-numerotation=""` permet de</span></span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a><span class="co"> * renseigner le numéro d'une ligne.</span></span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a><span class="co"> * </span></span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a><span class="co"> * Usage (HTML):</span></span>
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a><span class="co"> * </span></span>
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a><span class="co"> * &lt;span data-numerotation="25"&gt;Une ligne d'un poème&lt;/span&gt;</span></span>
<span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a><span class="co"> */</span></span>
<span id="cb6-9"><a href="#cb6-9" aria-hidden="true" tabindex="-1"></a><span class="ex">[data-numerotation]</span><span class="in">::before</span> {</span>
<span id="cb6-10"><a href="#cb6-10" aria-hidden="true" tabindex="-1"></a>  <span class="co">/* </span></span>
<span id="cb6-11"><a href="#cb6-11" aria-hidden="true" tabindex="-1"></a><span class="co">    La propriété `content` des pseudo-éléments permet</span></span>
<span id="cb6-12"><a href="#cb6-12" aria-hidden="true" tabindex="-1"></a><span class="co">    d'afficher du contenu supplémentaire à l'écran,</span></span>
<span id="cb6-13"><a href="#cb6-13" aria-hidden="true" tabindex="-1"></a><span class="co">    mais sans faire partie du «contenu» du document.</span></span>
<span id="cb6-14"><a href="#cb6-14" aria-hidden="true" tabindex="-1"></a><span class="co">    Pour afficher le numéro entre parenthèses:</span></span>
<span id="cb6-15"><a href="#cb6-15" aria-hidden="true" tabindex="-1"></a><span class="co">    content: '(' attr(data-numerotation) ')';</span></span>
<span id="cb6-16"><a href="#cb6-16" aria-hidden="true" tabindex="-1"></a><span class="co">  */</span></span>
<span id="cb6-17"><a href="#cb6-17" aria-hidden="true" tabindex="-1"></a>  <span class="kw">content</span>: <span class="fu">attr(</span>data-numerotation<span class="fu">)</span><span class="op">;</span></span>
<span id="cb6-18"><a href="#cb6-18" aria-hidden="true" tabindex="-1"></a>  </span>
<span id="cb6-19"><a href="#cb6-19" aria-hidden="true" tabindex="-1"></a>  <span class="co">/* Conservons un espacement minimal avec le texte */</span></span>
<span id="cb6-20"><a href="#cb6-20" aria-hidden="true" tabindex="-1"></a>  <span class="kw">margin-inline-start</span>: <span class="dv">1</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb6-21"><a href="#cb6-21" aria-hidden="true" tabindex="-1"></a>  </span>
<span id="cb6-22"><a href="#cb6-22" aria-hidden="true" tabindex="-1"></a>  <span class="co">/* Le numéro «flotte» à la fin de la ligne */</span></span>
<span id="cb6-23"><a href="#cb6-23" aria-hidden="true" tabindex="-1"></a>  <span class="kw">float</span>: inline-end<span class="op">;</span></span>
<span id="cb6-24"><a href="#cb6-24" aria-hidden="true" tabindex="-1"></a>  </span>
<span id="cb6-25"><a href="#cb6-25" aria-hidden="true" tabindex="-1"></a>  <span class="co">/* Mise en forme qui distingue le numéro du corps */</span></span>
<span id="cb6-26"><a href="#cb6-26" aria-hidden="true" tabindex="-1"></a>  <span class="kw">opacity</span>: <span class="dv">.75</span><span class="op">;</span></span>
<span id="cb6-27"><a href="#cb6-27" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<figure>
<img src="https://www.lobrassard.net/img/2024-03-22-distique-elegiaque-numerotation.jpg" alt="Résultat visuel d’un poème dont on a balisé la ligne pour la numérotation (ici, la ligne 5).">
<figcaption aria-hidden="true">Résultat visuel d’un poème dont on a balisé la ligne pour la numérotation (ici, la ligne 5).</figcaption>
</figure>
<p>Puisque nous utilisons un « pseudo-élément » pour afficher la numérotation (c’est-à-dire l’élément <code>::before</code>, qui n’est pas présent dans la source du document, mais qui est ajouté par le navigateur web au moment de la consultation), l’usager qui mettrait le texte en surbrillance avec sa souris pour le copier sélectionnera uniquement le texte, pas le numéro. Pratique !</p>
<figure>

<figcaption>
Démonstration du code dans un cadre embarqué (voir sur <a href="https://codepen.io/loupbrun/pen/qBwreMg" target="_blank" rel="external">CodePen</a>).
</figcaption>
</figure>
<h2 id="penser-les-besoins">Penser les besoins</h2>
<p>Bref, il s’agit de modéliser le mieux possible les <strong>besoins éditoriaux</strong> pour ensuite – <em>et seulement ensuite !</em> – réunir les ingrédients techniques. (On voit souvent le contraire arriver en pratique : on plaque des solutions existantes sans nécessairement tenir compte des spécificités propres à un problème, un contexte, une communauté.) Il existe souvent plusieurs solutions possibles, plusieurs morceaux de code différents qui produisent, à première vue, un effet similaire ; sauf que les démarches ne se valent pas toutes, et c’est justement en tenant compte du contexte particulier qu’on peut trouver chaussure à son pied (ou à celui des autres).</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>