Size - Propriété CSS

Schéma syntaxique de size.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length sont des valeurs numériques suivies d'une des unités de dimension, et correspondant à la largeur et la hauteur de la page.
• format est un format de papier standard : a4, letter, legal.

Description de la propriété size.

size définit les dimensions et l'orientation des pages imprimées. Cette propriété ne s'applique qu'au sélecteur @page.

Si deux dimensions sont indiquées, elles correspondent respectivement à la largeur et à la hauteur de la page. Si une seule dimension est indiquée, elle s'applique aussi bien à la largeur qu'à la hauteur (autrement dit, la page sera carrée).

Il est possible également d'indiquer un format de papier standard, a4, letter, legal, etc. suivi de l'orientation : landscape ou portrait.

Attention ! Les dimensions physiques des feuilles de papier peuvent être différentes de celles qui sont précisées pour la page. Dans ce cas, les navigateurs peuvent être amenés à :

• Tourner la page de 90°.
• Appliquer un facteur de réduction pour faire tenir la page dans la feuille.
• Augmenter les marges ou centrer la page si elle est plus petite que la feuille.

A savoir aussi, concernant les pages imprimées.

Size est utilisable avec :

• @page : Cette directive est un sélecteur qui cible les pages imprimées.

Valeurs pour size.

• size: auto;

  Valeur par défaut. L'utilisateur choisit la taille des pages au moment de l'impression.

• size: a3; size: a4; size: a5; size: b4; size: b5;

  La taille de la page imprimée est fixée à l'un des formats ISO suivants :

  1. A3 : 29,7 cm x 42cm.
  2. A4 : 21 cm x 29,7cm.
  3. A5 : 14,8 cm x 21cm.
  4. B4 : 25 cm x 35,3 cm.
  5. B5 : 17,6 cm x 25 cm.
• size: JIS-B4; size: JIS-B5;

  La taille de la page imprimée est fixée à l'un des formats suivants :

  1. JIS-B4 : 25,7 cm x 36,4 cm.
  2. JIS-B5 : 18,2 cm x 25,7 cm.
• size: letter; size: legal; size: ledger;

  Formats nord-américain :

  1. letter : 8,5 pouces x 11 pouces (21,59 cm x 27,94 cm).
  2. legal : 8,5 pouces x 14 pouces (21,59 cm x 35,56 cm).
  3. ledger : 11 pouces x 17 pouces (27,94 cm x 43,18 cm).
• size: 20cm 30cm; l h

  Les dimensions de la page sont définies par ces deux valeurs (l est la largeur, h est la hauteur). Il est donc possible de spécifier des formats non standards ou appartenant à un standard différent.

  Ce sont deux valeurs positives suivies d'une des unités de dimension.

• size: a4 portrait; size: b5 landscape;

  Les valeurs portrait et landscape peuvent compléter l'indication d'un format standard.

  1. portrait : le côté le plus grand est vertical.
  2. landscape : le côté le plus grand est horizontal.
• size: initial; (auto) size: inherit; size: revert; size: revertLayer; size: unset;

  Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation de la propriété size.

Comme toutes les propriétés relatives à l'impression, ou celles qui s'appliquent au sélecteur @page, size ne peut pas être animée.

Manipulation de la propriété size par programme.

Avec Javascript, modifier la valeur de size.

La propriété size présente la particularité de n'être applicable que sur le sélecteur @page. Or ce dernier n'est pas un élément du DOM, et n'est donc pas accessible directement via Javascript. Voici cependant un exemple de code qui permet de modifier la valeur de size. Il consiste à créer un élément style dans la section head de la page. N'importe quelle règle CSS peut ensuite être insérée dans cet élément.

const style = document.createElement('style'); style.innerHTML = '@page {size: a4 portrait;}'; document.head.appendChild(style);

Simulateur avec la propriété size.

Pour voir le résultat après chaque changement, vous devrez imprimer cette page ou le visualiser en aperçu avant impression.

Prise en charge de size par les navigateurs.

La propriété size est maintenant bien reconnue par les navigateurs actuels.

Historique de la propriété size.

• Module CSS - Media paginé - Niveau 3

  Concernant size. Première présentation de la propriété size.
  

  23 Juin 1999

  Document de travail.

  

  25 Février 2004

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des impressions.

Tout ce qui concerne les impressions via un module paginé (page par page) est décrit dans le module Module CSS - Media paginé. La propriété size fait partie du module, ainsi que les définitions suivantes :

Sélecteurs :

Propriétés :

Directives :