size
Quick Summary for size (@page)
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Code Usage for size (@page)
/* Keyword values for scalable size */ size: auto; size: portrait; size: landscape;  /* <length> values */ /* 1 value: height = width */ size: 6in;  /* 2 values: width then height */ size: 4in 6in;  /* Keyword values for absolute size */ size: A4; size: B5; size: JIS-B4; size: letter;  /* Mixing size and orientation */ size: A4 portrait; 
More Details for size (@page)

size

Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.

Size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions.

Syntax

/* Keyword values for scalable size */ size: auto; size: portrait; size: landscape;  /* <length> values */ /* 1 value: height = width */ size: 6in;  /* 2 values: width then height */ size: 4in 6in;  /* Keyword values for absolute size */ size: A4; size: B5; size: JIS-B4; size: letter;  /* Mixing size and orientation */ size: A4 portrait; 

Values

auto

The user agent decides the size of the page. In most cases, the dimensions and orientation of the target sheet are used.

landscape

The content of the page is displayed in landscape mode (i.e. the longest side of the box is horizontal).

portrait

The content of the page is displayed in portrait mode (i.e. the longest side of the box is vertical). This is the default orientation.

<length>

Any length value (see <length>). The first value corresponds to the width of the page box and the second one corresponds to its height. If only one value is provided, it is used for both width and height.

<page-size>

A keyword which may be any of the following values:

A5

This matches the standard, ISO dimensions: 148mm x 210mm.

A4

This matches the standard, ISO dimensions: 210mm x 297mm. (most frequently used dimensions for personal printing.)

A3

This matches the standard, ISO dimensions: 297mm x 420mm.

B5

This matches the standard, ISO dimensions: 176mm x 250mm.

B4

This matches the standard, ISO dimensions: 250mm x 353mm.

JIS-B5

This correspond to the JIS standard dimensions: 182mm x 257mm.

JIS-B4

This correspond to the JIS standard dimensions: 257mm x 364mm.

letter

This keyword is a equivalent to the dimensions of letter paper in North America i.e. 8.5in x 11in.

legal

This keyword is a equivalent to the dimensions of legal papers in North America i.e. 8.5in x 14in.

ledger

This keyword is a equivalent to the dimensions of ledger pages in North America i.e. 11in x 17in.

Formal definition

Related at-rule@page
Initial valueauto
Computed valueas specified, but with relative lengths converted into absolute lengths

Formal syntax

<length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]

where <page-size> = A5 | A4 | A3 | B5 | B4 | JIS-B5 | JIS-B4 | letter | legal | ledger

Examples

Specifying size and orientation

@page {   size: 4in 6in landscape; } 

Nesting inside a @media rule

@media print {   @page {     size: 50mm 150mm;   } } 

Specifications

Specification
Proposals for the future of CSS Paged Media # page-size-prop

Last modified: Aug 12, 2021, by MDN contributors

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Many of life's failures are people who did not realize how close they were to success when they gave up.
Thomas A. Edison
Random CSS Property

@charset

The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant.
@charset css reference