web-dev-qa-db-fra.com

Simuler une page A4 en HTML

Je dois créer une page HTML avec un format de papier A4.

Je sais que la taille du papier A4 en pixels est: 595px x 842px ( chaîne n ° 10-11 ). Mais pendant que je mets ces tailles et essaie d'imprimer la page (j'imprime sur PDF, en raison du manque temporaire d'encres), je n'obtiens pas que mon HTML s'adapte parfaitement à la page: il est beaucoup plus petit.

Quand j'ai essayé d'ajouter quelques pixels (avec le coefficient, bien sûr), j'ai obtenu 794px x 1122px ( chaîne n ° 12-13 ) et la deuxième tentative d'impression (enregistrement dans PDF) m'a donné le résultat que cette variante est un peu plus grande, alors nécessaire.

Alors, quelle est la solution et pourquoi 595px x 842px ne pas être compatible avec un véritable A4 enregistré au format PDF?

Voici l'exemple

P.S. J'utilise Chromium pour Ubuntu 13.10 et je ne l'ai pas vérifié sous Windows.

Je fais cela pour pouvoir simplement changer les valeurs via PHP puis convertir la page HTML en PDF, comme décrit ici .

15
Artem Ushakov

HTML suppose que l'écran est de 96 DPI ou que 1 pixel correspond à 1/96 de pouce.

Sur le matériel à très haute résolution, il utilise le concept de pixels logiques, qui sont des unités qui sont proches de 1/96 de pouce, et dont chacune se compose de plusieurs pixels de l'appareil. Cela est vrai pour les imprimantes, mais aussi pour les téléphones et autres appareils avec des écrans haute résolution.

Donc, si vous voulez un rectangle de la même taille et un A4 (21 × 29,7 cm), vous devez utiliser 794 × 1122 pixels, ou en CSS, width:794px; height:1122px. Mais vous pouvez également utiliser des unités physiques, width:21cm; height:29.7cm si vous ne voulez pas vous soucier de ces pixels logiques.

49
Mr Lister

Si vous prévoyez d'imprimer ceci, n'oubliez pas que vous devez imprimer à 300 dpi, donc 8,5 "x11" * 300 = hauteur: 3300 px; largeur: 2550px.

De plus, je tamponnerais 0,25 "pour une marge également, alors faites juste 8" x 10,5 "avant de convertir en pixels.

4
Catalyst