Revision 1100031 of size

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Summary">Summary</h2>

<p>The <code>size</code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> descriptor, used with the {{cssxref("@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.</p>

<p>Size might either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* Keyword values for scalable size */
size: auto;
size: portrait;
size: landscape;

/* &lt;length&gt; 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;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>The user agent decides the size of the page. In most cases, the dimensions and orientation of the target sheet are used.</dd>
 <dt><code>landscape</code></dt>
 <dd>The content of the page is displayed in landscape mode (i.e. the longest side of the box is horizontal).</dd>
 <dt><code>portrait</code></dt>
 <dd>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.</dd>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Any length value (see {{cssxref("&lt;length&gt;")}}). 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.</dd>
 <dt><code>&lt;page-size&gt;</code></dt>
 <dd>
 <dl>
  <dt>A5</dt>
  <dd>This matches the standard, ISO dimensions: 148mm x 210mm.</dd>
  <dt>A4</dt>
  <dd>This matches the standard, ISO dimensions: 210mm x 297mm. (most frequently used dimensions for personal printing.)</dd>
  <dt>A3</dt>
  <dd>This matches the standard, ISO dimensions: 297mm x 420mm.</dd>
  <dt>B5</dt>
  <dd>This matches the standard, ISO dimensions: 176mm x 250mm.</dd>
  <dt>B4</dt>
  <dd>This matches the standard, ISO dimensions: 250mm x 353mm.</dd>
  <dt>JIS-B5</dt>
  <dd>This correspond to the JIS standard dimensions: 182mm x 257mm.</dd>
  <dt>JIS-B4</dt>
  <dd>This correspond to the JIS standard dimensions: 257mm x 364mm.</dd>
  <dt>letter</dt>
  <dd>This keyword is a equivalent to the dimensions of letter paper in North America i.e. 8.5in x 11in.</dd>
  <dt>legal</dt>
  <dd>This keyword is a equivalent to the dimensions of legal papers in North America i.e. 8.5in x 14in.</dd>
  <dt>ledger</dt>
  <dd>This keyword is a equivalent to the dimensions of ledger pages in North America i.e. 11in x 17in.</dd>
 </dl>
 </dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: css">
@page {
  size: 4in 6in landscape;
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Paged Media', '#size', 'size')}}</td>
   <td>{{Spec2('CSS3 Paged Media')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{cssxref("@page/bleed", "bleed")}}</li>
 <li>{{cssxref("@page/marks", "marks")}}</li>
</ul>