Un PDF pro en quelques minutes

Note~40 minutes — avant la pause

Diapos

Ouvrir les diapos en plein écran

Points couverts

À la fin de ce bloc, vous saurez

  • Produire un PDF pro avec format: typst — alternative à LaTeX sans installation, rapide, erreurs lisibles
  • Régler les options essentielles : papersize, margin (d’autres en démo)
  • Voir ce qui se passe entre le .qmd et le .pdf, avec keep-typ: true
  • Personnaliser couleurs, polices et logo via un seul fichier _brand.yml
  • Mixer polices Google et polices locales (source: file) dans la même charte

Le déroulé — My turn → Our turn → Your turn

  • My turn — je présente à partir des diapos (ci-dessus).
  • Our turn — démo live (5-6 min) : on passe le doc en format: typst, puis on lui applique une couleur via _brand.yml.
    1. Passer format: html → format: typst et rendre
    2. Créer _brand.yml avec une couleur + primary, re-rendre → le lien passe en rouge (primary colore les liens ; les titres se coloreront à l’étape 4 de l’exercice, avec le bloc typography.headings)
  • Your turn — à vous l’Exercice 1 ci-dessous : le reste (charte complète, polices, logo, keep-typ).

Exercice 1

Note🧭 Boussole = suivi live · cette page = le détail
  • Boussole Exercice 1 — à suivre pendant l’exercice : les étapes en bref + le chrono, à garder ouverte en second écran.
  • Cette page — le détail complet : étapes pas à pas (« Vous devriez voir »), la doc utile par étape et la correction.
AvertissementÀ vous !

🎯 Objectif : transformer un rapport .qmd HTML en PDF Typst stylé via _brand.yml.

Fichier : exercises/01-document-typst/starter/

📄 Charte fournie : charte-starwars.pdf (dans le starter) — palette, polices, logo et rôles (primary / foreground / background) à traduire en YAML.

💡 Commencez par l’étape 1 seule : faites le passage format: html → format: typst et rendez vous-même, puis regardez le PDF brut (sans charte) avant de toucher à _brand.yml. C’est le réflexe de base — un PDF en une ligne de YAML — qu’on veut ancrer avant d’ajouter le style.

Étapes principales (12 min) — attendues de tous :

# Action Vous devriez voir Doc
1 Ouvrir rapport-starwars.qmd, ajouter format: typst, rendre. PDF généré à la place du HTML, polices et marges par défaut Typst.
2 Personnaliser avec des options : papersize, toc, mainfont, lang: fr… TOC en tête (titrée « Table des matières » grâce à lang: fr), marges/format adaptés, police corps modifiée.
3a Créer _brand.yml et traduire la charte (charte-starwars.pdf, fournie dans le starter) : la palette + les rôles (primary / foreground / background), puis la police corps Google sous typography.fonts → typography.base. Liens en imperial-red, fond crème, police corps Google (Inter) appliquée. (Les titres restent noirs jusqu’à l’étape 4.)
3b Ajouter le logo : bloc logo: imbriqué — images: (un nom → _logo-sw.svg, fourni dans le starter) puis medium: <nom> — pas logo: _logo-sw.svg en direct. Logo en haut à gauche (placement par défaut Quarto ; réglage fin au Bloc 2).
4 Renseigner typography.headings : police locale Star Jedi (_fonts/Starjedi.ttf, source: file) et color: primary — cf. section Typographie de la charte. Titres de section en lettres décoratives Star Jedi, en rouge imperial.

Tableaux et graphiques restés gris ? C’est normal. _brand.yml colore la mise en page (titres, liens, fond, polices), pas les sorties R : vos tableaux gt et votre nuage ggplot ne prennent la charte que si on les branche en R — c’est le Bonus B4 du Bloc 2. Pour l’exercice 1, seules les étapes YAML ci-dessus comptent.

NoteSaviez-vous que… (ça nous est arrivé pour de vrai)

En préparant ce tuto, on a voulu brander nos titres avec une vraie fonte Star Wars, Star Jedi, branchée via _brand.yml. Au rendu : surprise — « Introduction » devient « Hntroduction », « Qui… » devient « Mui… ». Rien de cassé : c’est une fonte décorative, ses initiales majuscules I, O, Q, U sont stylisées (I→H, O→N, Q→M, U→K) ; tout le reste sort net (Anatomie, Conclusion, Top 5…). La morale : une belle fonte de titre, ça a ses règles du jeu — bon à savoir quand on choisit les polices d’une charte.

