قاعدة @page في CSS: إتقان تخصيص والتحكم في أوراق أنماط الطباعة لجمهور عالمي

في عالمنا الرقمي اليوم، من السهل أن نغفل أهمية أوراق أنماط الطباعة. ومع ذلك، فإن توفير نسخة مطبوعة مُنسقة جيدًا ومُحسّنة من محتوى الويب الخاص بك أمر بالغ الأهمية لإمكانية الوصول، والأرشفة، والقراءة دون اتصال بالإنترنت. تُمكّنك قاعدة @page في CSS من التحكم في مظهر صفحات الويب الخاصة بك وتخصيصها عند طباعتها، مما يضمن تجربة سلسة واحترافية للمستخدمين في جميع أنحاء العالم. سيستكشف هذا الدليل الشامل تعقيدات قاعدة @page وكيفية الاستفادة منها لتخصيص أوراق أنماط الطباعة بشكل فعال.

لماذا تهم أوراق أنماط الطباعة في العصر الرقمي

بينما يُعد الإنترنت وسيلة مرئية في الغالب، إلا أن الحاجة إلى المستندات المطبوعة لا تزال قائمة لعدة أسباب:

• إمكانية الوصول: قد يفضل المستخدمون الذين يعانون من إعاقات بصرية قراءة المحتوى المطبوع أو استخدام التقنيات المساعدة التي تعمل بشكل أفضل مع المستندات المطبوعة.
• الأرشفة: تعمل النسخ المطبوعة كسجل دائم، لا يتأثر بتحديثات الموقع الإلكتروني أو فقدان البيانات المحتمل.
• القراءة دون اتصال: قد يفضل المستخدمون قراءة المقالات أو التقارير الطويلة دون اتصال بالإنترنت، خاصة في المناطق ذات الاتصال المحدود بالإنترنت. فكر في الباحثين في المواقع النائية، أو المسافرين الذين لا يملكون وصولاً موثوقًا.
• التوثيق الرسمي: لا تزال العديد من الصناعات تعتمد على المستندات المطبوعة للعقود والفواتير والسجلات القانونية.
• تفضيل المستخدم: ببساطة، يفضل بعض المستخدمين التجربة اللمسية لقراءة المواد المطبوعة.

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

فهم قاعدة @page في CSS

تسمح لك قاعدة @page في CSS بتحديد الأنماط خصيصًا للصفحات المطبوعة. فهي توفر التحكم في جوانب مختلفة من الإخراج المطبوع، مثل الهوامش وحجم الصفحة والرؤوس والتذييلات والمزيد. على عكس قواعد CSS العادية التي تنطبق على الشاشة، فإن قاعدة @page مصممة خصيصًا لوسيط الطباعة.

الصيغة (Syntax)

الصيغة الأساسية لقاعدة @page هي كما يلي:

            @page {
 /* CSS declarations for print styles */
}

            

              
                Copy
              
            
          

يمكنك أيضًا تحديد مُحدِّد لاستهداف صفحات معينة، مثل الصفحة الأولى أو الصفحات اليسرى/اليمنى:

            @page :first {
 /* Styles for the first page */
}

@page :left {
 /* Styles for left pages */
}

@page :right {
 /* Styles for right pages */
}

            

              
                Copy
              
            
          

تعتبر المُحدِّدات :left و :right مفيدة بشكل خاص لإنشاء تخطيطات مختلفة للصفحات المتقابلة في كتاب أو طباعة بنمط المجلة.

الخصائص الشائعة المستخدمة مع @page

هناك العديد من خصائص CSS ذات صلة خاصة عند العمل مع قاعدة @page:

