منتشر شده: ۳۰ اکتبر ۲۰۲۴
از کروم ۱۳۱ میتوانید از CSS برای اضافه کردن محتوا به حاشیه صفحات هنگام چاپ استفاده کنید. این پست مدل صفحه برای رسانههای صفحهبندی شده و نحوه استفاده از این ویژگی برای بهبود خروجی چاپ از صفحات وب شما را توضیح میدهد.
CSS شامل مشخصاتی است که با رسانههای صفحهبندیشده سروکار دارد، ماژول رسانههای صفحهبندیشده CSS و محتوای تولیدشده CSS برای رسانههای صفحهبندیشده . آنها ویژگیهایی را تعریف میکنند که فقط هنگام چاپ یک صفحه (از جمله به PDF) استفاده میشوند. عاملهای کاربری وجود دارند که از این CSS پشتیبانی میکنند و به شما امکان میدهند کتابها و سایر مطالب چاپی را از HTML و CSS تولید کنید. با این حال، این قابلیت هرگز در مرورگرهای وب به خوبی پشتیبانی نشده است، با وجود این واقعیت که ما اغلب نیاز به چاپ یا ایجاد PDF از برنامهها داریم.
کروم و فایرفاکس از at-rule @page پشتیبانی میکنند. این قانون به شما امکان میدهد اندازه صفحهای که در آن چاپ میکنید و اندازه حاشیههای اطراف محتوا را تعریف کنید. از کروم ۱۳۱، میتوانید با هدف قرار دادن حاشیه at-rule مربوطه، از محتوای تولید شده برای اضافه کردن محتوا به حاشیهها نیز استفاده کنید.
مدل صفحه
مدل صفحهای که در رسانههای صفحهبندیشده استفاده میشود، یک کادر صفحه را تعریف میکند که همان برگه کاغذ شماست. درون کادر صفحه، حاشیه صفحه ، حاشیه صفحه ، فاصلهگذاری صفحه و در نهایت ناحیهای از صفحه که محتوای شما در آن نمایش داده میشود، قرار دارد. وقتی محتوا چاپ میشود، به تعداد صفحاتی که برای گنجاندن آن لازم است، تقسیم میشود.
سپس حاشیه صفحه به ۱۶ کادر تقسیم میشود که هر کدام یک at-rule متناظر دارند.
-
@top-left-corner -
@top-left -
@top-center -
@top-right -
@top-right-corner -
@left-top -
@left-middle -
@left-bottom -
@right-top -
@right-middle -
@right-bottom -
@bottom-left-corner -
@bottom-left -
@bottom-center -
@bottom-right -
@bottom-right-corner
اندازه کادر حاشیه
ارتفاع کادرهای بالا و پایین و عرض کادرهای سمت چپ و راست توسط اندازه حاشیه تنظیم شده با استفاده از @page تعریف میشود. بنابراین کادرهای گوشه اندازه ثابتی دارند که توسط تقاطع آن حاشیهها ایجاد میشود. با این حال، سه کادر بین هر گوشه انعطافپذیر هستند. آنها به روشی مشابه کادرها در یک طرحبندی flex با استفاده از flex: auto رفتار میکنند، بنابراین برای پر کردن فضا کشیده میشوند، اما اگر یک رشته طولانی از متن را در یکی قرار دهید و در بقیه چیزی قرار ندهید، کادری که متن دارد به جای اینکه متن را در بر بگیرد، بزرگ میشود.
اضافه کردن محتوا به کادرهای حاشیه
برای افزودن محتوا به کادرهای حاشیه، از محتوای تولید شده توسط CSS استفاده کنید، درست همانطور که با شبه عناصر ::before و ::after این کار را انجام میدهید. در این حالت، از قانون at مربوط به کادری که میخواهید هدف قرار دهید استفاده کنید. CSS زیر متن "کتاب من" را به کادر حاشیه پایین سمت چپ یا صفحات سمت راست اضافه میکند. همچنین به آن متن استایل میدهد.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
علاوه بر رشتههای متنی، میتوانید شمارندههای صفحه را به حاشیهها اضافه کنید. شمارنده page از پیش تعریف شده شامل صفحه فعلی است. CSS زیر آن را به پایین سمت راست صفحات سمت راست و پایین سمت چپ صفحات سمت چپ اضافه میکند.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
همچنین یک شمارنده pages وجود دارد که همیشه تعداد کل صفحات را نشان میدهد.
نکاتی که باید هنگام استفاده از حاشیه صفحه به آنها توجه کنید
اگر از مرورگر چاپ میکنید، مرورگر به طور خودکار مقداری حاشیه صفحه اضافه میکند، اگر جایی برای نمایش آن وجود داشته باشد. این کار را حتی اگر محتوایی اضافه کرده باشید، انجام میدهد. این هدرها و پاورقیهای ایجاد شده به صورت خودکار را میتوان در کادر محاورهای چاپ غیرفعال کرد.
اگر حاشیههای صفحه را روی ۰ تنظیم کنید، یا مقداری آنقدر کوچک که جایی برای سرصفحهها و پاورقیهای مرورگر وجود نداشته باشد، آنها نمایش داده نمیشوند.
با توجه به مفهوم طرحبندی پیشفرض صفحه در کرومیوم ، اگر صفحه اول سند چاپشده شما جایی برای محتوای خودکار نداشته باشد، این امر مانع از نمایش محتوای مرورگر در صفحات بعدی میشود، حتی اگر فضای کافی داشته باشند.
احتمالات آینده برای رسانههای صفحهبندیشده
مشخصات رسانههای صفحهبندیشده شامل چندین ویژگی دیگر است که در مقاله «طراحی برای چاپ با CSS» توضیح داده شده است. اگر برای هر یک از ویژگیهای زیر موردی برای استفاده دارید، آن را به اشکالات مرتبط اضافه کنید.
تنظیم رشتهها
کتابها اغلب عنوان فصل فعلی را در حاشیهها چاپ میکنند. این عنوان را نمیتوان در CSS شما کدنویسی کرد زیرا با حرکت در کتاب تغییر میکند. ویژگی string-set به شما امکان میدهد مقداری را از HTML خود تنظیم کنید تا سپس در محتوای تولید شده استفاده کنید. CSS زیر فرض میکند که عناوین فصلها به صورت <h1> علامتگذاری شدهاند. این CSS محتوای هر <h1> را میگیرد و از آن در حاشیه بالا سمت راست در صفحات سمت راست استفاده میکند. وقتی به <h1> بعدی میرسد، مقدار برای حاشیههای بعد از آن نقطه بهروزرسانی میشود.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
اشکال کرومیوم برای string-set و string() .
ارجاعات متقابل
پس از چاپ یک سند، ارجاعات به صفحات دیگر معمولاً با استفاده از شماره صفحهای که میتوان مرجع را در آن یافت، مشخص میشوند. این ارجاعات متقابل را میتوان با استفاده از target-counter ایجاد کرد. هنگامی که این ارجاعات به یک لینک اعمال میشوند، لینک به گونهای عمل میکند که به مرجع موجود در وب پرش کند و هنگام چاپ، شماره صفحه نمایش داده میشود.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
اشکال کرومیوم برای ارجاعات متقابل .
پاورقیها
پاورقیها همچنین یکی از ویژگیهای مشخصات رسانههای صفحهبندی شده هستند. در HTML، از یک کلاس برای شناسایی متنی که باید پاورقی باشد استفاده کنید، برای مثال:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
سپس از مقدار footnote float برای تبدیل این متن به پاورقی استفاده کنید. این متن هنگام چاپ سند از پاراگراف حذف شده و به عنوان پاورقی نمایش داده میشود.
.fn {
float: footnote;
}