Mise en page

Cette page explique comment contrôler la structure et la mise en page de vos pages PDF : dimensionnement, marges, conteneurs pleine page, fonds pleine page et sauts de page. Pour styliser votre contenu avec CSS, consultez CSS personnalisée.

Taille de page et marges

Vous pouvez modifier la taille des pages de votre Document dans l’onglet Paramètres du Template. Sélectionnez l’une des tailles prédéfinies, ou définissez une taille personnalisée qui correspond précisément à vos besoins.

Les tailles sont exprimées en millimètres. Si vous avez besoin de pouces, 1 pouce = 25,4 mm.

Tailles de page par défaut en pixels

Pour les Templates utilisant le moteur v5

Pour les Templates utilisant les anciens moteurs

Ajouter des marges

Vous pouvez ajouter des marges en haut, à gauche, à droite et en bas de votre Document dans l’onglet Paramètres du template.

Quand utiliser les marges : Si vous définissez un en-tête et/ou un pied de page dans les paramètres, vous devrez leur laisser de l’espace en ajoutant une marge en haut et/ou en bas. Si vous avez un document très simple et souhaitez de belles marges autour, cela fonctionne aussi.

Quand ne pas utiliser les marges : Si vous avez besoin d’une couleur ou image de fond pleine page, les marges réduiront la taille du contenu imprimé et empêcheront la couleur ou l’image d’aller de bord à bord. Si vous créez un document de type présentation et que chaque page de contenu doit remplir une page entière en utilisant les tailles en pixels listées ci-dessus, n’utilisez pas de marges sinon cela perturbera la mise en page.

Mise en page sur une seule page

Si vous souhaitez créer un conteneur qui occupe toujours une page entière (ni plus, ni moins), vous pouvez le définir ainsi :

.page {
  /* Définition d’une page A4 portrait */
  height: 1120px;
  width: 793px;

  /* Empêchera tout contenu comme les grandes images de perturber */
  /* la mise à l’échelle automatique du contenu imprimé */
  overflow: hidden;

  /* Permettra au contenu positionné en absolu d’être */
  /* placé relativement à la page par défaut */
  position: relative;
}

Vous pouvez ensuite l’utiliser dans votre HTML :

<div class="page">
  Contenu pour une seule page
</div>

Utiliser un fond pleine page

Si vous souhaitez appliquer un fond qui prend la page entière, utilisez la technique ci-dessus et définissez l’image de fond sur votre page :

.page-with-bg {
  background-image: url('url-ou-datauri-du-fond');
  background-size: cover;
}

<div class="page page-with-bg">
  Contenu pour une seule page
</div>

Sauts de page

Forcer un saut de page

La manière la plus simple de forcer un saut de page est d’utiliser la CSS. Vous pouvez utiliser la propriété page-break-before pour définir une classe comme celle-ci :

.page-break {
  page-break-before: always;
}

Vous pouvez ensuite appliquer cette classe à tout élément avant lequel vous souhaitez insérer un saut de page.

Empêcher un saut de page

Si vous souhaitez éviter qu’une section de votre document soit coupée entre deux pages, vous pouvez utiliser la propriété CSS page-break-inside :

.avoid-page-break {
  page-break-inside: avoid;
}

Si vous appliquez cette classe à un élément, elle n’aura aucun effet pour un élément au milieu de la page, mais s’il risque d’être coupé entre deux pages, un saut de page sera inséré avant celui-ci.

Questions fréquentes

Quelle est la taille d’une page A4 en pixels pour les templates PDFMonkey ?

Sur le moteur v5, une page A4 fait 795×1123 pixels. Sur les anciens moteurs (v2–v4), elle fait 793×1120 pixels. Le format US Letter fait 815×1056 (v5) ou 815×1055 (anciens moteurs).

Comment forcer un saut de page dans un PDF PDFMonkey ?

Ajoutez une classe CSS avec page-break-before: always et appliquez-la à tout élément où vous souhaitez le saut. Par exemple : .page-break { page-break-before: always; }.

Comment mettre un fond pleine page dans un template PDFMonkey ?

Créez un conteneur dimensionné pour correspondre exactement à une page (par ex. 793×1120px pour un A4), définissez overflow: hidden et position: relative, puis appliquez une background-image avec background-size: cover. N’utilisez pas de marges de page, sinon elles réduiront la zone de contenu.

Comment empêcher le contenu de se couper entre deux pages ?

Appliquez la propriété CSS page-break-inside: avoid à tout élément que vous souhaitez garder sur une seule page. Si l’élément devait être coupé, un saut de page est inséré avant à la place.