① Simple — dans le .qmd : on tourne le titre pour éviter l’initiale piégée. Ex. : « Qui sont les colosses de la galaxie ? » → « Les colosses de la galaxie, qui sont-ils ? » (le « qui » minuscule, lui, sort déjà propre). Zéro code.

② Avancé — en Typst : un show-rule qui passe les majuscules1 des titres en minuscules (que Star Jedi rend alors en capitales propres), sans toucher au texte :

format:
  typst:
    include-in-header:
      text: |
        #show heading: it => {
          show regex("\p{Lu}"): c => lower(c.text)
          it
        }

⚠️ Corrige les titres de section (pas le sous-titre du document) ; à éviter sur un titre qui contient du code ou une formule (tout le titre passe en minuscules).

Le format: typst d’une seule ligne (étape 1) devient un bloc indenté, et lang: se met à la racine (au même niveau que format:, pas en dessous) — vous la créez, elle n’est pas dans le starter :

---
lang: fr              # clé racine (francise la « Table des matières »)
format:
  typst:              # le « : typst » de l'étape 1, maintenant un bloc
    papersize: a4
    toc: true
    mainfont: "…"     # à vous de compléter
---

+ Bonus inspection (si temps restant) :

# Action Vous devriez voir Doc
B1 Activer keep-typ: true, ouvrir le .typ généré. Fichier .typ à côté du PDF, syntaxe Typst lisible (= titre, #strong[...], etc.).
Note📖 Doc utile par étape

Pour chaque étape, la page (et la section) à ouvrir — le lien de chaque ligne du tableau y mène directement. La doc Quarto/brand-yml est faite pour être consultée en cours de route :

Le plus souvent, le PDF est encore ouvert dans un lecteur qui le verrouille (fréquent sous Windows) : fermez le lecteur (ou supprimez le .pdf) puis re-rendez. Si le rendu reste figé, supprimez le .pdf (voire le dossier .quarto/) avant de relancer.

Mise en garde🆘 Si vous bloquez après ~5 min sur une étape
  1. Relisez l’objectif + le « Vous devriez voir » de l’étape.
  2. Ouvrez le lien de l’étape (ou le bloc Doc utile par étape ci-dessus) et cherchez la section indiquée.
  3. Ouvrez exercises/01-document-typst/correction/ (filet final). ⚠️ Elle va plus loin que les étapes de l’exercice (elle brande aussi tableaux et graphiques en R, cf. Bonus B4 Bloc 2) : pour l’exo 1, concentrez-vous sur le YAML.

Mémo rapide starter

Exercice 1 — Starter

Mémo du dossier starter/. Contenu et commande de rendu ci-dessous. Le pas-à-pas complet (étapes, indices doc, « Si vous bloquez ») est sur la page de l’exercice.

Contenu du dossier

Fichier Rôle
rapport-starwars.qmd Fichier à éditer — point de départ HTML, à transformer en PDF Typst
charte-starwars.pdf Charte graphique à traduire en _brand.yml (étapes 3-4)
_logo-sw.svg Logo à référencer dans _brand.yml (clé logo:) — étape 3
_fonts/Starjedi.ttf Police locale (étape 4)
exercice-01.Rproj Projet RStudio — double-cliquez-le pour ouvrir l’exercice (répertoire de travail correct)
(pas de _brand.yml) À créer aux étapes 3-4 d’après la charte

Rendu

Depuis ce dossier :

quarto render rapport-starwars.qmd

Sortie initiale : rapport-starwars.html (format par défaut). Après ajout de format: typst : rapport-starwars.pdf.

Bloqué ?

Cf. le bloc « Si vous bloquez » sur le site (page exo) ou la correction/ en dernier recours.

⚠️ Cette correction va plus loin que les étapes de l’exercice : son bloc setup applique en plus la charte aux tableaux gt et graphiques ggplot en R (c’est le Bonus B4 du Bloc 2). Pour l’exercice 1, seules les étapes YAML comptent — tableaux et graphiques restés gris = attendu.

Voir la correction

Notes de bas de page

  1. regex("\p{Lu}") cible toute lettre majuscule Unicode (Lu = Letter, uppercase) — A–Z et les accentuées (É, À, Ç…), là où [A-Z] raterait les accents. lower(c.text) la remplace par sa minuscule, que Star Jedi affiche en capitale propre.↩︎