تاريخ النشر: 30 تشرين الأول (أكتوبر) 2024
اعتبارًا من الإصدار 131 من Chrome، يمكنك استخدام CSS لإضافة محتوى إلى هوامش الصفحات عند طباعتها. توضّح هذه المشاركة نموذج الصفحة للوسائط المفصّلة وكيفية استخدام هذه الميزة لتحسين الإخراج المخصّص للطباعة من صفحات الويب.
تتضمّن CSS مواصفات تتعلّق بالوسائط المفصّلة، ووحدة الوسائط المفصّلة في CSS، والمحتوى من إنشاء CSS للوسائط المفصّلة. وهي تحدّد الميزات التي يتم استخدامها فقط عند طباعة صفحة (بما في ذلك تحويلها إلى ملف PDF). هناك وكلاء مستخدمين يتوافقون مع CSS هذا، ويسمحون لك بإنشاء كتب ومواد مطبوعة أخرى من HTML وCSS. ومع ذلك، لم تكن هذه الوظيفة متاحة مطلقًا في متصفحات الويب، على الرغم من أنّنا نحتاج في كثير من الأحيان إلى طباعة ملفات PDF أو إنشاؤها من التطبيقات.
يتوافق Chrome وFirefox مع قاعدة at-rule التي تستخدم الرمز
@page. تتيح لك هذه القاعدة تحديد حجم الصفحة التي تطبع عليها وحجم المَعلمات حول المحتوى. اعتبارًا من الإصدار 131 من Chrome، يمكنك أيضًا استخدام المحتوى الذي تم إنشاؤه
لإضافة محتوى إلى الهوامش، وذلك من خلال استهداف قاعدة الهامش ذات الصلة.
نموذج الصفحة
يحدِّد نموذج الصفحة المستخدَم في الوسائط المفصَّلة صندوق الصفحة، وهو ورقة الورق. يتضمّن مربّع الصفحة هامش الصفحة وحدود الصفحة ومَعلمة الحشو، وأخيرًا منطقة الصفحة التي يتم عرض المحتوى فيها. عند طباعة المحتوى، يتم تقسيمه إلى عدد الصفحات المطلوب لاستيعابه.
بعد ذلك، يتم تقسيم هامش الصفحة إلى 16 مربّعًا، ولكلّ مربّع قاعدة 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: 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 يحتوي دائمًا على إجمالي عدد الصفحات.
ملاحظات عند استخدام هوامش الصفحة
في حال الطباعة من متصفّح، سيضيف المتصفّح تلقائيًا بعضًا من محتوى margem الصفحة إذا كان هناك مساحة لعرضه. وسيحدث ذلك حتى إذا أضفت محتوى. يمكن إيقاف هذه العناوين والتذييلات التي يتم إنشاؤها تلقائيًا في مربّع حوار الطباعة.
إذا ضبطت الهوامش على صفحة على 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;
}
}
خطأ في Chromium في string-set وstring()
الإحالات المرجعية المتبادلة
بعد طباعة المستند، يتم عادةً الإشارة إلى المراجع إلى الصفحات الأخرى باستخدام
رقم الصفحة التي يمكن العثور على المرجع فيها. يمكن إنشاء هذه الإحالات المتبادلة
باستخدام target-counter. عند تطبيقها على رابط، يعمل الرابط على
الانتقال إلى المرجع على الويب، وعند الطباعة، يظهر رقم الصفحة.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
خطأ في Chromium في ما يتعلق بالمراجع المتداخلة
الحواشي السفلية
تشكّل الحواشي السفلية أيضًا ميزة من ميزات مواصفات الوسائط المفصّلة. في HTML، استخدِم فئة لتحديد النص الذي يجب أن يكون حاشية سفلية، على سبيل المثال:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
بعد ذلك، استخدِم القيمة footnote من float لتحويل هذا النص إلى حواشي سفلية.
ستتم إزالته من الفقرة عند طباعة المستند وعرضه ك footnote (ملاحظة سفلية).
.fn {
float: footnote;
}