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

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

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

إليكم ما يقوله Haydon Pickering ، مؤلف كتاب Inclusive Design Patterns ، حول هذا الأمر: "لم أستخدم طابعة منزلية لفترة طويلة. النقطة المهمة هنا هي أنني أشعر أنها تنقطع بعد عشر دقائق من بدء الطباعة. لكنني لست كل شيء ".

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

1. استخدام أنماط CSS للطباعة

أفضل طريقة لتضمين الأنماط القابلة للطباعة على الصفحة هي الإعلان عن قاعدةmedia في ملف CSS الرئيسي.

Body (font-size: 18px؛)media print (/ * ستكون أنماط الطباعة هنا * / body (حجم الخط: 28 بكسل ؛))
بدلاً من ذلك ، يمكنك وضع أنماط الطباعة في ملف منفصل وتضمينها بتنسيق HTML ، ولكن باستخدام هذا الأسلوب ، ستحتاج إلى طلب إضافي عند تحميل الصفحة.

2. الاختبار

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

اعتمادًا على المتصفح ، يمكنك تصدير الصفحة إلى PDF ، أو استخدام وظيفة المعاينة ، أو حتى تصحيح أخطاء الصفحة مباشرة في متصفح الويب الخاص بك.

لتصحيح أخطاء أنماط الطباعة في Firefox ، افتح لوحة تحكم المطورباستخدام اختصار لوحة المفاتيح التحول + F2أو عن طريق تنفيذ أمر القائمة تطوير → لوحة التطوير... أدخل الآتي في سطر الأوامر أسفل النافذة: تحاكي الوسائط الطباعة ، وتنتهي بـ يدخل... ستعمل علامة التبويب النشطة كما لو كانت مناسبة لها نوع الوسائطسيكون مطبعةحتى تقوم بإغلاق الصفحة أو تحديثها.

مضاهاة طباعة Firefox

يحتوي Chrome أيضًا على ميزة مماثلة. افتح ادوات المطورين، والتي في نظام MacOS ، يمكنك استخدام اختصار لوحة المفاتيح CMD + Opt + I، الخامس نظام التشغيل Windows - Ctrl + Shift + I، أو تنفيذ أمر القائمة أدوات إضافية -> أدوات المطور... بعد ذلك افتح لوحة التقديم. طريقة واحدة للقيام بذلك هي الضغط على المفتاح خروج، اعرض اللوحة وحدة التحكم، ثم افتح اللوحة من خلال القائمة استدعاء... في لوحة العرض ، اضبط العلم محاكاة وسائط CSSواختر مطبعة.

مضاهاة طباعة الكروم

يمكنك قراءة المزيد حول اختبار النسخ المطبوعة لصفحات الويب على StackOverflow.

3. الوحدات المطلقة

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

المقطع (الهامش السفلي: 2 سم ؛)

4. خصائص الصفحات

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

media print (page (margin: 1cm؛))
تعد قاعدةpage جزءًا من معيار Paged Media Module ، والذي يقدم العديد من الأشياء الرائعة مثل اختيار الصفحة الأولى للطباعة ، وتعيين الصفحات الفارغة ، ووضع العناصر في زوايا الصفحة ، و. يمكن استخدامه حتى لإعداد كتاب للطباعة.

5. التحكم في فواصل الصفحات

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

▍ فاصل صفحة قبل العنصر

إذا كنت تريد أن يكون العنصر دائمًا في بداية الصفحة ، فيمكنك وضع فاصل صفحة مفروض أمامه باستخدام خاصية فاصل الصفحة قبل.

القسم (فاصل الصفحات قبل: دائمًا ؛)

▍ فاصل صفحة بعد العنصر

تسمح لك خاصية فاصل الصفحة بعد بتعيين فاصل صفحة مفروض بعد عنصر. باستخدام هذه الخاصية ، يمكنك أيضًا رفض الفاصل.

H2 (فاصل الصفحات بعد: دائمًا ؛)

▍ كسر الصفحة داخل العنصر

تكون خاصية فاصل الصفحة الداخلية مفيدة عندما تريد تجنب تقسيم عنصر بين صفحتين.

Ul (فاصل الصفحات من الداخل: تجنب ؛)

▍ الصفوف المعلقة العلوية والسفلية

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

على سبيل المثال ، إذا كان السطر الأخير من الفقرة لا يناسب الصفحة الحالية ، فستتم طباعة آخر سطرين من تلك الفقرة في الصفحة التالية. هذا يرجع إلى حقيقة أن الخاصية التي تتحكم فيها (الأرامل ، أي "الأيتام الأعلى") تم تعيينها افتراضيًا على 2. ويمكن تغيير ذلك.

