Livres pour enfants 📚

Un petit site pour créer des livres illustrés pour enfants, les lire à l'écran et les imprimer sur des feuilles pour en faire de vrais livres.

• index.html : la bibliothèque, rangée par rayons (Sciences, Les animaux, Petites histoires, Les métiers, Fêtes, Comptines, Princesses, fées et dragons, Fables, Contes traditionnels). Les boutons du haut n'affichent qu'un rayon ; index.html#fables ouvre directement le rayon des fables, et le lien « Bibliothèque » du lecteur ramène au rayon du livre. Le premier rayon, « ✨ Nouveautés » (index.html#nouveautes), reprend les vingt livres ajoutés ou revus le plus récemment, avec leur date. Au-dessus des rayons, on cherche un livre par mot (titre, sous-titre, résumé, auteur, rayon ; sans tenir compte des accents), par âge de l'enfant (les livres dont la tranche d'âge le contient) ou parmi les livres déjà lus ou pas encore. Le cœur d'une carte met le livre dans le rayon « ❤️ Mes favoris » ; un livre lu jusqu'à la dernière page est marqué « ✓ Déjà lu ». Favoris, livres lus et âge choisi restent dans le navigateur (localStorage), sur cet appareil seulement.
• lire.html?livre=<id> : feuilleter un livre (flèches, Espace, Page précédente / suivante, Début / Fin, glisser du doigt ; double page dès 900 px de large, si l'écran est nettement plus large que haut ; lecture à voix haute « 🔊 Écouter », qui surligne le mot prononcé quand la voix du navigateur l'indique ; bouton « Favori »).
• imprimer.html?livre=<id> : aperçu des feuilles et impression.

Le site est entièrement statique (HTML + CSS + JavaScript, sans dépendance ni étape de compilation).

Voir le site

Les illustrations ne sont pas dans le dépôt : elles se dessinent à partir des scripts Python (une trentaine de secondes, Python 3 suffit). Après un git clone, et après chaque git pull qui touche aux illustrations, lancer d'abord :

python3 outils/illustrer/generer.py

• Sur l'ordinateur : ouvrir index.html dans le navigateur, tout simplement.
• Avec un petit serveur (recommandé) : python3 -m http.server, puis http://localhost:8000.
• En ligne : le fichier .github/workflows/pages.yml publie le site sur GitHub Pages à chaque poussée sur main. Il faut l'activer une fois dans Settings → Pages → Build and deployment → Source : GitHub Actions. main doit aussi être la branche par défaut (Settings → General → Default branch) et être autorisée dans Settings → Environments → github-pages → Deployment branches and tags ; sinon la publication échoue avec « Branch "main" is not allowed to deploy to github-pages due to environment protection rules ».

Application installable (PWA)

Une fois le site en ligne (https), on peut l'installer comme une application sur tablette, téléphone ou ordinateur : bouton « 📲 Installer l'application » dans la bibliothèque (Chrome, Edge, Android), ou Partager → Sur l'écran d'accueil sur iPhone / iPad.

Au premier chargement, le service worker (sw.js) enregistre l'interface, le texte de tous les livres du catalogue et leurs couvertures : la bibliothèque s'ouvre et se fouille hors ligne. Les autres images (près de 190 Mo) ne sont pas toutes téléchargées d'un coup, ce qui ralentissait la navigation : chaque livre ouvert une fois est mis en cache en entier, en arrière-plan, et se relit ensuite hors ligne, impression comprise (pratique en voiture ou en vacances : ouvrir avant de partir les livres qu'on emporte).

• Les pages, les scripts et les styles de l'interface sont d'abord demandés au réseau : les modifications apparaissent dès qu'on est connecté.
• Les textes des livres, le catalogue et les nouveautés sont servis tout de suite depuis le cache, puis mis à jour en arrière-plan : une correction de texte apparaît à la visite suivante.
• Les images et les polices sont servies depuis le cache, sans requête réseau.
• Dans la bibliothèque, une couverture n'est chargée et dessinée qu'en approchant de l'écran (loading="lazy", content-visibility).
• Après l'ajout d'un livre ou la modification d'images, augmenter VERSION en haut de sw.js (aujourd'hui "v36", donc "v36" → "v37") pour que le nouveau livre et les nouvelles images soient aussi disponibles hors ligne. Les fichiers inchangés sont seulement revalidés, pas re-téléchargés.
• Sur localhost, tout est demandé au réseau d'abord : les images régénérées s'affichent tout de suite.