• size: تحدد حجم الصفحة. تشمل القيم الشائعة A4، وletter، وlegal، وlandscape.
• margin: تضبط الهوامش حول محتوى الصفحة. يمكنك تحديد هوامش مختلفة للجوانب العلوية واليمنى والسفلية واليسرى.
• margin-top، margin-right، margin-bottom، margin-left: خصائص الهامش الفردية للتحكم الدقيق.
• padding: تحدد الحشوة حول المحتوى داخل الهوامش (أقل استخدامًا من الهوامش مباشرة).
• orphans: تحدد الحد الأدنى لعدد أسطر الفقرة التي يجب تركها في أسفل الصفحة. تساعد في منع الأسطر اليتيمة.
• widows: تحدد الحد الأدنى لعدد أسطر الفقرة التي يجب تركها في أعلى الصفحة. تمنع الأسطر الأرملة.
• marks: تضيف علامات القص أو علامات التسجيل إلى الصفحة المطبوعة (مفيدة للطباعة الاحترافية).

إنشاء ورقة أنماط طباعة أساسية

الخطوة الأولى في إنشاء ورقة أنماط طباعة هي ربطها بمستند HTML الخاص بك. يمكنك القيام بذلك باستخدام الوسم <link> مع تعيين السمة media إلى "print":

            <link rel="stylesheet" href="print.css" media="print">

            

              
                Copy
              
            
          

يضمن هذا تطبيق ورقة الأنماط فقط عند طباعة الصفحة. بدلاً من ذلك، يمكنك استخدام استعلام الوسائط (media query) داخل ملف CSS الحالي الخاص بك:

            @media print {
 /* CSS rules for print styles */
}

            

              
                Copy
              
            
          

يحافظ هذا النهج على أنماط الطباعة الخاصة بك في نفس ملف أنماط الشاشة، ولكنه قد يجعل إدارة الملف أكثر صعوبة. يوصى عمومًا باستخدام ملف print.css منفصل للمشاريع الكبيرة.

مثال: ورقة أنماط طباعة بسيطة

إليك مثال أساسي لملف print.css يضبط حجم الصفحة على A4، ويعدل الهوامش، ويخفي عناصر التنقل:

            @page {
 size: A4;
 margin: 2cm;
}

nav, aside, header, footer {
 display: none;
}

body {
 font-family: sans-serif;
 font-size: 12pt;
 line-height: 1.5;
}

a {
 color: black !important; /* Override screen styles */
 text-decoration: none !important;
}

            

              
                Copy
              
            
          

تخفي ورقة الأنماط هذه العناصر غير ذات الصلة بالمحتوى المطبوع، مثل قوائم التنقل والتذييلات. كما أنها تحدد خطًا أساسيًا وارتفاع سطر لسهولة القراءة. يتم استخدام علامة !important لتجاوز الأنماط التي قد يتم تعريفها للعرض على الشاشة.

التخصيص المتقدم لأوراق أنماط الطباعة

بالإضافة إلى الأنماط الأساسية، توفر قاعدة @page وأوراق أنماط الطباعة العديد من خيارات التخصيص المتقدمة.

فواصل الصفحات

يعد التحكم في فواصل الصفحات أمرًا ضروريًا لإنشاء مستندات مطبوعة جيدة التنسيق. توفر CSS العديد من الخصائص لإدارة فواصل الصفحات:

• page-break-before: تحدد ما إذا كان يجب أن يحدث فاصل صفحة قبل عنصر ما. تشمل القيم auto، وalways، وavoid، وleft، وright.
• page-break-after: تحدد ما إذا كان يجب أن يحدث فاصل صفحة بعد عنصر ما. القيم هي نفسها لـ page-break-before.
• page-break-inside: تحدد ما إذا كان يُسمح بفاصل صفحة داخل عنصر ما. تشمل القيم auto و avoid.

على سبيل المثال، للتأكد من أن العناوين يتبعها دائمًا محتواها، يمكنك استخدام كود CSS التالي:

            h2, h3 {
 page-break-after: avoid;
}

p {
 page-break-inside: avoid;
}

            

              
                Copy
              
            
          

