Aide-mémoire Twine

Harlowe 3 · Creative Media 2026

Créer un passage

Écrivez un nom entre doubles crochets dans un passage. Twine crée le nouveau passage et trace la flèche entre les deux.

[[Axolotl]]

Pour renommer un passage, double-cliquez sur son titre. Twine met à jour les liens qui pointent vers lui.

Relier des passages

Une flèche ou une barre verticale sépare ce que lit le lecteur de la destination. Les quatre formes ci-dessous mènent au même endroit.

`[[Héron]]`	Le nom du passage est aussi le texte visible
`[[se cache du->Héron]]`	La flèche pointe vers le passage
`[[Héron<-se cache du]]`	La même chose, à l’envers
`[[se cache du\|Héron]]`	La barre sépare le texte et la destination

Barre verticale | : AltGr + 6 sur un clavier AZERTY · Option + Maj + L sur un Mac français · Maj + \ sur un clavier anglais.

Images et vidéo

Du HTML normal dans le passage. Le fichier doit être en ligne, avec son adresse complète. Clic droit sur une image, puis copier l’adresse de l’image.

<img src="https://example.com/axolotl.jpg">
<img src="https://example.com/axolotl.jpg" width="400">

<video src="https://example.com/clip.mp4" autoplay loop muted width="100%"></video>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/ID"></iframe>

L’identifiant YouTube est la partie après watch?v= dans le lien.

CSS : où l’écrire

Dans la feuille de style de l’histoire, pas dans un passage. Ouvrez le menu Story et cliquez sur Stylesheet. Elle s’applique à toute l’histoire.

`tw-story`	Toute l’histoire : fond, couleur du texte, typographie
`tw-passage`	Seulement le passage visible : marges et largeur
`tw-link`	Les liens. Sans cela, ils restent bleus. Accepte color, font-weight, text-decoration
`tw-link:hover`	Un lien sous la souris
`tw-sidebar`	Les flèches annuler et rétablir
`[tags="..."]`	Les étiquettes des passages, pour donner à chacune son propre aspect

CSS : recettes

Copiez, collez, changez les valeurs.

tw-story {
  background-color: #111111;
  color: #eeeeee;
  font-family: Georgia, serif;
  font-size: 18px;
}

tw-link {
  color: #d4a017;
  font-weight: bold;
}

tw-link:hover {
  color: #ffffff;
}

[tags="amphibien"] {
  background-color: #0d2b2b;
}

CSS : autres recettes

Une image derrière tout

tw-story {
  background: url("https://example.com/fond.jpg") center / cover;
}

Un cadre pour lire

tw-passage {
  background: rgba(0, 0, 0, 0.6);
  padding: 2em;
}

Une police Google Fonts. L’import va sur la toute première ligne de la feuille de style

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

tw-story {
  font-family: "Inter", sans-serif;
}

Masquer les flèches annuler et rétablir

tw-sidebar {
  display: none;
}

Effets dans un passage

Les modificateurs de Harlowe mettent en forme une partie d’un seul passage.

(text-colour: #ff2bd6)[Le signal est revenu]
(text-style: "blur")[un souvenir]
(font: "Courier New")[FLASH SPÉCIAL]
(transition: "dissolve")[Nous sommes en 2050]

Signez

Dans le premier passage : « Created by » et les noms complets de tous les membres de l’équipe.

Created by
Prénom Nom, Prénom Nom, Prénom Nom

Exporter et sauvegarder

Menu Build, option Publish to File. Vous obtenez un fichier .html qui s’ouvre dans n’importe quel navigateur et peut être mis en ligne sur un serveur.

Twine enregistre dans votre navigateur. Utilisez Library › Archive pour garder une copie de sauvegarde.