ف (أرامل: 4 ؛)
إذا ظهر موقف مختلف وتم احتواء سطر واحد فقط من الفقرة في الصفحة الحالية ، فستتم طباعة الفقرة بأكملها في الصفحة التالية. يتم أيضًا تعيين خاصية الأيتام على 2 بشكل افتراضي.

ف (أيتام: 3 ؛)
الهدف من الكود أعلاه هو أنه حتى لا تلتف الفقرة بالكامل في الصفحة التالية ، يجب أن تتلاءم ثلاثة أسطر على الأقل مع الصفحة الحالية.

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

* ، *: قبل ، *: بعد ، *: الحرف الأول ، p: السطر الأول ، div: السطر الأول ، اقتباس: السطر الأول ، السطر الأول ، السطر الأول (الخلفية: شفافة! مهمة ؛ اللون: # 000 ! مهم ؛ مربع الظل: لا شيء! مهم ؛ ظل النص: لا شيء! مهم ؛)
بالمناسبة ، تعد أنماط CSS للطباعة واحدة من الاستثناءات القليلة حيث يكون التوجيه المهم!

7. إزالة المحتوى غير الضروري

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

الجسم> *: ليس (رئيسي) (عرض: لا شيء ؛)

8. إخراج عناوين المواقع من الروابط

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

لعرض عناوين الروابط بعد تمثيلاتها النصية ، يكفي استخدام النمط التالي:

أ: بعد (المحتوى: "(" attr (href) ")" ؛)
بالطبع ، مع هذا النهج ، سيتم "فك" الكثير من الأشياء غير الضرورية. على سبيل المثال ، الروابط النسبية ، والروابط المطلقة على نفس الموقع مثل الصفحة التي تتم طباعتها ، والروابط ذات الروابط وما إلى ذلك. من أجل عدم انسداد الصفحة المطبوعة ، سيكون من الأفضل استخدام شيء مثل هذا:

ج: ليس (): بعد (المحتوى: "(" attr (href) ")" ؛)
يبدو ، بالطبع ، مجنون. لذلك ، سأشرح معنى هذه القاعدة في اللغة العادية: "اعرض قيمة السمة href بجوار كل رابط له صفة تبدأ بـ http ، لكنها لا تحتوي على mywebsite.com."

9. فك الاختصارات

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

اختصار: بعد (المحتوى: "(" attr (العنوان) ")" ؛)

10. خلفية الطباعة القسرية

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

رأس (-webkit-print-color-adjustment: دقيق ؛ ضبط لون الطباعة: دقيق ؛)

11. استفسارات وسائل الإعلام

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

شاشةmedia و (العرض الأدنى: 48em) (/ * الشاشة فقط * /)
لماذا هو كذلك؟ النقطة المهمة هي أن قواعد CSS تنطبق فقط إذا كان min-width 48em ، وإذا كان نوع الوسائط هو الشاشة. إذا تخلصنا من الكلمة الأساسية للشاشة في استعلام الوسائط هذا ، فسيتم تقييدها فقط بقيمة min-width.

media (الحد الأدنى للعرض: 48em) (/ * جميع أنواع الوسائط * /)

12. طباعة الخرائط

يمكن للإصدارات الحالية من Firefox و Chrome طباعة الخرائط ، لكن Safari ، على سبيل المثال ، لا يمكنه طباعة الخرائط. ماذا عن بطاقات الطباعة؟ أحد الخيارات العامة هو استخدام الخرائط الثابتة بدلاً من الخرائط الديناميكية.

الخريطة (العرض: 400 بكسل ؛ الارتفاع: 300 بكسل ؛ صورة الخلفية: url ("http://maps.googleapis.com/maps/api/staticmap؟center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true ") ؛ -webkit-print-color-adjustment: بالضبط ؛ ضبط لون الطباعة: دقيق ؛)

13. رموز QR

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

14.حول طباعة الصفحات غير المحسنة

أثناء الدخول في موضوع طباعة صفحات الويب ، اكتشفت أداة رائعة تتيح لك إعداد الصفحات غير المحسّنة بسهولة للطباعة. مع برينتليمينتور

فواصل الصفحة

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

الفواصل قبل العناصر وبعدها: "فاصل الصفحات قبل" ، "فاصل الصفحات بعد" ، "فاصل الصفحات من الداخل"

"فاصل صفحة قبل"

القيمة الأولية: auto
الميراث: لا
تخصيص النسبة المئوية: N / A

"فاصل صفحة بعد"

"فاصل صفحة من الداخل"

القيمة: تجنب | تلقائي | وارث
القيمة الأولية: auto
النطاق: عناصر المستوى الهيكلي
الميراث: نعم
تخصيص النسبة المئوية: N / A
الأجهزة: تنسيق مرئي ، مرقم

قيم هذه الخصائص لها المعاني التالية:

تلقاءي

لا يبدأ أو لا يسمح بفاصل صفحة قبل (بعد أو داخل) كتلة تم إنشاؤها.

دائما

يبدأ دائمًا فاصل صفحة قبل (بعد) الكتلة التي تم إنشاؤها.

تجنب

يلغي فاصل الصفحة قبل (بعد أو داخل) الكتلة التي تم إنشاؤها.

اليسار

يبدأ فاصل صفحة أو فاصلين قبل (بعد) الكتلة التي تم إنشاؤها ، بحيث يتم تنسيق الصفحة التالية على أنها الصفحة اليسرى.

حق

يبدأ فاصل صفحة أو فاصلين قبل (بعد) الكتلة التي تم إنشاؤها بحيث يتم تنسيق الصفحة التالية على أنها الصفحة الصحيحة.

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

باستخدام الصفحات المسماة: "الصفحة"

"صفحة"

المعنى:<идентификатор>| تلقاءي
القيمة الأولية: auto
النطاق: عناصر المستوى الهيكلي
الميراث: نعم
تخصيص النسبة المئوية: N / A
الأجهزة: تنسيق مرئي ، مرقم

يمكن استخدام خاصية "الصفحة" لتحديد نوع الصفحة المحددة التي سيتم عرض العنصر عليها.

في هذا المثال ، سيتم وضع جميع الجداول على الجانب الأيمن من الصفحة (يسمى "مستدير") ، وهو في الاتجاه الأفقي:

TABLE (الصفحة: تم تدويرها ؛ فاصل الصفحات قبل: اليمين)

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

في المثال التالي ، يتم عرض جدولين على صفحات أفقية (بشكل طبيعي على نفس الصفحة إذا كان كلاهما مناسبًا لها) ، لا يتم استخدام نوع الصفحة "ضيق" على الإطلاق ، على الرغم من أنه تم تعيينه لعنصر DIV.

@ صفحة ضيقة (الحجم: 9 سم 18 سم)
@ تم تدوير الصفحة (الحجم: أفقي)
DIV (الصفحة: ضيقة)
TABLE (الصفحة: تم تدويرها)

المستخدمة في الوثيقة

...

فواصل الصفحات داخل العناصر: "الأيتام" ، "الأرامل"

"الأيتام"

المعنى:<целое>| وارث
القيمة الأولية: 2
النطاق: عناصر المستوى الهيكلي
الميراث: نعم
تخصيص النسبة المئوية: N / A
الأجهزة: تنسيق مرئي ، مرقم

"أرامل"

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

لمزيد من المعلومات حول تنسيق الفقرات ، راجع المقطع الموجود في مربعات السطر.

فواصل الصفحات المقبولة

في التدفق العادي ، يمكن أن يكون فاصل الصفحة في المواقع التالية:

في المساحة المخصصة للهوامش الرأسية بين كتل البناء. في حالة حدوث فاصل صفحة في هذه المرحلة ، يتم تعيين القيم المحسوبة لخصائص "margin-top" و "margin-bottom" المقابلة على "0".
بين كتل الخط داخل كتلة المستوى الهيكلي.

حالات التوقف من النوع المدروس تستوفي القواعد التالية:

القاعدة أ: لا يُسمح بفاصل (1) إلا إذا تم السماح بحدوث قيم "فاصل الصفحة بعد" و "فاصل الصفحات قبل" لجميع العناصر التي تفرخ الكتل التي تحدث عند الفاصل ، والتي تحدث عندما يكون واحد منهم على الأقل "دائمًا" أو "يسارًا" أو "يمينًا" ، أو عندما يكون كل منهم "تلقائي" في نفس الوقت.
القاعدة ب: ومع ذلك ، إذا تم تعيين كل هذه الخصائص على "تلقائي" وتم تعيين خاصية "فاصل الصفحة من الداخل" لأقرب سلف مشترك لجميع العناصر المسماة على "تجنب" ، فإن فاصل الصفحة في تلك النقطة يكون محظور.
القاعدة ب: لا يُسمح بفاصل الصفحة (2) إلا إذا كان عدد مربعات الأسطر بين الفاصل وبداية كتلة الإغلاق يساوي أو أكبر من قيمة خاصية "الأيتام" ، وعدد المربعات المضمنة بين كسر ونهاية الكتلة تساوي أو تزيد عن قيمة خاصية "الأرامل" ...
القاعدة د: علاوة على ذلك ، لا يُسمح بفاصل الصفحات (2) إلا إذا تم تعيين خاصية "فاصل الصفحة من الداخل" على "تلقائي".

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

إذا لم يكن من الممكن بعد ذلك تحقيق عدد كافٍ من الاستراحات ، فلن يتم أخذ القاعدتين A و B في الاعتبار للبحث عن نقاط فاصل إضافية.

لا يمكن عمل فواصل الصفحات في كتل ذات مواضع مطلقة.

فواصل الصفحات المفروضة

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

يجب أن يحدث فاصل الصفحة أيضًا (1) إذا كانت قيم خاصية "الصفحة" لمربعات الأسطر قبل الفاصل وبعده مختلفة.

فواصل الصفحات "الأفضل"

لا يحدد CSS2 أي فاصل صفحات يجب استخدامه من بين العديد من الفواصل المسموح بها ؛ لا يمنع CSS2 وكلاء المستخدم من إدخال فواصل الصفحات في أي مكان أو عدم استخدامها على الإطلاق. لكن مواصفات CSS2 توصي بشدة أن يلتزم وكلاء المستخدم بالإرشادات التالية (حتى يتضح أنهم يتعارضون مع بعضهم البعض في بعض الأحيان):

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

لنفترض أن ورقة الأنماط الخاصة بك تحتوي على الخاصيتين "الأيتام: 4" و "الأرامل: 2" وهناك 20 صفًا (مربعات الأسطر) متوفرة في أسفل الصفحة الحالية:

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

لنفترض الآن أن قيمة خاصية "الأيتام" هي "10" ، وأن قيمة خاصية "الأرامل" هي "20" ، وهناك 8 صفوف متوفرة أسفل الصفحة الحالية:

إذا كانت الفقرة في نهاية الصفحة الحالية لا تحتوي على أكثر من 8 أسطر ، فيجب أن تظل في الصفحة الحالية ؛
إذا كانت الفقرة تحتوي على أكثر من 9 أسطر ، فلا يمكن تقسيمها (لأن هذا سوف ينتهك القيود التي وضعتها خاصية "الأيتام"). لذلك ، يجب نقله إلى الصفحة التالية ككتلة.

كيفية التعامل مع فواصل الصفحات عند طباعة جدول HTML كبير [8)

لدي مشروع يتطلب طباعة جدول HTML مع العديد من الصفوف.

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

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

استخدم خصائص CSS التالية:

فاصل صفحة بعد فاصل قبل فاصل

على سبيل المثال:

....

لم تنفعني أي من الإجابات هنا في Chrome. أنشأ AAverin على GitHub بعض جافا سكريبت المفيدة لهذا وقد نجح هذا بالنسبة لي:

ما عليك سوى إضافة js إلى التعليمات البرمجية الخاصة بك وإضافة فئة splitForPrint إلى الجدول وستقوم بتقسيم الجدول بدقة إلى صفحات متعددة وإضافة رأس الجدول إلى كل صفحة.

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

....

لم تنجح الإجابة المقبولة بالنسبة لي في جميع المتصفحات ، ولكن بعد أن عملت css بالفعل بالنسبة لي:

Tr (عرض: مجموعة صفوف الجدول ؛ فاصل الصفحات من الداخل: تجنب ؛ فاصل الصفحات بعد: تلقائي ؛)

كانت بنية html:

...

في حالتي ، كانت هناك بعض المشكلات الإضافية في thead tr ، لكن هذا أدى إلى حل المشكلة الأصلية المتمثلة في الاحتفاظ بصفوف الجدول.

نظرًا لوجود مشكلات في العنوان ، انتهى بي الأمر بـ:

#theTable td * (فاصل صفحة داخلي: تجنب ؛)

هذا لم يمنع انهيار الصفوف. فقط محتويات كل خلية.

انتهى بي الأمر بنهج @ vicenteherrera ، مع بعض التعديلات (والتي ربما تكون bootstrap 3).

في الأساس؛ لا يمكننا كسر tr s أو td s لأنها ليست عناصر على مستوى الكتلة. لذلك نقوم بإدخال div s في كل منها وتطبيق قواعد فاصل الصفحات * الخاصة بنا على divs. ثانيًا ، نضيف بعض الحشو إلى الجزء العلوي من كل عنصر من عناصر div للتعويض عن أي عناصر تصميم.

كانت هناك حاجة إلى تعديلات وتعديلات الحشو للتعويض عن بعض الارتعاش الذي تم تقديمه (من bootstrap ، على ما أعتقد). لست متأكدًا مما إذا كنت أقدم حلاً جديدًا من إجابات أخرى على هذا السؤال ، ولكن ربما سيساعد شخصًا ما.

لقد قمت مؤخرًا بحل هذه المشكلة بحل جيد.

AvoidBreak (border: 2px صلب ؛ كسر الصفحة من الداخل: تجنب ؛)

وظيفة طباعة () ($ (". TableToPrint td، .tableToPrint th"). كل (function () ($ (this) .css ("width"، $ (this) .width () + "px"))) ؛ $ (". tableToPrint tr"). wrap ("

") ؛ window.print () ؛)

يعمل كالسحر!

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

لذلك جربت خدعة صغيرة وهي تعمل:

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

tfoot فقط مع: display: table-footer-group ؛ لا يتداخل ولكنه ليس في أسفل الصفحة الأخيرة ...

لنضع جزأين:

TFOOT.placer (عرض: مجموعة تذييل الجدول ؛ الارتفاع: 130 بكسل ؛) TFOOT.contenter (عرض: مجموعة تذييل الجدول ؛ الموضع: ثابت ؛ أسفل: 0 بكسل ؛ الارتفاع: 130 بكسل ؛) نصك الطويل أو صورتك العالية هنا

أحدهما يحتفظ بمساحة على صفحات غير خلفية ، والآخر في تذييلك الشخصي.

اختبار

عنوان
ملحوظات
x
x
x

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

كانت القدرة على تقديم محتوى مناسب للطباعة موجودة منذ فترة طويلة. يمكننا القيام بذلك باستخدام قاعدةmedia في ورقة الأنماط على النحو التالي:

media print ( / * قواعد النمط * / }

هناك العديد من الخصائص التي تسمح لك بتصميم محتوى صفحة الويب لجعلها قابلة للطباعة ، وسنغطي واحدة: فاصل الصفحة.

ماذا تعمل، أو ماذا تفعل؟

إذا كنت قد عملت مع برامج تحرير النصوص مثل Microsoft Word و Pages ، فيجب أن تكون على دراية بقائمة فاصل الصفحات التي تتيح لك التفاف النص في الصفحة التالية.

هذه الوحدة تفعل الشيء نفسه ، مما يسمح لك بالتحكم في كيفية التفاف محتوى صفحة الويب ، صفحة بصفحة.

استخدام فاصل صفحة

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

سيبدو أفضل إذا بدأ العنوان والخط المعزول في الصفحة التالية.

للقيام بذلك ، نستخدم خاصية page-break-after ونقوم بتعيينها دائمًا لفرض العنصر التالي للانتقال إلى الصفحة التالية.

فاصل الصفحة (فاصل الصفحات بعد: دائمًا ؛)

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

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

الهاتف المناسب للسفر معه

مترجم اس ستكون أداة رائعة لرحلاتك مثل ...

الآن سيبدأ العنوان والخط المعلق السفلي في الصفحة التالية.

الخطوط المتدلية العلوية والسفلية

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

في ممارسة الطباعة ، تشير الأسطر المعلقة العلوية والسفلية إلى الكلمات المتبقية والأسطر القصيرة التي تظهر ممزقة عن بقية الفقرة في صفحة أخرى.

باستخدام خصائص الأيتام (الأيتام السفليين) والأرامل (الأيتام الأعلى) يمكننا تعيين الحد الأدنى. في المثال أدناه ، نحدد بقاء ثلاثة أسطر على الأقل في الجزء السفلي أو في بداية الفقرة حيث يحدث فاصل الصفحة.

ف (أيتام: 3 ؛ أرامل: 3 ؛)

مصادر إضافية

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

ترجمة - واجب

تتكون كتلة الصفحة من منطقة صفحة تحتوي على محتوى ومنطقة هامش تحيط بمنطقة الصفحة. تُستخدم القاعدةpage لتغيير بعض خصائص css عند طباعة مستند. يمكنك فقط تغيير هوامش العنصر ، ويمكنك أيضًا تعيين فواصل الصفحات في موقع محدد.

@ الصفحة (الهامش: 2 بوصة)

من الممكن تحديد هوامش المستند الفردية ضمن قاعدةpage ، مثل margin-top و margin-right و margin-bottom و margin-left:

2. فواصل الصفحات

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

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

بناء الجملة:

طباعة الوسائط @ (h1 (فاصل الصفحات قبل: دائمًا ؛))

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