Comment puis-je concevoir une page HTML à imprimer au format A4 ?

Comment concevoir une page HTML avec des dimensions de papier A4

De nombreux utilisateurs souhaitent pouvoir imprimer une page HTML qui imite les dimensions et les marges d'une feuille au format A4. Cet article explore les techniques nécessaires pour obtenir cet effet.

Requêtes multimédias CSS pour l'impression

La clé pour contrôler les dimensions imprimées d'une page HTML réside dans l'utilisation du média CSS requêtes. Ces requêtes ciblent le support d'impression et permettent l'application de styles spécifiques. Pour une impression au format A4, la requête @media suivante peut être utilisée :

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

Ce code fixe la largeur et la hauteur de la page imprimée à respectivement 21 cm et 29,7 cm, correspondant à une page A4. De plus, il définit des marges de 30 mm (haut et bas) et 45 mm (gauche et droite) pour obtenir les dimensions de page souhaitées.

Sauts de page ultérieurs

Si le code HTML le contenu dépasse la taille de page spécifiée, les pages suivantes doivent être créées. Cela peut être accompli en insérant des sauts de page CSS. Par exemple :

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

Ce code garantit que chaque chapitre commence sur une nouvelle page.

Affichage du navigateur

Pour optimiser l'affichage Web de la page tout en conservant les dimensions A4 imprimées, créez un fichier CSS Web distinct ou remplacez des parties du CSS d'impression. Par exemple :

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

Ce code définit la largeur affichée à 80 % de l'espace disponible du navigateur, avec réglage automatique de la hauteur. Les marges sont également réduites à 20px pour une mise en page plus web-friendly.

Conclusion

En implémentant des requêtes média CSS et en gérant les sauts de page, il est possible de créer un Page HTML qui se comporte comme un document au format A4 une fois imprimé. En séparant les CSS imprimés et Web, la page peut également conserver un affichage optimisé pour différents environnements de visualisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!