كسر المربعات مع تجزئة CSS

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

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

ما هو التفتت؟

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

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

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

مربعات بلوك ومضمنة

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

لمزيد من المعلومات حول تخطيط الكتلة والتخطيط الداخلي ، راجع مقالة MDN "Block And Inline Layout in Normal Flow". إنه أحد تلك الأشياء التي ربما نفهمها جميعًا على مستوى ما ولكن ربما لم نواجه المصطلحات من قبل.

السيطرة على الفواصل

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

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

لإصلاح ذلك ، أضف خاصية break-inside: avoid الصندوق. break-inside خاصية الاختراق الداخلي العناصر الداخلية عندما تكون في سياق مجزأ. في المستعرض الذي يدعم هذه الخاصية ، سيبقى المربع الآن في أحد الأعمدة. ستبدو الأعمدة أقل توازناً ، ومع ذلك ، فهذا أفضل بشكل عام من أن ينتهي الأمر بتقسيم Boxout عبر الأعمدة.

خاصية break-inside هي إحدى الخصائص الموضحة بالتفصيل في مواصفات التجزئة. القائمة الكاملة للخصائص هي كما يلي:

• break-before
• break-after
• break-inside
• orphans
• widows
• box-decoration-break

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

خصائص break-before وبعد break-after

هناك نوعان من الخصائص التي تتحكم في الفواصل بين الصناديق على مستوى الكتلة: break-before break-after . إذا كان لديك h2 متبوعًا بفقرتين <p> لديك ثلاثة مربعات كتلة ويمكنك استخدام هذه الخصائص للتحكم في الفواصل بين العنوان والفقرة الأولى ، أو بين الفقرتين.

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

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

 h2 { break-before: page; }

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

 h1, h2, h3, h4 { break-after: avoid; }

شظايا داخل شظايا

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

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

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

قيم إضافية للوسائط المقسمة إلى صفحات

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

 h2 { break-before: right; }

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

break-inside

لقد رأينا بالفعل مثالاً على خاصية break-inside . تتحكم هذه الخاصية في تقسيم مربعات الكتل الداخلية ، على سبيل المثال داخل فقرة أو عنوان أو عنصر div.

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

خصائص orphans widows

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

 .container { column-count: 3; orphans: 2; }

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

 .container { column-count: 3; widows: 2; }

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

زخرفة الصندوق

الخاصية النهائية التي قد تكون ذات أهمية هي خاصية box-decoration-break . يتحكم هذا في الموقف حيث يكون لديك مربع بحد مقسم بين مربعي عمودين أو صفحتين. هل تريد أن تنقسم الحدود بشكل أساسي إلى نصفين؟ أو هل تريد أن يتم تغليف نصفي الصندوق بالكامل في إطار؟

السيناريو الأول هو الافتراضي ، ويبدو كما لو قمت بتعيين خاصية box- slice box-decoration-break على المربع.

 .box { box-decoration-break: slice; } 

للحصول على السلوك الثاني ، قم بتعيين box-decoration-break على الاستنساخ.

 .box { box-decoration-break: clone; } 

دعم المتصفح للتجزئة

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

إذا كنت تعمل في Paged Media مع وكيل مستخدم معين مثل Prince ، فيمكنك الاستمتاع بدعم جيد بالفعل للتجزئة ، وربما تجد هذه الخصائص مفيدة جدًا. إذا كنت تعمل باستخدام مستعرض ويب ، إما في multicol ، أو إنشاء أوراق أنماط طباعة ، أو استخدام شيء مثل Headless Chrome لإنشاء ملفات PDF ، يكون الدعم غير مكتمل إلى حد ما. ستجد أن المتصفح الذي يتمتع بأفضل دعم هو Edge - حتى ينتقل إلى Chromium على أي حال!

لا يمكنني استخدام Can I Use بشكل مفرط في شرح الدعم بسبب خلط خصائص التجزئة مع multicol ، ثم الحصول على بعض البيانات المنفصلة للخصائص القديمة. لذلك ، كجزء من العمل الذي كنت أقوم به لـ MDN لتوثيق الخصائص ودعمها ، بدأت في اختبار دعم المتصفح الفعلي. ما يلي هو بعض النصائح القائمة على هذا الاختبار.

الخصائص القديمة والمُسبقة للبائع

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

في CSS2 ، كانت هناك خصائص للتحكم في كسر الصفحات. لم يكن Multicol موجودًا في تلك المرحلة ، لذلك كان السياق المجزأ الوحيد هو السياق المقسم إلى صفحات. هذا يعني أنه تم تقديم ثلاث خصائص محددة لكسر الصفحات:

• page-break-before
• page-break-after
• page-break-inside

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

في مسودة العمل لعام 2005 لمواصفات multicol هي تفاصيل كسر خصائص multicol - باستخدام خصائص مسبوقة column- (أي column-break-before ، column-break-after ، column-break-inside ). بحلول عام 2009 ، كانت هذه قد اختفت ، وكانت المسودة في مواصفات multicol لخصائص كسر غير مسبوقة والتي شقت طريقها في النهاية إلى مواصفات CSS Fragmentation.

