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.