امروزه طراحی برای چاپ در دنیای وب نیز اهمیت زیادی پیدا کرده است و ویژگی‌های CSS برای این منظور راهکارهایی ارائه می‌دهند که بسیار کاربردی‌اند. برای مثال، استفاده از ویژگی @page به ما اجازه می‌دهد تا مشخصات مخصوص صفحات چاپی را تعیین کنیم.
یکی از کاربردهای جذاب و مهم این ویژگی، تعیین اندازه صفحه توسط صفت size است. این صفت به شما این امکان را می‌دهد که اندازه صفحه چاپ را دقیقاً مشخص کنید، به‌ویژه زمانی که می‌خواهید چاپ به فرمت‌های خاصی مثل A4، Letter و غیره باشد.
استفاده از @page به طراحان این قدرت را می‌دهد که به راحتی کنترل بیشتری بر خروجی چاپ داشته باشند. شما می‌توانید با استفاده از @page و صفت size چاپ خود را دقیقا مطابق با خواسته‌هایتان تنظیم کنید.
همچنین شما قادر خواهید بود که به راحتی صفحات چاپی خود را شخصی‌سازی کنید و برای مثال، طول و عرض صفحات را تعیین کنید یا صفحات را در حالت landscape یا portrait تنظیم کنید.
در ادامه، به یک مثال کلیدی از نحوه استفاده از @page و size خواهیم پرداخت و بخش به بخش آن را برای شما شرح خواهیم داد.
@page {
size: A4 portrait;
margin: 1cm;
}
@page landscape {
size: A4 landscape;
}
بررسی کد:
@page: این ویژگی برای تعریف مشخصات صفحه چاپ استفاده می‌شود و شما می‌توانید در اینجا به تنظیمات خاصی مانند اندازه، حاشیه و غیره بپردازید.
size: A4 portrait;: این خط کد، اندازه صفحه را به A4 با جهت‌گیری portrait تنظیم می‌کند.
margin: 1cm;: این بخش از کد حاشیه صفحه چاپ را به 1 سانتیمتر از تمامی جهات تنظیم می‌کند.
@page landscape: این قسمت برای تعریف تنظیمات خاص زمانی که صفحه به صورت landscape چاپ می‌شود، استفاده می‌شود.
size: A4 landscape;: این خط درخصوص تنظیم اندازه صفحه به A4 با جهت‌گیری landscape است.