Une page de couverture pour les epubs

pourqu'on soit bien compatible avec les liseuses

a marqué ce sujet comme résolu.
Auteur du sujet

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.
+3 -0

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>
Epub cover
Epub cover

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.

Édité par entwanne

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.

ache.one                 🦹         👾                                🦊

+0 -0

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

A-312

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

ache.one                 🦹         👾                                🦊

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte