Introduction

De nombreux utilisateurs de WordPress insèrent des fichiers PDF directement dans leurs pages ou articles grâce au plugin PDF Embedder. Cependant, il arrive que l’affichage ne soit pas centré et que le document paraisse collé sur la gauche. La question qui revient souvent est donc la suivante : comment forcer le PDF à se centrer correctement dans la page, quelle que soit sa taille ?

Le problème rencontré

Lors de l’intégration d’un PDF avec le shortcode :

[pdf-embedder url=https://exemple.fr/mon-document.pdf]

le plugin génère automatiquement une structure HTML comprenant plusieurs balises <div> et <canvas>. Chaque élément se voit attribuer un element.style inline, par exemple :

<div class="pdfemb-viewer" style="width: 425.333px; height: 632px; display: block; margin: 0 auto;">
   <div class="pdfemb-pagescontainer" style="overflow: hidden; width: 424px; height: 600px;">
      <div class="pdfemb-inner-div pdfemb-page1" style="width: 424px; height: 602px;">
         <canvas class="pdfemb-the-canvas" style="width: 424px; height: 600px;"></canvas>
      </div>
   </div>
</div>

Même si le plugin applique ses propres dimensions, l’alignement horizontal n’est pas toujours respecté. L’utilisateur souhaitait obtenir un affichage centré avec des dimensions fixes proches du format A4, par exemple 425 px de large pour 600 px de haut.

Les premières pistes

La première idée fut de modifier directement element.style généré par le plugin. Mais il faut savoir qu’un style inline est prioritaire sur une règle CSS classique. La seule manière de le surpasser sans toucher au JavaScript du plugin est donc d’utiliser le mot clé !important dans une feuille CSS.

Une tentative avec la classe interne du canvas a été proposée :

.pdfemb-the-canvas {
    width: 425.333px !important;
    height: 632px !important;
    display: block !important;
    margin: 0 auto !important;
}

Cette approche fonctionne visuellement, mais l’attribut inline d’origine reste présent dans le DOM. Autrement dit, on ne modifie pas le element.style mais on le neutralise. Pour certains, ce n’est pas gênant. Pour d’autres, l’objectif est que ce soit réellement le bloc parent qui soit centré.

La solution efficace

La clé a été de cibler directement le conteneur principal généré par le plugin, celui qui porte la classe .pdfemb-viewer. C’est ce div qui englobe le PDF et qui doit être centré dans la page. Le code suivant a permis de résoudre le problème :

.pdfemb-viewer {
    display: block !important;
    margin: 0 auto !important;
}

En appliquant ce style dans le panneau CSS additionnel de WordPress, le PDF s’affiche désormais bien au milieu, quelle que soit sa taille. La largeur reste contrôlée par le plugin, mais l’alignement est corrigé.

Conclusion

Le plugin PDF Embedder ne propose pas d’option native pour centrer un document. En revanche, un simple ajout de quelques lignes de CSS permet de corriger le rendu sans avoir besoin de modifier le code du plugin ni de passer par du JavaScript.

Si vous avez rencontré le même type de difficulté, ou si vous souhaitez un accompagnement pour ajuster l’intégration de vos PDF, n’hésitez pas à nous contacter afin d’obtenir une aide personnalisée adaptée à votre site WordPress.