Comment créer une page HTML au format page A4?
Est-il possible de faire se comporter une page HTML, par exemple, comme une page de format A4 dans MS Word?
Essentiellement, je souhaite pouvoir afficher la page HTML dans le navigateur et définir 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'image, etc.) et qu'il n'y aura pas de balises <br> par exemple.
En outre, lorsque la page HTML est imprimée, elle apparaît sous la forme de pages papier au format A4.
Il y a bien longtemps, en novembre 2005, AlistApart.com avait publié un article sur la publication d'un livre utilisant uniquement HTML et CSS. Voir: http://alistapart.com/article/boom
Voici un extrait de cet article:
CSS2 a une notion de support paginé (pensez feuilles de papier), par opposition à un support continu (pensez 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 la page nommée sur laquelle ils veulent être imprimés. De plus, 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; }Avoir un éditeur basé aux États-Unis, nous a donné la taille de la page en pouces. Nous, Européens, avons continué avec 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 se trouvaient 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 "vide". CSS2 a décrit le concept de pages nommées, mais leur valeur n'apparaît que lorsque les en-têtes et les pieds de page sont disponibles.
En tous cas…
Puisque vous voulez imprimer en 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 aborde des sujets tels que la mise en place de sauts de page, etc., de sorte que vous souhaiterez peut-être le lire complètement.
Dans votre cas, l’astuce consiste à créer d’abord le CSS imprimé. La plupart des navigateurs modernes (> 2005) supportent le zoom et pourront déjà afficher un site Web basé sur le CSS imprimé.
Désormais, vous voudrez que l’affichage Web soit un peu différent et que la conception complète s’adapte à la plupart des navigateurs (y compris les anciens, d’avant 2005). Pour cela, vous devez 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, rappelez-vous qu'un navigateur peut avoir N'importe quelle taille (pensez: "mobile" jusqu'à "téléviseurs à grand écran"). Signification: pour les CSS Web, il est préférable de définir la largeur de la page et la largeur de l'image à l'aide d'une largeur variable (%) afin de prendre en charge le plus grand nombre possible de périphériques d'affichage et de clients de navigation Web.
EDIT (26-02-2015)
Aujourd'hui, je suis tombé par hasard sur un autre, plus récent article de SmashingMagazine , qui plonge également dans la conception pour impression avec HTML et CSS… juste au cas où vous pourriez utiliser un autre tutoriel.
EDIT (30-10-2018)
On a attiré mon attention sur le fait que size n'est pas valide CSS3, ce qui est tout à fait correct. J'ai simplement répété le code cité dans l'article qui (comme indiqué) était un bon vieux CSS2 (ce qui a un sens lorsque vous regardez l'année de publication de l'article et de cette réponse). 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. */
}
}
Si vous pensez avoir vraiment besoin de pixels (, évitez en fait d'utiliser des pixels ), vous devrez alors choisir le bon DPI pour l'impression:
- 72 dpi (Web) = 595 X 842 pixels
- 300 dpi (impression) = 2480 x 3508 pixels
- 600 dpi (impression haute qualité) = 4960 x 7016 pixels
Pourtant, je voudrais éviter les tracas et utiliser simplement cm (centimètres) ou mm (millimètres) pour le dimensionnement, car cela évite les problèmes de rendu 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 qu’en 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 une page HTML adaptée à 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 le format A4.
Puis 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;
}
créez ensuite une div avec tout votre contenu.
<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é le langage HTML pour générer des rapports qui s'impriment correctement en format réel sur du papier réel.
Si vous utilisez avec précaution mm comme unités dans le fichier CSS, tout devrait bien se passer, du moins pour les pages simples. Les gens peuvent vous bousiller en modifiant le zoom d'impression dans leur navigateur.
Je crois me souvenir que tout ce que je faisais ne comptait qu'une seule page, je n'avais donc pas à m'inquiéter de la pagination - cela risquait d'être beaucoup plus difficile.
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">
Dans votre style.css normal:
table.tableclassname {
width: 400px;
}
Dans votre print.css:
table.tableclassname {
width: 16 cm;
}
À la recherche d'un problème similaire, j'ai trouvé ceci - http://www.indigorose.com/forums/archive/index.php/t-13334.html
A4 est un format de document, comme une image d'écran qui dépendra 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 (Ceci est "A4" comme je le connais, c'est-à-dire "210mm X 297mm @ 300 dpi")
- 600 dpi (impression) = 4960 x 7016 pixels
PPI et DPI ne font aucune différence dans la façon dont un document sera imprimé par un navigateur. l’imprimante ne prend aucune information sur le pas de l’écran ou le DPI des images, etc. Si vous imprimez des images, elles imprimeraient à une taille similaire à celle de leur affichage à l’écran. le processeur d'impression du navigateur augmenterait le DPI des images de quelque chose d'assez faible, comme 72 ppp, au reste du document. Supposons que l'image affiche une largeur d'une demi-page, puis environ 4 "de large physiquement. La largeur en pixels de l'image serait d'environ 300 pixels pour s'afficher correctement dans le navigateur. Au moment de l'impression à une densité nominale de 300 dpi, le processeur a ajouté des pixels. et l'image passera à environ 1200px, ce qui à 300 DPI est de 4 ".
quand il s’agit d’éléments vectoriels ou non pixel comme le texte, l’imprimante choisit son propre DPI parmi les pilotes qui ne sont pas liés au pas de l’écran ni à la largeur du navigateur, etc. Si le navigateur mesure 3 000 pixels de large, le processeur d’emballage imprime le texte comme il convient.
voici ce qui rend difficile la création d’écrans d’affichage: chaque navigateur et imprimante interprète la taille du texte (pt, em, px) et l’espacement de manière différente. 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. Ainsi, 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 parfaitement imprimé, le prochain utilisateur qui essaiera de l'imprimer imprimera éventuellement différemment. il n'y a vraiment aucun moyen de forcer chaque imprimante et navigateur à le rendre identique à chaque fois.
oubliez les pixels et plus encore, oubliez les DPI, vous ne pouvez utiliser de pixels que si vous définissez une largeur de tableau qui simule la largeur d'une zone imprimable de votre imprimante. dans ce cas, j'ai trouvé que 640px large est proche.
J'ai vu cette solution après une recherche sur Google, recherchez "Modèle de page A4 CSS" (codepen.io). Il affiche une zone de taille A4 (A3, A5, ainsi que portrait) dans le navigateur, à l’aide de la balise <page>. À l'intérieur de cette balise, le contenu est affiché, mais la position absolue reste la même 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).
Je sais que ce sujet est assez ancien, mais je souhaite partager mon expérience à ce sujet. En fait, je cherchais un module qui puisse 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é de faire une petite session de codage amusante pour mettre en place une bibliothèque simple capable de gérer des "pages", un numéro de page, un résumé, un 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 acceptable pour moi. Vous pouvez consulter ce projet sur mon dépôt 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 "width: 200mm;" et conteneur de hauteur: 290mm (plus petit que A4). Puis j'ai utilisé page-break-after: always; pour que l'option "print" du navigateur sache quand diviser les pages.
Techniquement, vous le pourriez, mais il faudrait beaucoup de travail pour que tous les navigateurs impriment la page telle qu'elle est affichée à l'écran. En outre, la plupart des navigateurs obligent l’URL, la date d’impression et la numérotation des pages à imprimer, ce qui n’est pas toujours souhaitable. 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 disponible pour la création de fichiers PDF de base.
J'ai utilisé 680px dans des rapports commerciaux pour imprimer sur des pages A4 depuis 1998. L'impression 700px ne pouvait pas tenir correctement dépendre de la taille de la marge. Les navigateurs modernes peuvent réduire la page pour s’adapter à la page sur 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:
Il est tout à fait possible de définir votre mise en page pour qu'elle prenne les proportions d'une page a4. Il vous suffira de régler la largeur et la hauteur en conséquence (éventuellement vérifier avec window.innerHeight et window.innerWidth bien que je ne sois pas sûr que ce soit fiable).
La partie la plus délicate concerne l'impression A4. Javascript, par exemple, ne supporte que l'impression rudimentaire des pages avec la méthode window.print. Comme @Prutswonder a suggéré de créer un PDF à partir de la page Web est probablement la manière la plus sophistiquée de le faire (autre que de fournir PDF la documentation 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 entièrement open source Java permettant de créer des fichiers PDF à partir de HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw- 0410-html.html .
Évidemment, une fois que vous avez créé un PDF avec une impression au format A4, votre page sera imprimée au format A4 propre. Une autre question est de savoir si cela vaut l'investissement de temps.
Plusieurs façons de faire:
html,body{
height:297mm;
width:210mm;
}
html,body{
height:29.7cm;
width:21cm;
}
html,body{
height: 842px;
width: 595px;
}