Une page de couverture pour les epubs

Salut tout le monde,

on commence petit à petit à avoir des exports bien badass de partout, et la version 28.2 corrigera une bonne partie des bugs qu’on a aujourd’hui tant dans le processus que dans le rendu, notamment des epubs.

Mais voilà, il reste un détail que je n’ai pas eu le temps d’implémenter : la page de couverture.

Une page de couverture dans un ebook, c’est une simple page HTML dont le body ne contient qu’une image qu’on appelle par convention cover.{extension}. Vous trouverez des détails ici

Le truc c’est que nous on doit générer ça automatiquement alors créer une image png de couverture, ça semble complexe, par contre on peut faire du svg. Et c’est là que ça devrait être cool.

Nous avons donc besoin de votre aide pour produire un SVG dans lequel nous pourrions mettre :

• le logo de zds, voire la minitature du tuto;
• la date de publication;
• la licence (c’est un svg);
• la liste des auteurs;
• le titre et le sous-titre du contenu.

J’ai fais ça avec Inkscape pour tester mais le rendu du svg bug en dehors d’Inkscape. https://pastebin.com/xAhLCUQj

En terme de rendu, j’ai juste le titre qui n’est pas là.

autre aspect, les licenses sont des svg natifs c’est dommage d’en faire des png.

Je me suis permis une simplification du fichier :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="210px" height="297px">
  <rect fill="#084561" width="100%" height="100%" />
  <image x="70" y="20" width="70" height="70" xlink:href="https://zestedesavoir.com/media/galleries/7293/530b431b-4e2a-4b70-9dbf-2d9f1c2756d0.png.96x96_q95_crop.png" />
  <foreignObject x="15%" y="90" width="70%" height="200" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <xhtml:p style="color: white; text-align: center; font-size: 18px;">Variables, scopes et closures en Python</xhtml:p>
      <xhtml:p style="color: white; text-align: center; font-size: 10px;">Comprendre leur fonctionnement et en éviter les pièges</xhtml:p>
  </foreignObject>
  <text x="50%" y="205" fill="white" font-size="8" text-anchor="middle">par</text>
  <text x="50%" y="225" fill="white" font-size="12" text-anchor="middle">entwanne</text>
  <image x="5" y="265" height="30" xlink:href="https://zestedesavoir.com/static/images/logo-background.7d3dc9124180.png" />
  <image x="145" y="270" height="20" xlink:href="https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by.svg" />
</svg>

Mais bon, reste à savoir si les foreignObject sont bien gérés, sinon il faut trouver une autre manière de wrapper le texte.

Je pense aussi que d’autres modifications pourraient être faites, comme ajouter un trait orange sous le titre.

pour les xlink:href du moment que j’intègre l’image qu’ils linkent à l’epub, ça devrait aller.

Serait-il possible d’ajouter le logo SVG de Zeste de Savoir ?

D’ailleurs, ne vaudrait-il pas mieux tout mettre dans la couverture ? Les références externes risquent de mal s’afficher alors que si on les inclues directement, on a plus ce risque.

s’il s’agit simplement du logo de zds et du logo des licences tu peux considérer qu’elles seront locales et que je les ajouterai dans mon script de génération à l’archive de l’epub.

Par contre c’est encore mieux si on a un svg pour zds.

J’adore en tout cas !

(L’utilisation des png au lieu des svg étaient uniquement pour un gain de temps pour la maquette)

Personne ne t’accuse, c’est super ce que tu as fais.

Si cette page fait consensus, ça serait simplement cool de l’avoir en 1000x1600. Comme hier, au JZDPTOP @helmazaure a dit qu’il était intéressé par le sujet, je le ping pour qu’il donne son avis

Je voulais tester avec svg.js ils ont peut être un meilleur standard ?