434 votes

Comment faire une page HTML en format papier A4 ?

Est-il possible de faire en sorte qu'une page HTML se comporte, par exemple, comme une page de format A4 dans MS Word ?

Essentiellement, je veux pouvoir afficher la page HTML dans le navigateur et faire apparaître le contenu dans les dimensions d'une page de format A4.

Pour des raisons de simplicité, je suppose que la page HTML ne contiendra que du texte (pas d'images, etc.) et qu'il n'y aura pas d'éléments suivants <br> par exemple.

En outre, lorsque la page HTML est imprimée, elle est présentée comme une page de format A4.

14 votes

0 votes

1 votes

Le site un vrai "HTML pour l'impression" est à venir ! Voir toute l'histoire à stackoverflow.com/q/10641667/287948 et du W3C Module de fragmentation CSS de niveau 3 qui arrive !

358voto

e-sushi Points 5698

Il y a longtemps, en novembre 2005, AlistApart.com a publié un article sur la façon dont ils ont publié un livre en utilisant uniquement HMTL et CSS. Voir : http://alistapart.com/article/boom

Voici un extrait de cet article :

CSS2 a une notion de média paginé (pensez aux feuilles de papier), par opposition au média continu (pensez aux barres de défilement). Les feuilles de style peuvent définir la taille des pages et leurs marges. Les modèles de page peuvent recevoir des noms et les éléments peuvent indiquer sur quelle page ils veulent être imprimés. En outre, les éléments du document source peuvent imposer des sauts de page. Voici un extrait de la feuille de style que nous avons utilisée :

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Ayant un éditeur basé aux États-Unis, nous avons reçu la taille de la page en pouces. En tant qu'Européens, nous avons continué à utiliser les mesures métriques. CSS accepte les deux.

Après avoir défini la taille et la marge de la page, nous devions nous assurer que les sauts de page étaient placés aux bons endroits. L'extrait suivant montre comment les sauts de page sont générés après les chapitres et les annexes :

div.chapter, div.appendix {
    page-break-after: always;
}

Nous avons également utilisé CSS2 pour déclarer les pages nommées :

div.titlepage {
  page: blank;
}

C'est-à-dire que la page de titre doit être imprimée sur des pages portant le nom "blanc". CSS2 a décrit le concept de pages nommées, mais leur valeur ne devient apparente que lorsque des en-têtes et des pieds de page sont disponibles.

En tout cas

Puisque vous voulez imprimer au format A4, vous aurez bien sûr besoin de dimensions différentes :

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm; /* change the margins as you want them to be. */
}

L'article aborde des sujets tels que la mise en place de sauts de page, etc. et vous pouvez donc le lire entièrement.

Dans votre cas, l'astuce consiste à créer d'abord le CSS d'impression. La plupart des navigateurs modernes (>2005) prennent en charge le zoom et seront déjà en mesure d'afficher un site Web sur la base du CSS d'impression.

Maintenant, vous voulez que l'affichage sur le Web soit un peu différent et que le design soit adapté à la plupart des navigateurs (y compris ceux d'avant 2005). Pour cela, vous devrez créer un fichier CSS Web ou remplacer certaines parties de votre CSS d'impression. Lorsque vous créez un fichier CSS pour le Web, n'oubliez pas qu'un navigateur peut avoir n'importe quelle taille (de "mobile" à "téléviseur grand écran"). Autrement dit, pour le CSS Web, il est préférable de définir la largeur des pages et des images en utilisant une largeur variable (%) afin de prendre en charge le plus grand nombre possible de dispositifs d'affichage et de clients de navigation Web.

0 votes

@A.com Il n'y a pas de px car cela dépendrait du DPI... c'est pourquoi CSS supporte ces unités de mesure évidentes appelées cm et al. Je vous conseille de lire les articles liés et/ou au moins ma réponse. Ainsi, vous constaterez rapidement que votre question n'a pas vraiment de sens. En outre, vous pouvez poster votre question en tant que nouvelle question si les choses ne sont toujours pas claires. Il s'agit d'un site de questions-réponses, pas d'un forum. \o /

