/* Displays the print content in an upright position */
@page {
page-orientation: upright;
}
/* Displays the print content rotated counter-clockwise */
@page {
page-orientation: rotate-left;
}
/* Displays the print content rotated clockwise */
@page {
page-orientation: rotate-right;
}
page-orientation =
upright |
rotate-left |
rotate-right
此示例展示了列印文件的內容如何根據頁面內容和頁面位置進行旋轉。在 CSS 程式碼的第一部分中，設定了命名頁面來定義內容旋轉的方向。
@page upright {
size: portrait;
page-orientation: upright;
}
@page left {
size: landscape;
page-orientation: rotate-left;
}
@page right {
size: landscape;
page-orientation: rotate-right;
}
fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
width: fit-content;
}
p {
max-width: 60ch;
}
@media print {
fieldset {
display: none;
}
section {
font-family: "Roboto", sans-serif;
font-size: 1.5rem;
}
}
CSS 程式碼的第二部分為選擇器（如 <section class="left">…</section>）聲明瞭上面定義的命名頁面規則。
@media print {
.upright {
page: upright;
}
.left {
page: left;
}
.right {
page: right;
}
}
<fieldset id="printStyle">
<legend>
Click Print. The page will be laid out in the defined orientation.
</legend>
<button id="print">Print</button>
</fieldset>
<div id="print-area">
<section class="upright">
<h2>Section in Portrait/Upright</h2>
<p>This section will be printed in portrait and upright with:</p>
<pre>
.upright {
size: portrait;
page-orientation: upright;
}
</pre>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</section>
<section class="left">
<h2>Section in Landscape/Left</h2>
<p>This section will be printed in landscape and rotated left with:</p>
<pre>
.left {
size: landscape;
page-orientation: rotate-left;
}
</pre>
<table>
<thead>
<tr>
<th></th>
<th>100m</th>
<th>1500m</th>
<th>Hurdles</th>
<th>Long Jump</th>
<th>High Jump</th>
<th>Javelin</th>
<th>Discus</th>
</tr>
</thead>
<tbody>
<tr>
<th>Dave</th>
<td>9.65</td>
<td>3:49</td>
<td>12.64</td>
<td>8.54m</td>
<td>1.95m</td>
<td>56.65m</td>
<td>47.63m</td>
</tr>
<tr>
<th>Simon</th>
<td>9.87</td>
<td>3:52</td>
<td>11.89</td>
<td>8.16m</td>
<td>1.96m</td>
<td>59.03m</td>
<td>45.72m</td>
</tr>
<tr>
<th>Fred</th>
<td>9.67</td>
<td>3:52</td>
<td>12.03</td>
<td>8.04m</td>
<td>2.01m</td>
<td>62.58m</td>
<td>46.83m</td>
</tr>
<tr>
<th>Gary</th>
<td>9.77</td>
<td>3:56</td>
<td>13.04</td>
<td>7.96m</td>
<td>2.02m</td>
<td>63.87m</td>
<td>47.73m</td>
</tr>
<tr>
<th>Dick</th>
<td>9.95</td>
<td>3:44</td>
<td>12.99</td>
<td>5.66m</td>
<td>1.97m</td>
<td>56.43m</td>
<td>43.87m</td>
</tr>
<tr>
<th>Tom</th>
<td>9.84</td>
<td>3:48</td>
<td>12.86</td>
<td>6.87m</td>
<td>1.95m</td>
<td>67.03m</td>
<td>42.73m</td>
</tr>
<tr>
<th>Harry</th>
<td>9.91</td>
<td>3:53</td>
<td>13.77</td>
<td>7.34m</td>
<td>1.94m</td>
<td>62.84m</td>
<td>46.72m</td>
</tr>
</tbody>
</table>
</section>
<section class="right">
<h2>Section in Landscape/Right</h2>
<p>This section will be printed in landscape and rotated right with:</p>
<pre>
.right {
size: landscape;
page-orientation: rotate-right;
}
</pre>
<table>
<thead>
<tr>
<th></th>
<th>100m</th>
<th>1500m</th>
<th>Hurdles</th>
<th>Long Jump</th>
<th>High Jump</th>
<th>Javelin</th>
<th>Discus</th>
</tr>
</thead>
<tbody>
<tr>
<th>Dave</th>
<td>9.65</td>
<td>3:49</td>
<td>12.64</td>
<td>8.54m</td>
<td>1.95m</td>
<td>56.65m</td>
<td>47.63m</td>
</tr>
<tr>
<th>Simon</th>
<td>9.87</td>
<td>3:52</td>
<td>11.89</td>
<td>8.16m</td>
<td>1.96m</td>
<td>59.03m</td>
<td>45.72m</td>
</tr>
<tr>
<th>Fred</th>
<td>9.67</td>
<td>3:52</td>
<td>12.03</td>
<td>8.04m</td>
<td>2.01m</td>
<td>62.58m</td>
<td>46.83m</td>
</tr>
<tr>
<th>Gary</th>
<td>9.77</td>
<td>3:56</td>
<td>13.04</td>
<td>7.96m</td>
<td>2.02m</td>
<td>63.87m</td>
<td>47.73m</td>
</tr>
<tr>
<th>Dick</th>
<td>9.95</td>
<td>3:44</td>
<td>12.99</td>
<td>5.66m</td>
<td>1.97m</td>
<td>56.43m</td>
<td>43.87m</td>
</tr>
<tr>
<th>Tom</th>
<td>9.84</td>
<td>3:48</td>
<td>12.86</td>
<td>6.87m</td>
<td>1.95m</td>
<td>67.03m</td>
<td>42.73m</td>
</tr>
<tr>
<th>Harry</th>
<td>9.91</td>
<td>3:53</td>
<td>13.77</td>
<td>7.34m</td>
<td>1.94m</td>
<td>62.84m</td>
<td>46.72m</td>
</tr>
</tbody>
</table>
</section>
</div>
const printButton = document.querySelector("#print");
printButton.addEventListener("click", () => {
window.print();
});
點選列印按鈕檢視列印時的頁面方向。