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.
18 votes
Vous pouvez : github.com/delight-im/HTML-Feuilles-de-papier
0 votes
Possible dupe de : stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
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 !
0 votes
Quelle était l'intention de faire cela ? Vous quittez MS Office pour les technologies web ? C'est du moins ce que j'essaie de faire, mais j'ai encore besoin d'aide. entrée comment . Répondre à cette question permettrait de terminer l'histoire commencée par cette question.