يمنع هذا ترك العناوين يتيمة في أسفل الصفحة وتقسيم الفقرات بشكل غير ملائم عبر الصفحات. كن حذرًا من الإفراط في استخدام `page-break-inside: avoid` حيث يمكن أن يؤدي إلى مساحة صفحة غير مستغلة بشكل كافٍ وامتدادات طويلة محتملة من المحتوى دون فواصل. يجب تحقيق التوازن.

إنشاء محتوى باستخدام ::before و ::after

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

لإضافة أرقام الصفحات إلى تذييل كل صفحة، يمكنك استخدام كود CSS التالي:

            @page {
 @bottom-right {
 content: "Page " counter(page) " of " counter(pages);
 }
}

            

              
                Copy
              
            
          

يستخدم هذا الكود دالة counter() لعرض رقم الصفحة الحالي والعدد الإجمالي للصفحات. تضع القاعدة @bottom-right المحتوى في الزاوية اليمنى السفلية من الصفحة. يمكنك بالمثل استخدام @top-left، و@top-right، و@bottom-left و @top-center، و@bottom-center لوضع المحتوى في مناطق أخرى من الصفحة.

للتخطيطات الأكثر تعقيدًا، قد تحتاج إلى استخدام مزيج من التموضع المطلق والمحتوى المُنشأ. على سبيل المثال، لإضافة علامة مائية إلى كل صفحة، يمكنك استخدام كود CSS التالي:

            body::before {
 content: "CONFIDENTIAL";
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(-45deg);
 font-size: 5em;
 color: #ccc;
 z-index: -1;
 pointer-events: none; /* Avoid interfering with interactions */
}

            

              
                Copy
              
            
          

ينشئ هذا علامة مائية تتمركز في الصفحة وتُدار بزاوية. تضمن خاصية z-index وضع العلامة المائية خلف المحتوى، وتمنع خاصية pointer-events: none تداخلها مع تفاعلات المستخدم.

التعامل مع الصور والرسومات

عند إنشاء أوراق أنماط للطباعة، من المهم مراعاة كيفية التعامل مع الصور والرسومات. قد تحتاج إلى ضبط حجمها أو دقتها أو رؤيتها لتحسينها للطباعة.

على سبيل المثال، لتقليل حجم الصور الكبيرة، يمكنك استخدام خاصية max-width:

            img {
 max-width: 100%;
 height: auto;
}

            

              
                Copy
              
            
          

يضمن هذا عدم تجاوز الصور لحدود الصفحة. قد ترغب أيضًا في التفكير في استخدام صور عالية الدقة للطباعة لضمان ظهورها واضحة ونقية.

في بعض الحالات، قد ترغب في إخفاء صور أو رسومات معينة تمامًا. على سبيل المثال، يمكن إخفاء الصور الزخرفية غير الضرورية للمحتوى باستخدام خاصية display: none:

            .decorative-image {
 display: none;
}

            

              
                Copy
              
            
          

تحسين الجداول للطباعة

يمكن أن يكون تنسيق الجداول للطباعة تحديًا خاصًا. قد تحتاج إلى ضبط عرض الأعمدة وأحجام الخطوط وفواصل الصفحات لضمان أن الجداول قابلة للقراءة وتتناسب مع حدود الصفحة.

لمنع تقسيم الجداول عبر الصفحات، يمكنك استخدام خاصية table-layout: fixed:

            table {
 table-layout: fixed;
 width: 100%;
}

            

              
                Copy
              
            
          

يفرض هذا على الجدول استخدام تخطيط ثابت، مما يمكن أن يساعد في منعه من تجاوز حدود الصفحة. قد تحتاج أيضًا إلى ضبط عرض الأعمدة لضمان ظهور جميع الأعمدة.

بالنسبة للجداول الطويلة، يمكنك استخدام عنصري thead و tfoot لتكرار رأس وتذييل الجدول في كل صفحة:

            thead {
 display: table-header-group;
}

tfoot {
 display: table-footer-group;
}

            

              
                Copy
              
            
          

