مقدمه
ویژگی @page یکی از ویژگی‌های جالب در CSS است که به ما این امکان را می‌دهد تا نحوه نمایش صفحات چاپی را کنترل کنیم. تصور کنید که قصد دارید سند خود را به صورت چاپی تنظیم کنید؛ در چنین مواردی استفاده از این ویژگی می‌تواند به کارتان بیاید. حالا اگر بخواهید جهت صفحه چاپ را نیز مشخص کنید، می‌توانید از ویژگی .page-orientation استفاده کنید. این ویژگی به شما امکان می‌دهد تا صفحات را به صورت افقی یا عمودی تنظیم کنید، که برای بسیاری از اسناد ضروری است.
در اینجا قصد داریم درباره نحوه استفاده از این ویژگی صحبت کنیم و کاربرد آن را با مثال‌هایی توضیح دهیم. این ویژگی به خصوص زمانی که با محتوای قابل چاپ سروکار دارید، بسیار حائز اهمیت است. با استفاده از این قابلیت، کاربر می‌تواند اسنادی را که نیازمند نمایش خاصی هستند به درستی مدیریت کند. در ادامه، کدی برای درک بهتر این فرآیند آورده شده است.
کد توضیحی
<style>
@page {
size: A4;
}
@page :left {
margin-left: 2cm;
}
@page :right {
margin-right: 2cm;
@bottom-right-corner {
content: "Page: " counter(page);
}
}
@page {
page-orientation: landscape;
}
</style>
توضیح کد بالا
<style> - بخش <style> برای نوشتن CSS به کار می‌رود.
@page - این دستور CSS به تنظیم مشخصات چاپ صفحه کمک می‌کند.
size: A4; - اندازه کاغذ را بر اساس استاندارد A4 تنظیم می‌کند.
@page :left - تنظیمات مخصوص برای صفحات چپ که در چاپ دوطرفه کاربرد دارد.
margin-left: 2cm; - حاشیه صفحه‌ی چپ به اندازه ۲ سانتیمتر تنظیم می‌شود.
@page :right - تنظیمات مخصوص برای صفحات راست که در چاپ دوطرفه کاربرد دارد.
margin-right: 2cm; - حاشیه صفحه‌ی راست به اندازه ۲ سانتیمتر تنظیم می‌شود.
@bottom-right-corner - مختصاتی برای تنظیم محتوای گوشه سمت راست پایین.
content: "Page: " counter(page); - شماره صفحه را در گوشه‌ی راست پایین چاپ می‌کند.
page-orientation: landscape; - جهت صفحه چاپ را به حالت افقی (landscape) تغییر می‌دهد.
</style> - پایان تعریف CSS.