إضافة محتوى إلى هوامش صفحات الويب عند طباعتها باستخدام CSS

Rachel Andrew

تاريخ النشر: 30 أكتوبر 2024

بدءًا من الإصدار 131 من Chrome، يمكنك استخدام CSS لإضافة محتوى إلى هوامش الصفحات عند طباعتها. توضّح هذه المشاركة نموذج الصفحة للوسائط المقسّمة إلى صفحات، وكيفية استخدام هذه الميزة لتحسين ناتج الطباعة من صفحات الويب.

تتضمّن CSS مواصفات تتناول الوسائط المقسّمة إلى صفحات، مثل وحدة CSS للوسائط المقسّمة إلى صفحات والمحتوى من إنشاء CSS للوسائط المقسّمة إلى صفحات. وهي تحدّد الميزات التي يتم استخدامها فقط عند طباعة صفحة (بما في ذلك الطباعة إلى ملف PDF). هناك برامج وكيل مستخدم متوافقة مع CSS هذه، وتتيح لك إنشاء كتب ومواد مطبوعة أخرى من HTML وCSS. ومع ذلك، لم تكن هذه الوظيفة متاحة بشكل جيد في متصفحات الويب، على الرغم من أنّنا نحتاج في كثير من الأحيان إلى طباعة أو إنشاء ملفات PDF من التطبيقات.

يتوافق كل من Chrome وFirefox مع قاعدة @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، لذا تتمدّد لملء المساحة، ولكن إذا وضعت سلسلة نصية طويلة في أحدها ولم تضع أي شيء في العناصر الأخرى، سيتمدّد العنصر الذي يحتوي على النص بدلاً من أن يلتف النص.

الصفحة التي تحتوي على 16 مربّعًا معروضة في الهامش — تحيط الهامش بمنطقة الصفحة، ويحتوي على 16 مربّع هامش مُعنوَن.

إضافة محتوى إلى مربّعات الهوامش

لإضافة محتوى إلى مربّعات الهامش، استخدِم المحتوى من إنشاء CSS، تمامًا كما تفعل مع العنصرَين الزائفَين ::before و::after. في هذه الحالة، استخدِم قاعدة @ ذات الصلة بالمربّع الذي تريد استهدافه. تضيف ورقة الأنماط المتتالية التالية النص "كتابي" إلى مربع الهامش في أسفل يسار الصفحة أو إلى الصفحات اليمنى. ويتم أيضًا تنسيق هذا النص.

@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;
  }
}

خطأ في 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 لتحويل هذا النص إلى حواشٍ سفلية. ستتم إزالته من الفقرة عند طباعة المستند وسيظهر كحاشية سفلية.

.fn {
  float: footnote;
}

خطأ في Chromium بشأن الحواشي السفلية

إضافة محتوى إلى هوامش صفحات الويب عند طباعتها باستخدام CSS تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.