0 votes

Merci beaucoup monsieur !

0 votes

Merci. Est-il possible d'insérer des numéros de page pour chaque page ?

70voto

Tim McNamara Points 6478

Il serait assez facile de forcer le navigateur web à afficher la page avec les mêmes dimensions en pixels que l'A4. Cependant, il peut y avoir quelques bizarreries lors du rendu.

En supposant que vos moniteurs affichent 72 dpi, vous pourriez ajouter quelque chose comme ceci :

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  <head>
  <body>
  </body>
</html>

19 votes

En suivant la suggestion de Will Dean (qui a beaucoup de sens), en utilisant les millimètres, vous pouvez forcer le navigateur à calculer la largeur/hauteur en pixels : body { height : 420mm ; width : 297mm ; ... }

52 votes

Le format A4 est en fait 210x297 mm.

8 votes

Alors, enfin un portrait de DINA4 : body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }

33voto

Oded Points 271275

Vous ne pouvez pas. Les sites web sont créés pour des écrans, pas pour des imprimantes.

Vous pouvez ajouter un print.css pour que l'impression du site soit plus agréable, mais vous ne pouvez pas spécifier un format de papier tel que A4.

Vous pouvez trouver plus d'informations sur les feuilles de style d'impression et leur utilisation ici .

La meilleure solution pour l'impression est d'utiliser les PDF, c'est à cela qu'ils servent. Créez un PDF qui contient les mêmes données. Dans ce cas, vous avez un contrôle total sur le format d'impression.

24voto

pir abdul wakeel Points 1040

Créez une section pour chaque page, et utilisez le code ci-dessous pour ajuster les marges, la hauteur et la largeur.

Si vous imprimez au format A4.

Ensuite, l'utilisateur

Size : 8.27in and 11.69 inches

@page Section1 {
size:8.27in 11.69in; 
margin:.5in .5in .5in .5in; 
mso-header-margin:.5in; 
mso-footer-margin:.5in; 
mso-paper-source:0;
}

div.Section1 {
page:Section1;
} 

puis créez un div avec tout votre contenu dedans.

<div class=Section1> 
type your content here... 
</div>

ou

@media print {
            .page-break { height:0; page-break-before:always; margin:0; border-top:none; }
        }
     body, p, span, td, a {font-size:9pt;font-family: Arial, Helvetica, sans-serif;}
     body{margin-left:2em; margin-right:2em;}
    .page{
    height:947px;
    padding-top:5px;
    page-break-after : always;   
    font-family: Arial, Helvetica, sans-serif;
    position:relative;
   border-bottom:1px solid #000;

  }

0 votes

Êtes-vous sûr que ça fonctionne ? Je n'ai pas pu reproduire ce problème dans les dernières versions de Firefox et de Chrome.

0 votes

Oui, je fais surtout du développement pour chrome... ça marche bien pour moi.

3 votes

Je ne peux pas obtenir @page Section1 pour fonctionner avec Chrome 41.0.2272.77. Est-ce que vous vraiment Vous êtes sûr que votre réponse fonctionne ? Essayez, par exemple, de visiter data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div> et ouvrir un aperçu avant impression. Je ne vois aucune différence entre cela et data:text/html,x . Lorsque je remplace @page x avec @page alors cela fonctionne, mais ce n'est pas un sélecteur spécifique à une page.

16voto

Will Dean Points 25866

J'ai utilisé le HTML pour générer des rapports qui s'impriment correctement en taille réelle sur du papier réel.

Si vous utilisez soigneusement les mm comme unités dans le fichier CSS, tout devrait bien se passer, du moins pour les pages simples. Les gens peuvent cependant vous mettre dans l'embarras en modifiant le zoom d'impression dans leur navigateur.

Je crois me souvenir que tout ce que je faisais était une page unique, et que je n'avais donc pas à me soucier de la pagination - cela pourrait être beaucoup plus difficile.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X