ومع ذلك ، فقد تم تنفيذ بعض الخصائص الخاصة بالأعمدة المخصّصة للمورد بناءً على هذه الخصائص. وهذه هي:

• -webkit-column-break-before
• -webkit-column-break-after
• -webkit-column-break-inside

دعم التجزئة في Multicol

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

Multicol break-inside

الدعم في multicol هو الأفضل لخاصية break-inside . تدعم جميع الإصدارات المحدثة من Chrome و Firefox و Edge و Safari break-inside: avoid ذلك. لذلك يجب أن تجد أنه يمكنك منع المربعات من الانفصال بين الأعمدة عند استخدام multicol.

تدعم العديد من المتصفحات ، باستثناء Firefox ، خاصية -webkit-column-break-inside ، ويمكن استخدامها مع قيمة avoid وقد تمنع المربعات من الانفصال بين الأعمدة التي لا تدعم break-inside .

يدعم Firefox فصل page-break-inside: avoid multicol. لذلك ، سيؤدي استخدام هذه الخاصية إلى منع حدوث فواصل داخل المربعات في متصفحات Firefox قبل Firefox 65.

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

 .box { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

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

يقوم CodePen أدناه بتجميع بعض هذه الاختبارات في multicol حتى تتمكن من تجربتها بنفسك.

Multicol break-before

من أجل منع حدوث فواصل قبل عنصر ، يجب أن تكون قادرًا على استخدام break-before: avoid أو break-before: avoid-column . خاصية تجنب ليس لديها دعم المتصفح.

تدعم الحافة break-before: column لفرض الفاصل دائمًا قبل مربع العنصر.

يدعم Safari و Chrome و Edge أيضًا -webkit-column-break-before: always فاصلًا قبل مربع العنصر. لذلك ، إذا كنت تريد فرض فاصل قبل مربع عنصر ما ، فيجب عليك استخدام:

 .box { -webkit-column-break-before: always; break-before: column; }

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

Multicol break-after

لمنع حدوث فواصل بعد عنصر ، لتجنب أن يصبح آخر شيء في أسفل العمود ، يجب أن تكون قادرًا على استخدام الفصل break-after: avoid break-after: avoid-column . المتصفح الوحيد الذي يدعم ذلك هو Edge.

يدعم Edge أيضًا فرض فواصل بعد عنصر باستخدام break-after: column ، ويدعم Chrome break-after: column وأيضًا -webkit-column-break-after: always .

لا يدعم Firefox break-after أو أيًا من الخصائص المسبوقة لإجبار أو السماح بفواصل بعد مربع.

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

 .box { -webkit-break-after: always; break-after: column; } 

الدعم عند الطباعة من المتصفح

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

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

طباعة أوراق الأنماط break-inside

في المتصفحات الحديثة ، يمكن استخدام خاصية break-inside لمنع الفواصل داخل المربعات ، وإضافة خاصية page-break-inside لإضافة دعم للمتصفحات القديمة.

 .box { page-break-inside: avoid; break-inside: avoid; }

طباعة أوراق الأنماط وفاصل break-before

لفرض الفواصل قبل المربع ، استخدم break-before:page مع page-break-before: always .

 .box { page-break-before: always; break-before: page; }

لتجنب الفواصل قبل المربع ، استخدم break-before: avoid-page مع page-break-before: avoid .

 .box { page-break-before: avoid; break-before: avoid-page; }

هناك دعم أفضل page وقيم avoid-page مما نراه لقيم multicol المكافئة. تدعم غالبية المتصفحات الحديثة.

طباعة أوراق الأنماط وفاصل break-before

لفرض فواصل بعد مربع ، استخدم break-after: page مع page-break-after: always .

 .box { page-break-after: always; break-after: page; }

لمنع الفواصل بعد المربع ، استخدم break-after: avoid-page مع page-break-after: avoid .

 .box { page-break-after: avoid; break-after: avoid-page; }

الأرامل والأيتام

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

مربع الديكور كسر

الخاصية النهائية لـ box-decoration-break تدعم multicol والطباعة في Firefox. تدعم Safari و Chrome والمتصفحات الأخرى المستندة إلى Chromium -webkit-box-decoration-break ، ولكن فقط على العناصر المضمنة. لذلك يمكنك استنساخ الحدود بخطوط مستديرة للجملة على سبيل المثال ؛ ليس لديهم دعم في السياق الذي ننظر إليه.

في CodePen أدناه ، يمكنك أن ترى أن اختبار -webkit-box-decoration-break: clone with Feature Queries يعود صحيحًا ؛ ومع ذلك ، فإن الخاصية ليس لها تأثير على حد المربع في سياق multicol.

باستخدام التجزئة

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

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

المزيد من الموارد

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