Le service worker ne fonctionne qu'à travers un serveur (http://localhost ou le site en ligne), pas en ouvrant index.html directement depuis le disque.

Imprimer un livre

Deux mises en page sont proposées sur la page d'impression :

Mise en page	Feuille	Résultat
Livret à plier	à l'italienne, 2 pages par face, recto verso	on empile, on plie en deux, on agrafe au milieu
Une page par feuille	à la française, 1 page par feuille	à relier (spirale, attaches, classeur)

Papier Lettre (8½ × 11) ou A4. Pour le livret, les pages sont réordonnées automatiquement (imposition) et des pages blanches sont ajoutées avant la quatrième de couverture si le nombre de pages n'est pas un multiple de 4. On peut aussi choisir les faces à imprimer (recto verso, rectos seuls ou versos seuls) et une marge blanche autour des pages (aucune, 5 mm par défaut ou 10 mm).

Dans la fenêtre d'impression du navigateur :

1. échelle 100 %, marges Aucune ;
2. cocher Graphiques d'arrière-plan (sinon les couleurs de fond disparaissent) ;
3. pour le livret : recto verso, retournement sur le bord court.

Sans imprimante recto verso : imprimer d'abord les « Rectos », remettre la pile dans le bac, puis imprimer les « Versos » (faire un essai avec une feuille pour trouver le bon sens).

Ajouter un livre

1. Créer un dossier livres/mon-livre/ (lettres minuscules, chiffres et tirets).

2. Y mettre les images dans livres/mon-livre/images/, ou les dessiner avec outils/illustrer/histoires/mon_livre.py (voir Dessiner les illustrations).

3. Créer livres/mon-livre/livre.js :

   Bibliotheque.ajouter({
     id: "mon-livre",                 // identique au nom du dossier
     rayon: "histoires",              // un des rayons de livres/catalogue.js
     titre: "Mon beau livre",
     sousTitre: "Facultatif",
     auteur: "Prénom Nom",
     illustrateur: "Prénom Nom",
     age: "3 à 6 ans",
     couleur: "#e8590c",              // couleur du livre (couverture, dos, titres)
     resume: "Texte de la quatrième de couverture.",
     pages: [
       { type: "couverture", image: "images/couverture.jpg" },
       { type: "titre", image: "images/petit-dessin.png", texte: "Pour Léa." },
       { image: "images/p1.jpg", texte: "Il était une fois…" },
       { image: "images/p2.jpg", disposition: "pleine-page", texte: "Texte dans une bulle." },
       { type: "texte", texte: "Fin" },
       { type: "quatrieme" },
     ],
   });
   

4. Ajouter "mon-livre" dans livres/catalogue.js (l'ordre de cette liste est l'ordre d'affichage dans chaque rayon). Les rayons possibles sont listés dans RAYONS, au bas du même fichier : on peut en ajouter un (identifiant, nom, icône, description).

5. Augmenter VERSION dans sw.js pour la lecture hors ligne, puis lancer python3 outils/nouveautes.py : il réécrit livres/nouveautes.js, la liste des vingt livres ajoutés ou revus le plus récemment, d'après l'historique git (les fichiers pas encore validés comptent pour aujourd'hui ; un commit qui touche plus de dix livres à la fois, comme une retouche d'ensemble, ne compte pas comme une reprise). La publication le relance de toute façon.

6. Lancer python3 outils/verifier-images.py (la publication échoue si cette vérification trouve une erreur). Si les images viennent du générateur, relancer aussi generer.py et valider le script de dessin avec outils/illustrer/empreintes.txt (les SVG, eux, ne sont pas suivis par git). Des images faites à la main (PNG, JPG ou SVG) se valident avec le livre ; un SVG fait à la main s'ajoute avec git add -f, car .gitignore écarte les SVG de livres/*/images/.

Types de pages

type	Contenu
couverture	image plein cadre + titre, sous-titre et auteur
titre	page de titre : titre, petite image, crédits, dédicace (texte)
illustration (par défaut)	une image et un texte
texte	texte seul, centré, en grand (ex. « Fin ») ; image facultative
quatrieme	dos du livre : texte (ou resume du livre), image, âge
vide	page blanche

Pour les pages illustration, disposition peut valoir :

• image-haut (par défaut) : image en haut, texte en dessous ;
• image-bas : texte en haut, image en dessous ;
• pleine-page : image sur toute la page, texte dans une bulle en bas (ou en haut avec positionTexte: "haut").

Autres options d'une page : description (texte alternatif de l'image, aussi affiché dans la revue des images), couleur, fond (couleur de fond de la page) et, sur la couverture, titre pour remplacer le titre du livre. Un texte peut contenir plusieurs paragraphes séparés par une ligne vide (\n\n). Mettre numeros: false sur le livre pour masquer les numéros de page, et langue (par défaut "fr-FR") pour choisir la langue de la lecture à voix haute.

