الحفاظ على الحشو الخلفي في كل سطر من التمييز الملتف

للحفاظ على الحشو عند طرفي كل سطر من أسطر التمييز الملتف، طبّق box-decoration-break: clone على عنصر مضمن، إلى جانب خلفيته وحشوه. أدرج التصريح ذي السابقة WebKit لدعم Safari. يشرح MDN زخرفة الأجزاء.

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

لماذا يختفي الحشو عند التفاف التمييز؟

القيمة الأولية لـ box-decoration-break هي slice. عندما ينكسر صندوق مضمن عبر الأسطر، تتعامل هذه القيمة مع زخرفته باعتبارها صندوقًا متصلًا مقسّمًا إلى أجزاء. لا يُضاف الحشو عند الحواف التي يحدث عندها الانكسار. مع clone، يحصل كل جزء على حشوه وحدوده وزخرفة خلفيته الخاصة. يعرّف W3C سلوكي التجزئة كليهما.

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

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

أنشئ مثالًا كاملًا على جهاز Mac

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

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

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

الأبعاد هنا خيارات تصميم توضيحية. ابدأ بتغيير الحشو الأفقي، 0.3em، إذا بدت الأطراف ضيقة جدًا أو واسعة جدًا. غيّر الحشو الرأسي، 0.08em، على حدة. أبقِ اختبار الالتفاف نشطًا عند ضبط أي من القيمتين.

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

ما تفاصيل دعم المتصفحات المهمة على جهاز Mac؟

احتفظ بكلا التصريحين في المثال. تسجل بيانات التوافق الحالية لدى MDN دعم الخاصية القياسية بدءًا من Chrome 130 وFirefox 32. وتسجل دعم Safari باستخدام السابقة -webkit-، مع اقتصار هذا التنفيذ على العناصر المضمنة. افحص بيانات توافق المتصفحات لدى MDN.

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

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

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

كيف تمنع تداخل الخلفيات والالتفاف غير المريح؟

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

اضبط line-height للعنوان بالتزامن مع الحشو الرأسي للتمييز. يستخدم المثال قيمة بداية 1.65 واسعة عمدًا. قلّلها تدريجيًا إذا بدت الفجوات كبيرة، مع فحص أضيق تخطيط في كل مرة. لا توجد قيمة تباعد واحدة تناسب كل الخطوط والزخارف.

استخدم تسلسل التشخيص هذا لتحديد السبب قبل تعديل مزيد من CSS:

ما تراه	افحص أولًا	الإجراء التالي
يظهر الحشو عند الطرفين الخارجيين للعبارة فقط	سلوك الزخرفة	طبّق تصريحي clone كليهما على العنصر المضمن المميّز.
مستطيل خلفية كبير واحد	العنصر الذي يملك الخلفية	ضع الخلفية والحشو على عنصر span المضمن الداخلي.
تتلامس الأسطر المميّزة رأسيًا	الحشو الرأسي وارتفاع سطر العنصر الأب	قلّل الحشو الرأسي أو زد ارتفاع السطر.
يمتد تصنيف طويل خارج الحاوية	فرص الالتفاف المتاحة	فكّر في قاعدة الرموز الطويلة الاختيارية أدناه.
يفتقد Safari وحده حشو الطرف المقصود	التصريح ذي السابقة	تأكد من بقاء -webkit-box-decoration-break: clone في ورقة الأنماط.

بالنسبة إلى تصنيف اصطناعي لا يقبل الانكسار مثل AmberTileSequenceAmberTileSequence، يمكنك إضافة overflow-wrap: anywhere إلى .sample-title. هذا جزء CSS اختياري يُضاف داخل القاعدة الموجودة؛ وتبقى بقية الأمثلة كما هي.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

يسمح ذلك بانكسار سلسلة لا تقبل الانكسار عند الحاجة لمنع تجاوز المحتوى، من دون إدراج واصلة. وهو يعالج فرص الالتفاف؛ ولا ينشئ حشوًا. قد لا تحتاج إليه العبارات العادية التي تحتوي على مسافات. يوثّق MDN شروط overflow-wrap.

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

حافظ على تدفق النص الطبيعي وحدود التشكيل

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

تجنّب تقسيم كلمة إلى عناصر span لكل حرف مع حشو لمحاكاة التأثير. تشترط مواصفة CSS Text أن ينكسر التشكيل عبر الحدود المضمنة عندما يفصل حشو أو حدود أو هوامش غير صفرية على المحور المضمن وحدات محارف طباعية متجاورة. لذلك قد تؤثر حدود الحشو داخل كلمة في تشكيل المحارف. اطّلع على قواعد W3C للتشكيل عبر الحدود.

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

ماذا لو كان المشروع يستخدم Tailwind CSS؟

في مشروع Tailwind قائم، أضف box-decoration-clone إلى العنصر المضمن الذي يملك بالفعل خلفية التمييز وحشوه. تربط وثائق Tailwind الحالية هذه الأداة بـ box-decoration-break: clone. وتختار أداة box-decoration-slice السلوك الآخر. اطّلع على أدوات box-decoration-break في Tailwind.

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

لا حاجة إلى إدخال Tailwind لهذا التأثير وحده. يحتوي المثال المحلي الكامل بالفعل على CSS اللازم.

هل يمكن لتمييز مخصص استخدام الحشو نفسه؟

يتمتع نطاق واجهة CSS Custom Highlight API المنسّق عبر ::highlight() بإمكانات تختلف عن العنصر المضمن المنسّق. يسرد MDN الخصائص المسموح بها، ومنها لون النص ولون الخلفية وزخارف النص. الحشو وbox-decoration-break خارج مجموعة الخصائص المسموح بها. اقرأ قيود تنسيق التمييز المخصص الموثقة.

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

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

المصادر

• خاصية CSS: box-decoration-break — MDN Web Docs.
• وحدة تجزئة CSS، المستوى 3 — W3C.
• معيار HTML: عنصر span — WHATWG.
• نموذج الصندوق — MDN Web Docs.
• بيانات توافق المتصفحات: box-decoration-break — MDN.
• خاصية CSS: overflow-wrap — MDN Web Docs.
• وحدة CSS Text، المستوى 3: التشكيل عبر حدود العناصر — W3C.
• box-decoration-break — Tailwind CSS.
• العنصر الزائف CSS: ::highlight() — MDN Web Docs.