تاریخ انتشار: 30 اکتبر 2024
از Chrome 131 می توانید از CSS برای اضافه کردن محتوا به حاشیه صفحات هنگام چاپ استفاده کنید. این پست مدل صفحه را برای رسانه های صفحه بندی شده و نحوه استفاده از این ویژگی برای بهبود خروجی چاپ از صفحات وب خود توضیح می دهد.
CSS شامل مشخصاتی است که با رسانه های صفحه بندی شده، ماژول رسانه صفحه بندی شده CSS و محتوای تولید شده CSS برای رسانه های صفحه شده سروکار دارد. آنها ویژگی هایی را تعریف می کنند که فقط در هنگام چاپ صفحه (از جمله در PDF) استفاده می شوند. عوامل کاربر وجود دارند که از این CSS پشتیبانی می‌کنند و به شما اجازه می‌دهند کتاب و سایر مطالب چاپی را از HTML و CSS تولید کنید. با این حال، این عملکرد هرگز به خوبی در مرورگرهای وب پشتیبانی نشده است، علیرغم این واقعیت که ما اغلب نیاز به چاپ یا ایجاد PDF از برنامه ها داریم.
کروم و فایرفاکس از @page at-rule پشتیبانی می کنند. این قانون به شما امکان می دهد اندازه صفحه ای را که در آن چاپ می کنید و اندازه حاشیه های اطراف محتوا را تعیین کنید. از Chrome 131، می‌توانید با هدف قرار دادن حاشیه مربوطه در قانون، از محتوای تولید شده برای افزودن محتوا به حاشیه‌ها نیز استفاده کنید.
مدل صفحه
مدل صفحه مورد استفاده در رسانه های صفحه بندی شده یک جعبه صفحه را تعریف می کند، این صفحه کاغذ شما است. در داخل کادر صفحه یک حاشیه صفحه ، یک حاشیه صفحه ، padding صفحه و در نهایت ناحیه صفحه ای که محتوای شما در آن نمایش داده می شود وجود دارد. هنگامی که محتوا چاپ می شود، به تعداد صفحات مورد نیاز برای حاوی آن تقسیم می شود.
سپس حاشیه صفحه به 16 کادر تقسیم می‌شود که هر کدام دارای یک قانون مربوطه هستند.
-
@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: auto به روشی مشابه با جعبه‌ها در طرح‌بندی انعطاف‌پذیر رفتار می‌کنند، بنابراین برای پر کردن فضا کشیده می‌شوند، اما اگر یک رشته طولانی از متن را در یکی قرار دهید و در بقیه هیچ‌چیز را نداشته باشید، متنی که دارای متن است رشد می‌کند. به جای پیچیدن متن
محتوا را به کادرهای حاشیه اضافه کنید
برای افزودن محتوا به جعبه‌های حاشیه، از محتوای تولید شده CSS، درست مانند عناصر ::before و ::after استفاده کنید. در این حالت از at-rule مربوط به جعبه ای که می خواهید هدف قرار دهید استفاده کنید. 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 وجود دارد که همیشه شامل تعداد کل صفحات است.
نکاتی که هنگام استفاده از حاشیه صفحه باید به آن توجه کنید
اگر از یک مرورگر چاپ می کنید، مرورگر به طور خودکار مقداری از محتوای حاشیه صفحه را در صورت وجود فضایی برای نمایش اضافه می کند. حتی اگر محتوایی اضافه کرده باشید این کار را انجام می دهد. این سرصفحه ها و پاورقی ها که به طور خودکار تولید می شوند را می توان در گفتگوی چاپ خاموش کرد.
اگر حاشیه‌های صفحه را روی 0 تنظیم کنید یا مقدار آنقدر کوچک باشد که فضایی برای سرصفحه‌ها و پاورقی‌های مرورگر نباشد، نمایش داده نمی‌شوند.
با توجه به مفهوم طرح‌بندی صفحه پیش‌فرض در Chromium ، اگر صفحه اول سند چاپی شما جایی برای محتوای خودکار نداشته باشد، این امر از نمایش محتوای مرورگر در صفحات بعدی، حتی اگر فضا داشته باشد، جلوگیری می‌کند.
احتمالات آینده برای رسانه های صفحه بندی شده
مشخصات رسانه صفحه‌دار شامل چندین ویژگی دیگر است که در مقاله طراحی برای چاپ با CSS توضیح داده شده است. اگر مورد استفاده برای هر یک از ویژگی های زیر دارید، آن را به باگ های مرتبط اضافه کنید.
رشته ها را تنظیم کنید
کتاب ها اغلب عنوان فصل جاری را در حاشیه چاپ می کنند. این عنوان را نمی توان در CSS شما کدگذاری کرد زیرا با حرکت در کتاب تغییر می کند. ویژگی string-set به شما امکان می دهد مقداری از HTML خود تعیین کنید تا در محتوای تولید شده از آن استفاده کنید. CSS زیر فرض می کند که عناوین فصل به صورت <h1> علامت گذاری شده اند. محتوای هر <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;
}