Définir une page en A6

Résolu/Fermé
BOB_BOOKSON Messages postés 19 Date d'inscription samedi 26 juin 2021 Statut Membre Dernière intervention 22 août 2022 - 19 juil. 2021 à 10:25
BOB_BOOKSON Messages postés 19 Date d'inscription samedi 26 juin 2021 Statut Membre Dernière intervention 22 août 2022 - 14 août 2021 à 19:01
Bonjour à tous!

Je travail actuellement sur application Php-Mysql sur la gestion de la facturation et tout va plutôt bien sauf une petite difficulté quant à l'impression de la facture, je voudrai définir la page Facture en A6 mais après plusieurs requêtes sur Google, rien de concret. J'ai trouvé la propité CSS: style="width:105mm;height:148mm; qui permettent d'imprimer en A6 mais la page est toujours entière.
Si quelqu'un peut m'aider avec un astuce. Je voudrai que la page contenant la facture soit au format A6 afin de me permettre de l'imprimer. Merci.

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 543
19 juil. 2021 à 15:00
Bonjour,

Tu peux utiliser le descripteur size associé à la règle @page :
@media print {
  html, body {
    margin: 0;
    padding: 0;
  }  

  @page {
    size: 105mm 148mm;
  }
}


https://developer.mozilla.org/fr/docs/Web/CSS/@page/size

Bonne journée,
0
BOB_BOOKSON Messages postés 19 Date d'inscription samedi 26 juin 2021 Statut Membre Dernière intervention 22 août 2022
13 août 2021 à 16:02
En tout cas, merci beaucoup pour votre disponibilité et surtout vos réponses, j'ai enfin décidé de creuser un peu plus le CSS pour mes futures tentatives, j'exploite le contenu du lien pour de reviens à vous. Toutefois j'ai réussi à fixer la largeur de la page mais pour ce qui de la hauteur malgré toutes les propriétés, rien ne marche. En fait il s'agit d'une petite application de facturation que j'ai mise en place. C'est bien la page facture.php contenant la facture que je voulais imprimer sur une imprimante PPSON A6 mais bien que j'ai réussi à ajuster la largeur, mais lors de l'impression la facture devient trop longue avec plus ou moins 60 cm vide.
0
BOB_BOOKSON Messages postés 19 Date d'inscription samedi 26 juin 2021 Statut Membre Dernière intervention 22 août 2022
10 août 2021 à 17:58
Merci pour la réponse, je ne suis pas trop fort en CSS en dehors de l'utilisation classique de quelques propriétés, mais qu'entez-vous par "le descripteur size associé à la règle @page" ?
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 543
11 août 2021 à 10:55
Il existe des règles spéciales en css nommées at-rules (traduit règles @) qui permettent de donner des instructions sur le comportement de css : https://developer.mozilla.org/fr/docs/Web/CSS/At-rule

Un descripteur css ressemble à une propriété css, la différence est qu'un descripteur doit obligatoire être utilisé dans une at-rule. Dans l'exemple du mon premier message, "size" correspond à un descripteur css qui doit être utilisé uniquement dans la règle @page pour définir les dimensions du document imprimable. La propriété "size" n'existe pas en css et ne peut pas être utilisé sur un élément ciblé (contrairement aux autres propriétés css tel que color, border, etc...).
0
BOB_BOOKSON Messages postés 19 Date d'inscription samedi 26 juin 2021 Statut Membre Dernière intervention 22 août 2022 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
14 août 2021 à 19:01
Encore une fois de plus, merci. Le lien est très utile et m'a aidé à comprendre et maintenant mon problème est résolu. J'ai pu définir la page au format de mon imprimante thermique (dont la taille n'est pas forcément au format A6) et exporter la page en pdf et tout marche plutôt bien (la page ne contient pas d'autre données que la facture). Le code CSS pour ce dont la chose intéresse:

@media print{

html, body {
margin: 0;
padding: 0;
width:78mm; height:148mm;}

@page {
size: 78mm 148mm;
}

#ma_facture{
font-size:12px;
margin:0px;
padding:0px;
width:78mm;
position: absolute;
left: 0;
top: 0;
}
}
0