Quelles sont les bonnes tailles pour une page Web à imprimer sur papier de taille A4? Quelles autres choses devraient être considérées?
* Inline CSS est préféré dans ce cas
Clarification: Cette page de bord ne propose que pour être imprimée, car il s'agit d'un reçu.
Clarification n ° 2: Cette page Web est destinée à l'utilisation interne de la société que je travaille. Ils voudraient avoir l'air de recevoir un reçu de manière professionnelle.
4 Réponses :
Faites de votre version imprimable aussi simple et gratuite du meuble de page que possible.
Vous devez créer une feuille de style spécifique à l'impression qu'au minimum supprime toutes les restrictions de largeur de la page afin que la page d'impression puisse circuler le texte pour adapter le papier de sortie.
Vous devez également savoir que la plupart des navigateurs n'impriment pas les images de fond CSS par défaut, ne comptez pas sur eux étant présents sur la page imprimée.
Edit: En réponse à votre commentaire, je ferais le reçu aussi simple que possible. Le problème principal est que vous n'avez pas de contrôle sur l'imprimante de l'utilisateur final afin que vous ne puissiez pas savoir avec certitude exactement la taille de la zone imprimable.
Concevez la page en utilisant une mise en page liquide / fluide et essayez de le garder simple. Le style de réception d'Amazon que vous rencontrez dans la boîte de livraison vaut probablement la peine d'être utilisé pour l'inspiration.
Mais je veux concevoir la page pour imprimer exactement comme il apparaît. Dans le même temps, je ne veux pas que ce soit sur plus d'une page d'A4. Des recommandations?
Comme les autres gars a dit que vous devez utiliser un CSS imprimé, mais rappelez-vous une chose: Vous pouvez l'utiliser pour assurer des éléments tels que votre navigation etc. ne sont pas imprimés. A la manière dont une liste d'une liste a cet excellent Article sur les feuilles de style d'impression , vérifiez-le.
Je recommanderais d'utiliser deux feuilles de style différents.
Pour visualiser dans le navigateur, vous pouvez définir la largeur de la table sur la largeur d'un papier A4: 21cm. (Minus marges 18cm.)
Pour imprimer la taille de la table doit être "100%", ce qui signifie que l'imprimante remplit toute la largeur de la page, à l'aide des marges données par les paramètres du navigateur . (Ces marges de page sont ce qui vous rend impossible pour vous de faire une impression exactement la même.)
Faites que le tableau soit suffisamment étroit pour être en sécurité, il est dans la page Marges. Puis centre de cette table verticalement.
Il n'y a aucun moyen que vous allez réaliser cela avec HTML & CSS, Il n'est tout simplement pas conçu pour permettre des dispositions exactes!
Créer des fichiers PDFS en ligne et laissez les utilisateurs les télécharger. La plupart des navigateurs sont en mesure de rendre les PDF de toute façon. éventuellement fonctionner
Solution pour la mise en page parfaite
Le meilleur moyen est l'utilisation de @Media Commande dans stylesheet
par exemple p> Utilisation pour la disposition d'impression de tous les commandes et p> .SomeDivOrContent{visibility:hidden;display:none;}