تاريخ النشر: 30 تشرين الأول (أكتوبر) 2024
بدءًا من الإصدار 131 من Chrome، يمكنك استخدام صفحات الأنماط المتتالية (CSS) لإضافة محتوى إلى هوامش الصفحات عند طباعتها. توضّح هذه المشاركة نموذج الصفحة للوسائط المفصّلة وكيفية استخدام هذه الميزة لتحسين الإخراج المخصّص للطباعة من صفحات الويب.
تتضمّن CSS مواصفات تتعلّق بالوسائط المفصّلة، ووحدة الوسائط المفصّلة في CSS، والمحتوى من إنشاء CSS للوسائط المفصّلة. وهي تحدّد الميزات التي يتم استخدامها فقط عند طباعة صفحة (بما في ذلك تحويلها إلى ملف PDF). هناك وكلاء مستخدمين يتوافقون مع CSS هذا، ويسمحون لك بإنشاء كتب ومواد مطبوعة أخرى من HTML وCSS. ومع ذلك، لم تكن هذه الوظيفة متوافقة أبدًا مع متصفحات الويب، على الرغم من أننا نحتاج غالبًا إلى طباعة ملفات PDF أو إنشائها من التطبيقات.
يتوافق Chrome وFirefox مع قاعدة at-rule التي تستخدم الرمز
@page. تتيح لك هذه القاعدة تحديد حجم الصفحة التي تطبع عليها وحجم المَعلمات حول المحتوى. بدءًا من Chrome 131، يمكنك أيضًا استخدام المحتوى الذي تم إنشاؤه
لإضافة محتوى إلى الهوامش، عبر استهداف الهامش ذي الصلة في القاعدة.
نموذج الصفحة
يحدِّد نموذج الصفحة المستخدَم في الوسائط المفصَّلة صندوق الصفحة، وهو عبارة عن ورقة ملفوفة. يتضمّن مربّع الصفحة هامش الصفحة وحدود الصفحة ومَعلمة الحشو في الصفحة، وأخيرًا منطقة الصفحة التي يتم عرض المحتوى فيها. عند طباعة المحتوى، يتم تقسيمه إلى عدد الصفحات المطلوب لاستيعابه.
بعد ذلك، يتم تقسيم هامش الصفحة إلى 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. في هذه الحالة، استخدم القاعدة
المتعلقة بالمربع الذي تريد استهدافه. تضيف خدمة 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>
بعد ذلك، استخدِم القيمة float لـ footnote لتحويل هذا النص إلى حواشٍ سفلية.
ستتم إزالته من الفقرة عند طباعة المستند وعرضه ك footnote (ملاحظة سفلية).
.fn {
float: footnote;
}