تطبيق CSS على نصف حرف: خدعة ذكية باستخدام JavaScript

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

هل يمكن تطبيق CSS على نصف حرف؟ نستعرض خدعة ذكية باستخدام JavaScript

\n\n

هل تساءلت يومًا إن كان بإمكانك تلوين النصف الأيسر من حرف "أ" باللون الأحمر والنصف الأيمن بالأزرق؟ أو جعل الجزء العلوي من النص شفافًا بينما الجزء السفلي غير شفاف؟ إذا كنت قد زرت Stack Overflow وتساءلت "Is it possible to apply CSS to half of a character?"، فأنت لست وحدك. هذا السؤال حصد آلاف المشاهدات، والإجابة عليه تمثل تحديًا حقيقيًا لمطوري الويب.

\n\n

للوهلة الأولى، يبدو أن CSS يعمل فقط مع العناصر الكاملة. لكن باستخدام JavaScript وبعض الحيل الذكية، يمكننا خداع المتصفح وإنشاء وهم "نصف التنسيق". اليوم سنستعرض ثلاث طرق عملية: من تكرار النص البسيط إلى استخدام SVG و clip-path. هيا بنا!

\n\n

لماذا لا يستطيع CSS "قص" الحرف؟

\n\n

قبل أن نتعمق في الكود، دعنا نفهم طبيعة المشكلة. CSS يعمل مع الكتل (المربعات). كل حرف هو جزء من تدفق النص، والمتصفح يعرضه كوحدة واحدة. لا توجد خاصية مثل half-color أو half-background. حتى العناصر الزائفة ::before و ::after تعمل على مستوى العنصر بأكمله، وليس محتواه.

\n\n

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

\n\n

الطريقة 1: تكرار النص مع clip-path (CSS + JS)

\n\n

الحيلة الأكثر شيوعًا التي تتم مناقشتها على Stack Overflow هي تراكب نسختين من النص فوق بعضهما وقص كل نصف باستخدام clip-path. دعنا ننفذها باستخدام JavaScript.

\n\n

الخطوة 1: هيكل HTML

\n\n

<div class="half-text" data-text="مرحبًا بالعالم!"></div>

\n\n

الخطوة 2: منطق JavaScript

\n\n

const container = document.querySelector('.half-text');\nconst text = container.dataset.text;\n\n// إنشاء نسختين من النص\nconst leftPart = document.createElement('span');\nleftPart.textContent = text;\nleftPart.className = 'half left';\n\nconst rightPart = document.createElement('span');\nrightPart.textContent = text;\nrightPart.className = 'half right';\n\ncontainer.appendChild(leftPart);\ncontainer.appendChild(rightPart);

\n\n

الخطوة 3: تنسيق CSS

\n\n

.half-text {\n  position: relative;\n  font-size: 48px;\n  font-weight: bold;\n  display: inline-block;\n}\n\n.half {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.half.left {\n  color: #ff6b6b;\n  clip-path: inset(0 50% 0 0); /* النصف الأيسر */\n}\n\n.half.right {\n  color: #4ecdc4;\n  clip-path: inset(0 0 0 50%); /* النصف الأيمن */\n}

\n\n

النتيجة: كل حرف مقسم تمامًا من المنتصف. clip-path يقتص الحروف على طول خط عمودي. تعمل الحيلة بشكل مثالي مع الخطوط أحادية المسافة، ولكن للخطوط العادية قد يكون هناك إزاحة طفيفة - يمكن إصلاحها بسهولة بإضافة letter-spacing: 0.

\n\n

الطريقة 2: تقسيم النص إلى أحرف (JavaScript متقدم)

\n\n

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

\n\n

الفكرة

نقوم بتقسيم السلسلة النصية إلى مصفوفة من الأحرف، ونضع كل حرف في <span> منفصل، ثم نكرر العملية على مستوى الحروف. بعد ذلك نطبق clip-path على كل عنصر span.

\n\n

function splitTextToHalf(selector) {\n  const element = document.querySelector(selector);\n  const originalText = element.textContent;\n  element.innerHTML = '';\n\n  // إنشاء حاوية لكل حرف\n  for (let char of originalText) {\n    const wrapper = document.createE