Un pdf avec des images pleine page

  1. Cas 1 Images sans texte
  2. Cas 2 Images contenant du texte
  3. Script « imprime.sh » de création du fichier pdf
  4. Du beau travail

Cas 1 Images sans texte

Un exemple de fichier large.xhtml dans un document epub. Utilisation de la propriété background.

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beautés Des Années 30.</title>
<link type="text/css" rel="stylesheet" href="perso.css"/>
</head>

<body>
<style>
body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url("01.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<style>

.bg2 {
/* The image used */
background-image: url("02.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<style>

.bg3 {
/* The image used */
background-image: url("03.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<style>

.bg4{
/* The image used */
background-image: url("04.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
</style>


<style>

.bg5 {
/* The image used */
background-image: url("05.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<style>

.bg6 {
/* The image used */
background-image: url("06.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<div class="bg"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="bg5"></div>
<div class="bg6"></div>
</body>
</html>

Rendu en pdf.

Cas 2 Images contenant du texte

Plus logique: le logiciel d’impression imprime en A4, les images sont en format A4 (827*1170 pixels en 100 dpi)

Le code html est dans un fichier sans tag de titre (le titre est dans le fichier html précédent)

titre.xhtml

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Musidora</title>
<link type="text/css" rel="stylesheet" href="perso.css"/>
</head>

<body>
<h1>Interview dans Cinémagazine.</h1>
<p class="subtitle"><a href="https://gallica.bnf.fr/ark:/12148/bpt6k2004743s/f5.item">Cinémagazine N°27 - 22 juillet 1921</a> - Interview de Musidora.</p>
<div style="page-break-before:always"></div>


</body>
</html>

pages-A4.xhtml

La classe a4 est definie dans le css

.a4 {
height: 100%;
margin: 0;
background-position: left;
background-repeat: no-repeat;
background-size: cover;
}
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Musidora</title>
<link type="text/css" rel="stylesheet" href="perso.css"/>
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>

<body class="a4">
<img alt="Image" src="Cinémagazine_1-A4.jpeg" />
<img alt="Image" src="Cinémagazine_5-A4.jpeg" />
<img alt="Image" src="Cinémagazine_6-A4.jpeg" />
<img alt="Image" src="Cinémagazine_7-A4.jpeg" />
<img alt="Image" src="Cinémagazine_8-A4.jpeg" />
</body>
</html>

Rendu pdf

Script « imprime.sh » de création du fichier pdf

Basé sur ebook-convert de la suite Calibre:

Description des options de sortie en pdf

Mon script d’impression pour créer un fichier pdf est paramétré en A4 avec des marges de 20 pt (0,7 cm) , ce qui laisse la place pour imprimer l’entête et le pied-de-page.

#!/bin/bash
#set -x
#
#
nom=$1
file=${nom%????}
echo $file
#
# date et heure au format local donc en français
dateimp=$(date +%c)
#
ebook-convert "$nom" "$file""$dateimp".pdf --paper-size a4 --pdf-serif-family "Apple Garamond" --pdf-page-margin-left 20 --pdf-page-margin-right 20 --pdf-page-margin-top 20 --pdf-page-margin-bottom 20 --pdf-header-template "<header style='justify-content: space-between; font-size: 50%; color: blueviolet;'> <div>_SECTION_</div> </header>" --pdf-footer-template "<footer style='justify-content: space-between; font-size: 50%; color: blueviolet;'> <div>_AUTHOR_</div> <div>_TITLE_</div><div>$dateimp</div><div> Page _PAGENUM_ / _TOTAL_PAGES_</div> </footer>"

Du beau travail

Par Bidouille De Bian

Bidouilleur sur Linux Debian 10 (Buster). Débutant dans le blog sur Wordpress.

Concevoir un site comme celui-ci avec WordPress.com
Commencer