Guide d’écriture

Quelques recommandations

  • La longueur d’un article recommandée est entre 1500 et 2000 mots. Mais ce n’est en aucun cas un impératif.
  • Les caractères en majuscules doivent être accentués (dixit Wikipédia).
  • L’adjectif numéral ordinal « première » s’abrège de la façon suivante : 1re (et non 1ère). Les autres adjectifs numéraux ordinaux (deuxième, troisième…) s’abrègent de la façon suivante : 2e, 3e (et non 2ème, 3ème) (dixit Wikipédia).
  • Privilégiez une écriture inclusive et ne supposez pas que votre lectorat est masculin. Cela peut passer par une forme doublée (« les utilisateurs et les utilisatrices de votre site »), une formule neutre (« les personnes qui utilisent votre site »), un point médian (« les utilisateurs·rices ») ou des parenthèses (« les utilisateurs(rices) »). (À lire : Écriture inclusive : faisons le point autour de la cheminée.)
  • Préférez écrire les nombres en toutes lettres. Ça fluidifie la lecture. Par exemple : « Voici trois licornes. » plutôt que « Voici 3 licornes ».
  • Évitez les anglicismes inutiles. (À lire : On dit numérique et pas digital (bordel) !)
    • Si malgré tout vous utilisez des termes anglais (ou de toute autre langue que le français), il convient de déclarer le changement de langue à l’aide du bouton « Add Lang Attribute » disponible dans la barre d’outils.
    • De même, si vous insérez un lien vers un site non francophone, il convient d’indiquer la langue de la page de destination sur le lien. Le lien peut être rédigé en HTML <a href="…" hreflang="en">…</a> ou avec le KirbyTag (\link: … hreflang: en text: …)
  • Les acronymes et abréviations devraient être explicitées. Trois options sont possibles :
    • soit directement dans le texte, en ajoutant la signification entre parenthèse. Par exemple : « HTML (Hypertext Markup Language) » ;
    • soit via la syntaxe Markdown Extra pour les abréviations ;
    • soit en utilisant le tag HTML <abbr>.
  • Les émojis sont à insérer en respectant un motif spécifique :
    • en entité HTML — que vous pourrez trouver sur symbl.cc, entre autres ;
    • encapsulés dans un élément <span>, affublé d’un attribut role="img" et intitulé à l’aide de l’attribut aria-label (en privilégiant l’intitulé Unicode de l’émoji).

Mise en forme

Le site utilise Kirby 4 avec un thème personnalisé.

Le contenu est à rédiger en Markdown (Markdown Extra avec des Kirbytags) et peut accepter le HTML brut.

Notes de pied de page

Les notes de bas de page suivent les règles de rédaction de Markdown Extra : Note de bas de page.

Voilà un texte [^1]

…

[^1]: et voici la note

Pas de lettrine

Par défaut, une lettrine est appliquée en tout début d’article. Si ce n’est pas souhaité, on peut désactiver cet effet en ajoutant une classe no-cap-please sur le paragraphe correspondant.

<p class="no-cap-please">Exemple.</p>

Code

La mise en forme d’exemples de code se fait avec Prism et son thème Tomorrow Night. Le site inclut la coloration syntaxique pour les langages suivants (tels que définis dans Prism) : markup, css, clike, javascript, css-extras, markup-templating, http, php, scss, ruby.

Pour créer un bloc de code, il faut utiliser la syntaxe Markdown (```), et insérer l’extension du langage souhaité. Par exemple, en écrivant le texte suivant :

```js
console.log("Exemple.")
```

le bloc suivant sera affiché :

console.log("Exemple.")

Section

Il est possible de marquer visuellement différentes sections au sein d’un article afin de rendre la mise en page moins monotone, en particulier sur les articles les plus longs. Pour cela, on englobe la partie concernée d’une balise div avec la class section :

<div class="section" markdown="1">…</div>

Par souci de compatibilité avec la syntaxe Markdown à l’intérieur de la balise div, il ne faut pas oublier le markdown=1.

Cette notion de section n’a pas de rapport avec la balise HTML <section>.

Citation

Il est possible de mettre en valeur des citations :

Qui ne tente rien n’a rien ! Même si souvent, qui tente n’a rien quand même.
— Personne pragmatique, dans Proverbe

Pour ce faire, il vous suffit simplement d’utiliser la balise <blockquote> dans laquelle le titre de l’œuvre citée devrait être encadrée par la balise <cite> — mais pas l’auteur ou l’autrice, utilisant plutôt un traitement en gras.

<blockquote>
    <p>Qui ne tente rien n’a rien ! Même si souvent, qui tente n’a rien quand même.<br>
    — <strong>Personne pragmatique</strong>, dans <cite>Proverbe</cite></p>
</blockquote>

Mise en avant

Pour mettre visuellement en avant une portion de texte qui n’est pas une citation ou n’a pas de valeur sémantique particulière, vous pouvez utiliser la classe pullquote.

<p class="pullquote">Ceci est un texte mis en avant visuellement.</p>

Le code ci-dessus s’affichera ainsi :

Ceci est un texte mis en avant visuellement.

Image et Légende

Pour insérer une image, la meilleure manière est d’utiliser le KirbyTag image (voir la Doc sur Kirby). Ce tag doit avoir un attribut alt pour l’alternative textuelle. Il peut aussi avoir l’attribut link, qui peut avoir comme valeur une URL (pour que l’image ait un lien qui renvoie vers cette URL) ou le mot-clé self (pour que l’image ait un lien vers le fichier de l’image).

Les images peuvent être annotées d’une légende qui sera visible juste en dessous, en utilisant l’attribut caption dans le KirbyTag (si nécessaire on peut également créer manuellement un texte de légende qui héritera de la même présentation en ajoutant une classe caption-text).

Vous pouvez aligner une petite image à gauche, à droite ou au centre de la page en utilisant les classes alignleft, alignright ou aligncenter, et vous pouvez étendre une grande image au delà des marges en utilisant la classe size-large.

(\image: … alt: Texte alternatif link: self)

(\image: … alt: Texte alternatif caption: Légende de l’image, affichée juste dessous)

(\image: … alt: Texte alternatif imgclass: aligncenter size-large)

Vidéos

Pour insérer une vidéo externe au sein d’un article, vous pouvez utiliser le KirbyTag video. Ce tag fonctionne avec les principaux hébergeurs de vidéos (YouTube, Vimeo…) mais aussi avec les fichiers téléversés dans le CMS, et il accepte un grand nombre d’arguments (voir la Doc sur Kirby).

(\video: https://vimeo.com/…)