Conseils pour les images

• Formats : SVG (net à toutes les tailles), PNG ou JPG.
• Les images sont affichées en entier, sans couper les personnages. Une image carrée convient pour image-haut / image-bas. Sur une couverture, elle est alignée en bas ; sur une pleine-page, en haut pour laisser de la place au texte. Un format portrait convient aussi à ces deux types de pages.
• Pour l'impression, viser au moins 1500 px de haut pour une image pleine page.

Organisation du code

index.html, lire.html, imprimer.html
css/site.css        interface du site + règles d'impression
css/pages.css       apparence des pages (en unités cqw/cqh : même rendu écran/papier)
js/livres.js        chargement des livres, rendu d'une page, favoris et livres lus
js/bibliotheque.js  page d'accueil
js/lecteur.js       lecteur
js/imposition.js    ordre des pages pour le livret
js/impression.js    page d'impression
js/pwa.js           enregistrement du service worker, bouton « Installer »
sw.js               service worker (cache hors ligne)
manifest.webmanifest, icones/   description de l'application et icônes
polices/            polices Andika et Fredoka (licence OFL), hébergées avec le site
livres/             un dossier par livre + catalogue.js (liste et rayons)
livres/nouveautes.js   les vingt derniers livres ajoutés ou revus (écrit par outils/nouveautes.py)
outils/nouveautes.py   écriture de livres/nouveautes.js d'après l'historique git (non publié)
outils/illustrer/   générateur des illustrations SVG (Python, non publié)
outils/illustrer/empreintes.txt   empreinte de chaque SVG généré (suivie par git)
outils/verifier-images.py   vérification des livres et des images (non publiée)
outils/imposition.test.js   tests de l'ordre des pages du livret (non publiés)
outils/revue-images.html    revue interactive des illustrations
outils/REVUE-IMAGES.md      compte rendu de la revue, livre par livre
AGENTS.md           consignes pour les agents de code (non publiées)
.claude/skills/     compétences nouveau-livre, direction-artistique, retoucher-livre (non publiées)
.claude/hooks/      dessin des SVG au démarrage d'une session Claude Code dans le cloud

Dessiner les illustrations

Les illustrations de tous les livres du catalogue (262 livres, 4 102 pages, 3 535 SVG) sont générées par un petit outil Python, sans aucune dépendance, dans outils/illustrer/ :

