Comment créer une page HTML en format A4?

Est-il possible de faire se comporter une page HTML, par exemple, comme une page A4 dans MS Word?

Essentiellement, je veux pouvoir afficher la page HTML dans le navigateur et décrire le contenu dans les dimensions d'une page au format A4.

Par souci de simplicité, je suppose que la page HTML ne contiendra que du texte (pas d'images, etc.) et qu'il n'y aura pas de <br>balises par exemple.

De plus, lorsque la page HTML est imprimée, elle apparaît sous forme de pages papier au format A4.

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

Voici un extrait de cet article:

CSS2 a une notion de média paginé (pensez à des feuilles de papier), par opposition à un média continu (pensez à des 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 nommée ils souhaitent être imprimés. De plus, les éléments du document source peuvent forcer les 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, on nous a donné la taille de la page en pouces. Nous, Européens, avons poursuivi 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 qu'il y avait des sauts de page 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;
}

De plus, nous avons utilisé CSS2 pour déclarer les pages nommées:

div.titlepage {
  page: blank;
}

Autrement dit, la page de titre doit être imprimée sur les pages portant le nom «vierge». 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 tous cas…

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

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

L'article plonge dans des choses comme la définition de sauts de page, etc., donc vous voudrez peut-être lire cela complètement.

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 pourront déjà afficher un site Web basé sur le CSS imprimé.

Maintenant, vous voudrez rendre l'affichage Web un peu différent et adapter la conception entière à la plupart des navigateurs (y compris les anciens, antérieurs à 2005). Pour cela, vous devrez créer un fichier CSS Web ou remplacer certaines parties de votre CSS d'impression. Lors de la création de CSS pour l'affichage Web, n'oubliez pas qu'un navigateur peut avoir N'IMPORTE QUELLE taille (pensez: «mobile» jusqu'aux «téléviseurs grand écran»). Signification: pour le CSS Web, la largeur de la page et la largeur de l'image sont mieux définies en utilisant une largeur variable (%) pour prendre en charge autant de périphériques d'affichage et de clients de navigation Web que possible.

EDIT (26-02-2015)

Aujourd'hui, je suis tombé sur un autre article plus récent de SmashingMagazine qui plonge également dans la conception pour l'impression avec HTML et CSS ... juste au cas où vous pourriez utiliser un autre tutoriel.

EDIT (30-10-2018)

Il a été porté à mon attention que ce sizen'est pas du CSS3 valide, ce qui est en effet correct - j'ai simplement répété le code cité dans l'article qui (comme indiqué) était du bon vieux CSS2 (ce qui est logique lorsque vous regardez l'année de l'article et cette réponse a été publiée pour la première fois). Quoi qu'il en soit, voici le code CSS3 valide pour votre commodité de copier-coller:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Dans le cas où vous pensez avoir vraiment besoin de pixels ( vous devriez en fait éviter d'utiliser des pixels ), vous devrez prendre soin de choisir le DPI correct pour l'impression:

• 72 dpi (Web) = 595 X 842 pixels
• 300 dpi (impression) = 2480 X 3508 pixels
• 600 dpi (impression de haute qualité) = 4960 X 7016 pixels

Pourtant, j'éviterais les tracas et utiliserais simplement cm(centimètres) ou mm(millimètres) pour le dimensionnement car cela évite le rendu des problèmes qui peuvent survenir en fonction du client que vous utilisez.

Il serait assez facile de forcer le navigateur Web à afficher la page avec les mêmes dimensions en pixels que A4. Cependant, il peut y avoir quelques bizarreries lorsque les choses sont rendues.

En supposant que vos moniteurs affichent 72 dpi, vous pouvez 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>

Le format A4 est 210x297mm

Vous pouvez donc définir la page HTML pour s'adapter à ces tailles avec CSS:

html,body{
    height:297mm;
    width:210mm;
}

Créez une section avec 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, a,
span, td { 
    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;
}

J'ai utilisé HTML pour générer des rapports qui s'impriment correctement à des tailles réelles sur du vrai papier.

Si vous utilisez soigneusement mm comme unités dans le fichier CSS, vous devriez être OK, au moins pour les pages simples. Cependant, les gens peuvent vous gâcher en modifiant le zoom d'impression dans leur navigateur.

Il me semble que tout ce que je faisais était une seule page, donc je n'avais pas à me soucier de la pagination - cela pourrait être beaucoup plus difficile.

J'ai vu cette solution après avoir recherché sur google, recherchez "A4 CSS page template" (codepen.io). Il affiche une zone de taille A4 (A3, A5, également portrait) dans le navigateur, à l'aide de la balise <page>. À l'intérieur de cette balise, le contenu est affiché, mais la position absolue est toujours par rapport à la zone du navigateur.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Cela fonctionne pour moi sans aucune autre bibliothèque css / js à inclure. Fonctionne pour les navigateurs actuels (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

Dans votre quotidien style.css:

table.tableclassname {
  width: 400px;
}

Dans votre print.css:

table.tableclassname {
  width: 16 cm;
}

Le PPI et le DPI ne changent absolument rien à la façon dont un document s'imprimera dans un navigateur. l'imprimante ne prend aucune information sur la hauteur des points à l'écran ou le DPI des images, etc. le processeur d'impression du navigateur augmenterait le DPI des images de quelque chose d'assez bas comme 72 dpi à quel que soit le DPI du reste du document. disons que l'image s'affiche sur une demi-page de large, puis sur environ 4 "de large physiquement. la largeur des pixels de l'image serait d'environ 300 pixels pour s'afficher correctement dans le navigateur. et l'image passera à environ 1200px qui à 300 DPI est de 4 ".

en ce qui concerne les éléments vectoriels ou non pixelisés comme le texte, l'imprimante choisit son propre DPI dans le pilote qui ne se rapporte pas à la hauteur des points de l'écran ou à la largeur du navigateur, etc.

Voici ce qui rend difficile la création d'affichages imprimés: chaque navigateur et imprimante interpréteront les tailles de texte (pt, em, px) et l'espacement à leur manière. en fonction de l'imprimante, du navigateur et peut-être même du système d'exploitation que vous utilisez, vous obtiendrez un nombre différent de lignes et de caractères par page. donc même si vous testez sur votre ordinateur à l'aide de votre navigateur et de votre imprimante et que vous savez que vous pouvez afficher le texte dans une boîte à 640x900px et qu'il est parfait à l'impression, le prochain gars qui essaiera d'imprimer le fera peut-être différemment. il n'y a vraiment aucun moyen de forcer chaque imprimante et navigateur à les rendre identiques à chaque fois.

oublier les pixels et plus encore oublier le DPI, la seule chose pour laquelle vous pouvez utiliser des pixels est de définir une largeur de table qui simule la largeur d'une zone imprimable sur votre imprimante. dans ce cas, j'ai trouvé que 640px de large est proche.

Vous cherchez un problème similaire, j'ai trouvé cela - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 est un format de document, comme une image d'écran qui va dépendre de la résolution de l'image, par exemple un document A4 redimensionné à:

• 72 dpi (Web) = 595 X 842 pixels
• 300 dpi (impression) = 2480 X 3508 pixels (c'est "A4" tel que je le connais, c'est-à-dire "210 mm X 297 mm @ 300 dpi")
• 600 dpi (impression) = 4960 X 7016 pixels

Je sais que ce sujet est assez ancien mais je veux partager mon expérience sur ce sujet. En fait, je cherchais un module qui peut m'aider avec mes rapports quotidiens. J'écris des documentations et des rapports en HTML + CSS (au lieu de Word, Latex, OO, ...). L'objectif serait de les imprimer sur du papier A4 pour les partager avec des amis, ... Au lieu de chercher, j'ai décidé d'avoir une petite session de codage drôle pour implémenter une lib simple qui peut gérer des "pages", numéro de page, résumé, en-tête , footer, .... Enfin, je l'ai fait en ~~ 2h et je sais que ce n'est pas le meilleur outil de tous les temps mais c'est presque ok pour moi. Vous pouvez jeter un œil à ce projet sur mon repo et n'hésitez pas à partager vos idées. Ce n'est peut-être pas ce que vous recherchez à 100% mais je pense que ce module peut vous aider.

Fondamentalement, je crée une page de corps "largeur: 200 mm;" et récipient de hauteur: 290 mm (plus petit que A4). J'ai ensuite utilisé le saut de page: toujours; de sorte que l'option "imprimer" du navigateur sache quand diviser les pages.

repo: https://github.com/kursion/jsprint

Techniquement, vous le pourriez, mais il faudrait beaucoup de travail pour que tous les navigateurs impriment la page exactement telle qu'elle est affichée à l'écran. De plus, la plupart des navigateurs forcent l'URL, la date d'impression et la numérotation des pages à l'impression, ce qui n'est pas toujours souhaité. Cela ne peut pas être modifié ou désactivé.

Au lieu de cela, je conseillerais de créer un PDF basé sur le contenu à l'écran et de servir le PDF pour le téléchargement et / ou l'impression. Bien que la plupart des bibliothèques PDF disponibles soient payantes, il existe quelques alternatives gratuites pour créer des PDF de base.

J'ai utilisé 680px dans les rapports commerciaux pour imprimer sur des pages A4 depuis 1998. Le 700px ne pouvait pas s'adapter correctement en fonction de la taille des marges. Les navigateurs modernes peuvent réduire la page pour l'adapter à l'imprimante, mais si vous utilisez 680 pixels, vous imprimerez correctement dans presque tous les navigateurs.

C'est du HTML pour vous. Exécutez un extrait de code et voyez le résultat:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Plusieurs façons de faire:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

Il est tout à fait possible de définir votre mise en page pour prendre les proportions d'une page a4. Vous n'auriez qu'à régler la largeur et la hauteur en conséquence (éventuellement vérifier avec window.innerHeightet window.innerWidthmême si je ne suis pas sûr que ce soit fiable).

La partie délicate est l'impression A4. Javascript par exemple ne supporte que l'impression rudimentaire des pages avec la window.printméthode. Comme @Prutswonder l'a suggéré, la création d'un PDF à partir de la page Web est probablement la façon la plus sophistiquée de procéder (à part fournir la documentation PDF en premier lieu). Cependant, ce n'est pas aussi trivial qu'on pourrait le penser. Voici un lien qui contient une description d'une classe Java entièrement open source pour créer des PDF à partir du HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

De toute évidence, une fois que vous avez créé un PDF avec des proportions A4, il en résulte une impression A4 propre de votre page. Que cela en vaille la peine, c'est une autre question.