يسهل هذا على القراء فهم محتوى الجدول، حتى عندما يمتد على صفحات متعددة.

اعتبارات عالمية لأوراق أنماط الطباعة

عند تصميم أوراق أنماط الطباعة لجمهور عالمي، من المهم مراعاة الاختلافات الثقافية والتنوعات اللغوية. فيما يلي بعض الاعتبارات الرئيسية:

• أحجام الورق: تستخدم المناطق المختلفة أحجام ورق مختلفة. بينما يشيع استخدام A4 في أوروبا وآسيا، فإن حجم Letter هو المعيار في أمريكا الشمالية. قدم خيارات أو قم بتكييف تصميمك لاستيعاب كليهما. يمكنك استخدام استعلامات الوسائط في CSS لاستهداف أحجام ورق محددة.
• تنسيقات التاريخ والأرقام: تأكد من تنسيق التواريخ والأرقام وفقًا للاتفاقيات المحلية. على سبيل المثال، يتم تنسيق التواريخ عادةً كـ MM/DD/YYYY في الولايات المتحدة، بينما يكون DD/MM/YYYY أكثر شيوعًا في أوروبا. وبالمثل، تختلف تنسيقات الأرقام من حيث الفاصل العشري وفاصل الآلاف. فكر في استخدام مكتبات JavaScript لتنسيق هذه العناصر ديناميكيًا بناءً على لغة المستخدم.
• الطباعة (Typography): اختر خطوطًا تدعم مجموعة واسعة من الأحرف واللغات. فكر في استخدام خطوط الويب التي يمكن تضمينها في المستند المطبوع. ومع ذلك، كن على دراية بقيود الترخيص وأحجام الملفات. تعد الخطوط مفتوحة المصدر مثل Noto Sans و Roboto خيارات جيدة للتدويل.
• اللغات من اليمين إلى اليسار: إذا كان موقعك يدعم لغات من اليمين إلى اليسار مثل العربية أو العبرية، فتأكد من أن ورقة أنماط الطباعة الخاصة بك تتعامل مع اتجاه النص بشكل صحيح. استخدم خاصيتي direction و unicode-bidi للتحكم في اتجاه النص.
• إمكانية الوصول: اتبع إرشادات إمكانية الوصول لضمان أن مستنداتك المطبوعة متاحة للمستخدمين ذوي الإعاقة. استخدم أحجام خطوط مناسبة، وتباينات ألوان، ونصًا بديلاً للصور.
• الترجمة: إذا كان موقعك متاحًا بلغات متعددة، فقدم إصدارات مترجمة من أوراق أنماط الطباعة الخاصة بك. يضمن هذا أن المحتوى المطبوع متسق مع لغة الموقع.

مثال: التعامل مع أحجام الورق المختلفة

يمكنك استخدام استعلامات الوسائط في CSS لتطبيق أنماط مختلفة بناءً على حجم الورق:

            @media print and (size: A4) {
 /* Styles for A4 paper */
 margin: 2cm;
}

@media print and (size: letter) {
 /* Styles for letter paper */
 margin: 1in;
}

            

              
                Copy
              
            
          

يسمح لك هذا بتعديل الهوامش والخصائص الأخرى لتناسب حجم الورق المحدد.

اختبار وتصحيح أوراق أنماط الطباعة

يعد اختبار أوراق أنماط الطباعة الخاصة بك أمرًا بالغ الأهمية لضمان عملها كما هو متوقع. فيما يلي بعض النصائح لاختبار وتصحيح أوراق أنماط الطباعة:

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

الخاتمة

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

لا تستهين بقوة ورقة أنماط الطباعة المصممة جيدًا! يمكنها تحسين تجربة المستخدم بشكل كبير وضمان إمكانية وصول جمهور أوسع إلى المحتوى الخاص بك، بغض النظر عن طريقة القراءة المفضلة لديهم. احتضن قاعدة @page وأنشئ صفحات ويب صديقة للطباعة تترك انطباعًا دائمًا.