• base.py : décors (ciel, collines, intérieurs, nuit…), personnages animaux vus de face avec leurs expressions (sourire, rire, triste, fache, surpris, dort…) et leurs poses (salut, haut, porte, calin, danse, applaudit, victoire, coucou, chut, etire, epaules, marche, et les poses dynamiques court, saute, lance, designe, pousse, equilibre…, et les attitudes repos, dos, ventre, surprise, mains_basses, gratte). Sans bras=, la pose suit l'humeur (POSES_HUMEUR : mains dans le dos ou sur la hanche au repos, sur le ventre quand on rit, levées de surprise, bras croisés de colère…). Les personnages (animaux de perso() et humains de personne()) reçoivent automatiquement un liseré, un modelé (ombre et reflet), des mains avec un pouce et des doigts, des doigts de pied, une petite ombre au sol, une tête légèrement penchée selon l'expression et des textures : pelage (pelage()), rayures du chat, taches de la grenouille, plis de l'éléphant ; queues et grandes oreilles qui suivent l'humeur ; trame du tissu (tissu()), coutures (couture()), boutons, semelles, sourcils et mèches de cheveux ; plumes (plumage()) des oiseaux et écailles du dragon, peau grenue (ecailles_peau()) de la tortue ; les paramètres pas= ("marche", "pointe", "saute"), penche= (degrés) et ombre= permettent de les régler. Un livre qui dessine de vraies ombres portées coupe l'ombre douce avec OMBRES_DOUCES = False dans son script ; l'ombre douce s'allonge du côté opposé à la lumière (en haut à gauche), sauf dans les livres de sciences où elle reste centrée (SENS_OMBRE dans un script pour choisir : 1 vers la droite, 0 centrée) ; les corps et les têtes sont remplis de dégradés en relief, le visage glisse en vue de trois quarts quand regard= part de côté, et le corps se penche pour courir, marcher, danser ou tirer (INCLINE) ;
• relief des décors : , , et fabriquent des dégradés partagés (identifiant tiré de la définition, ajoutés aux de la page qui les emploie). Ciel avec brume d'horizon, sol plus sombre et texturé au premier plan, collines précédées d'une chaîne lointaine à demi fondue dans le ciel (trois plans), arbres, sapins, maisons (tuiles, bardage, linteaux, appuis, ombre sous le toit), châteaux (pierres, tuiles), montagnes (, versant à l'ombre), intérieurs (parquet en perspective, pénombre des coins), fenêtres, portes et meubles en relief ;

python3 outils/illustrer/generer.py               # tous les livres
python3 outils/illustrer/generer.py ours-gateau   # un seul livre

Les images sont écrites dans livres/<id>/images/. Il reste à écrire le texte dans livres/<id>/livre.js.

Les SVG ne sont pas suivis par git : la publication les redessine. À leur place, generer.py réécrit outils/illustrer/empreintes.txt, une ligne par image (empreinte SHA-256 abrégée, puis <id>/<nom>), que l'on valide avec le script de dessin. Son diff montre exactement quelles images un changement a modifiées :

python3 outils/illustrer/generer.py > /dev/null && git diff --stat -- outils/illustrer/empreintes.txt
git diff -- outils/illustrer/empreintes.txt   # les images changées, une par ligne

Une ligne changée dans un livre qu'on ne voulait pas toucher signale une régression d'un module partagé. Pour voir les images elles-mêmes, la planche avant/après de retoucher-livre redessine l'ancienne version à partir des scripts d'un commit donné.

Les règles de composition (plans variés, gros plans, lumière, âges des personnages, décors, échelles, petite bête) sont réunies dans la compétence direction-artistique ; la compétence retoucher-livre décrit comment reprendre les images d'un livre existant, avec une planche avant/après (.claude/skills/retoucher-livre/avant-apres.js).

Revoir les illustrations

Ouvrir la revue des images pour parcourir toutes les illustrations du catalogue, filtrer par livre ou par type d’image, et comparer les dessins originaux avec les pages mises en forme. Chaque dessin est accompagné du texte de la page et de sa description.

La revue détaillée conserve les contrôles par livre et une comparaison avant/après.

python3 outils/verifier-images.py

Elle demande Python 3 et Node.js (pour lire les fichiers livre.js). Elle inclut aussi les livres hors catalogue : champs requis (id, titre, au moins une page, rayon connu pour les livres du catalogue), types et dispositions de page inconnus, images manquantes ou en chemin absolu, images que plus aucune page n'utilise, SVG mal formés, dimensions invalides et références internes absentes, SVG générés périmés (différents de empreintes.txt : relancer generer.py). Elle se lance donc après generer.py. Elle signale aussi les oublis qui laisseraient une page vide ou bancale : couleur, age ou resume absents, page illustration ou texte sans texte, et quelques fautes de typographie (espaces répétées ou en trop, espace avant une virgule ou un point, ... au lieu de …, guillemets droits " au lieu de « »). L'apostrophe droite ' reste acceptée.

L'ordre des pages du livret à plier (js/imposition.js) est testé à part, pour toutes les longueurs de livre de 1 à 40 pages :

node --test

Avant chaque publication, GitHub Actions dessine toutes les illustrations avec generer.py : si leurs empreintes diffèrent de outils/illustrer/empreintes.txt, la publication s'arrête. Puis elle lance cette vérification et ces tests, et réécrit livres/nouveautes.js avec outils/nouveautes.py (d'où un checkout de tout l'historique). Le site est publié sans outils/illustrer/, les scripts Python ni les tests ; la revue des images (outils/revue-images.html) reste en ligne.