فاصل صفحة html قابل للطباعة. فاصل الصفحة للطباعة باستخدام CSS3. حول طباعة الصفحات غير المحسنة

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

@ الصفحة (الهامش: 2in ؛)

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

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

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

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

بناء الجملة:

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

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

بناء الجملة:

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

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

كيفية التعامل مع فواصل الصفحات عند طباعة جدول 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 (الحد: 2 بكسل صلب ؛ كسر الصفحة من الداخل: تجنب ؛)

طباعة الوظيفة () ($ (". 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 ؛)

مصادر إضافية

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

ترجمة - واجب

فواصل الصفحة

تصف الأقسام التالية نموذج تنسيق الصفحة المستخدم في 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 أسطر ، فلا يمكن تقسيمها (لأن هذا سوف ينتهك التقييد الذي وضعته خاصية "الأيتام"). لذلك ، يجب نقله إلى الصفحة التالية ككتلة.