الواجهات العربيةرقم 02
عنصر span لكل حرف شقّ «لا» في عنوان موقعي وضاعف لمعته الذهبية. لماذا لا تنقذك عناقيد الحروف، ولماذا تنقذك الكلمات، ومكوّن فك تشفير يعمل في اللغتين.
هل أفادك هذا المقال؟
قلبك يخبرني بما أكتب عنه أكثر.
الواجهات العربية
لماذا تُفسد طابعات ESC/POS الحروف العربية، وكيف تطبعها صورةً أحادية البت بعرض الرأس الحقيقي، وخلل الأبعاد الذي حوّل إيصالًا طوله 12 سم إلى رولٍ كامل ملقى على الأرض.
هندسة الأنظمة
كيف أُبقي وحدي نظامًا محاسبيًا من 322 ألف سطر صحيحًا: بوابة حفظ واحدة، وقيود مالية لا تُعدَّل، وسجل تدقيق ببصمات متسلسلة، واختبارات على قواعد حقيقية، وتدقيق كشف ما فاتها.
هندسة الأنظمة
فوترة محطات الكهرباء دون اتصال: معرّف واحد يرافق الدفعة من الهاتف إلى الإيصال، ولماذا لا تُجمع إجماليات الفواتير، وطابور يعرف ما يعيده، وخطأ 500 صنع حلقة لا تنتهي.
العنوان الإنجليزي فكّ تشفيره بجمال: رموز برمجية تومض أمام مؤشر، وكل حرف يستقر في مكانه خلفه.
ثم حوّلت الصفحة إلى العربية.
قبل أن ينتهي التأثير، تعثّرت عيني بكلمة واحدة: «كاملًا». الـ«لا» في آخرها، الشكل الذي يعرفه كل قارئ عربي من أول نظرة، وقفت حرفين منفصلين. وبعد ثانية مرّت اللمعة الذهبية على العنوان، فبدت كل كلمة مكررة مرتين.
كلمة واحدة فيها خطآن، وخطأ ثالث يمتد على السطر كله. والحل الذي يمد إليه كل مطوّر يده، Intl.Segmenter، يعالج واحدًا منها فقط.
وحين أعدت بناء الخطأ في صفحة اختبار من أجل هذا المقال، صار أغرب: العناصر نفسها كانت سليمة في فقرة عادية. احتاج كسرُها إلى خاصية CSS واحدة في عنواني.
في آخر المقال ستعرف ما هذه الخاصية، ولماذا الكلمة أصغر وحدة يمكنك تحريكها بأمان في العربية، وكيف تعيد السطر نصًا عاديًا فينطبق عليه كل ما فوقه بالبكسل، وستخرج بمكوّن جاهز للنسخ.
قسّم النص إلى حروف، ضع كل حرف في span، اتركها شفافة حتى يأتي دورها، وارسم فوقها رمزًا عشوائيًا أثناء الانتظار:
{Array.from(text).map((char, i) => (
<span key={i} className="dc">{char}</span>
))}.dc { color: transparent; }
.dc.is-scr::after { content: attr(data-g); position: absolute; /* … */ }
.dc.is-on { color: inherit; }جزء واحد من هذا صحيح، وقد بقي. كل حرف موجود في الصفحة من أول إطار، فالسطر يأخذ عرضه النهائي ويلتف حيث سيلتف، ولا شيء يتحرك في التخطيط أثناء التأثير.
أما كل ما عداه فكان لا بد أن يتغير.
Array.from() يقسّم النص حسب نقطة الترميز (code point). و«كاملًا» فيها ست نقاط:
const hex = (s) => [...s].map((c) => c.codePointAt(0).toString(16).toUpperCase().padStart(4, '0'))
hex('كاملًا')
// ['0643', '0627', '0645', '0644', '064B', '0627'] ست نقاط ترميز، ستة عناصرالـ 064B هو التنوين، الحركة التي تعلو اللام. ولأنه نقطة ترميز مستقلة، أخذ عنصرًا مستقلًا، بعيدًا عن الحرف الذي ينتمي إليه.
ولا تفترض أن نصوصك خالية من الحركات. عربية الواجهات تُسقط معظمها، لكن تنوين الفتح في كلمات مثل «كاملًا» و«أيضًا» من صلب الإملاء، والشدّة تظهر في أسماء مثل «محمّد».
ما يراه القارئ حرفًا واحدًا هو عنقود حروف (grapheme cluster)، والمتصفح يقسّمه لك:
const seg = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
Array.from(seg.segment('كاملًا'), (part) => hex(part.segment).join('+'))
// ['0643', '0627', '0645', '0644+064B', '0627'] خمسة عناقيد: الحركة ترافق لامهاالخطأ الأول انحلّ. والآن انظر إلى آخر عنصرين.
0644+064B هي اللام بحركتها، و0627 هي الألف. عنقودان، أي عنصران ما زالا منفصلين.
اللام متبوعة بالألف هي الحرف المركّب (ligature) الوحيد الذي تفرضه العربية. يحتفظ Unicode بالشكل الجاهز للتوافق فقط (ﻻ، U+FEFB). أما النص الحقيقي فيخزّن حرفين، والخط يرسمهما شكلًا واحدًا حين يشكّلهما معًا.
عناقيد الحروف تصف ما يراه القارئ حرفًا واحدًا. والحرف المركّب أكبر من ذلك: حرفان يدمجهما الخط في شكل واحد. ولا تقسيم بالعناقيد يستطيع إبقاءه سليمًا، لأنه يمتد على عنقودين.
فمتى يظهر الانشقاق فعلًا؟ أعدت بناء العنوان في صفحة اختبار (خط IBM Plex Sans Arabic بوزن 600، في Chrome 153 وEdge 155، وقد تطابقا بالبكسل) وقست السطر في خمسة أوضاع:
| النص | CSS إضافي | «لا» | أعرض سطر |
|---|---|---|---|
| نص عادي | text-wrap: balance |
شكل واحد | 415.7px |
| عنصر لكل كلمة | text-wrap: balance |
شكل واحد | 415.7px |
| عنصر لكل عنقود | لا شيء | شكل واحد | في حدود 0.4px من النص العادي |
| عنصر لكل عنقود | text-wrap: balance |
حرفان | 458.9px |
| عنصر لكل عنقود | display: inline-block |
حرفان، ولا اتصال إطلاقًا | أعرض بـ 33% |
في سطر عادي، يشكّل Chrome الحروف عبر العناصر السطرية فتنجو الكلمة. لكن عنواني كان عليه text-wrap: balance، ومعها فقدت العناصر نفسها الحرف المركّب، وعددًا من نقاط الاتصال، و43 بكسلًا من العرض. وصفّ inline-block هو ما تحصل عليه من أي تأثير يحرّك الحروف واحدًا واحدًا، لأن الـ transform يحتاج صندوقًا: فيقف كل حرف وحيدًا.
وحتى في الحالة التي تنجو فيها الكلمة، هناك فخ. مع خطي، الحرف المركّب شكل واحد، وChrome يلوّنه بلون عنصر اللام. في اختباري ظهرت «لا» كاملة لحظة استقرار اللام، وما دامت اللام شفافة بقيت الألف مختفية معها. نصف شكل لا يمكن تحريكه.
فوق عنواني لمعة ذهبية: نسخة ثانية من العنوان كنص عادي، يكشفها شريط متحرك. والنص العادي والعناصر المقسّمة صارا يختلفان بـ 43 بكسلًا في أعرض سطر، فتباعدت الحروف وتوازن السطر بطريقتين، ولم تعد الحروف الذهبية فوق البيضاء.
الكلمة أصغر قطعة من العربية تحمل تشكيلها كاملًا: اتصال حروفها، وحركاتها، وحروفها المركّبة. لذا تُفك العربية كلمةً كلمة. أما الإنجليزية فتبقى حرفًا حرفًا، لأنها تُقرأ جيدًا بالحروف اللاتينية ولا تكلّف شيئًا إضافيًا.
const ARABIC = /\p{Script=Arabic}/u
const byWord = ARABIC.test(text)
// المسافات تبقى نصًا عاديًا بين الكلمات.
const units = byWord ? text.split(/( )/).filter(Boolean) : graphemes(text)موقعي يفحص كتلة العربية الأساسية، من U+0600 إلى U+06FF، وهي تغطي نصوصه. أما \p{Script=Arabic} فهو الخيار الأسلم لنص لا تتحكم فيه: يطابق أيضًا الكتل الملحقة والموسّعة وأشكال العرض.
وأي نص فيه حرف عربي واحد يُفك بالكلمات، بما فيها الكلمات اللاتينية. «مهندس برمجيات Full Stack» تُفك أربع كلمات.
احتاج الإيقاع إلى تعديلين، وكلاهما في المكوّن أدناه:
الكلمة تأخذ ثلاث خطوات، فلا تمر خاطفة في زمن حرف واحد. وأثناء انتظارها تُظهر دفعة رموز بطولها تقريبًا، فيحتفظ السطر بنسيجه.
العناصر المقسّمة بالكلمات تطابق النص العادي في حدود 0.03px في صفحة اختباري. والنص العادي يطابق نفسه تمامًا، بعقدة نصية واحدة بدل عنصر لكل كلمة. لذا حين ينتهي التأثير، تختفي العناصر كلها.
العنوان المستقر صار يُشكَّل تمامًا كنص عادي، بحروفه المركّبة، واللمعة الذهبية، وهي نص عادي أيضًا، تنطبق عليه بالبكسل.
if (settled) return <span className="decode is-done">{text}</span>اللمعة تنتظر هذه اللحظة بكلاس، ولا تنتظرها بـ :has() أبدًا. ولماذا ضاعف :has() هناك انشغال المعالج والصفحة ساكنة، تجده في مقال الأداء.
واللمعة نفسها حركتا transform. شريط بعرض 30% من العنوان ينزلق في اتجاه، وداخله نسخة نصية بعرض العنوان كله تنزلق عكسه بالمسافة نفسها وعلى الساعة نفسها، فتبقى الحروف الذهبية فوق البيضاء. وهندستها تستخدم left الفيزيائي عمدًا: في العربية يجب أن ينقلب النص الذي داخلها فقط، ويبقى مسار الشريط كما هو.
فك التشفير يسير من اليمين إلى اليسار في العربية دون حالة خاصة واحدة.
الوحدات بترتيب الـ DOM، وهو الترتيب المنطقي: الترتيب الذي تكتب به وتقرأ. الفهرس 0 هو أول كلمة يراها القارئ، على اليمين. والحلقة تمشي على الفهارس، فيتحرك المؤشر كما تتحرك عين القارئ.
وطبقة الرموز لا تحتاج قواعد اتجاه هي الأخرى. تجلس عند left: 50% مع translate: -50% 0، في منتصف وحدتها أيًّا كان الاتجاه.
الأرقام هي الموضع الوحيد الذي يستحق التصريح. الأرقام داخل النص العربي تجري من اليسار إلى اليمين، لذا تجلس الأرقام تحت عنواني في عناصرها الخاصة بـ dir="ltr"، وتُفك عبر رموز أرقام بدل الرموز البرمجية.
هذا التأثير يشغّل حلقة requestAnimationFrame، وهو ما يعدّه مقال الأداء علامة خطر. الفرق أن هذه الحلقة تنتهي.
position: relative، وهي ما يحتاجه الرمز. العنصر المتموضع يصير طبقة رسم مستقلة، ومئة منها جعلت كل إطار من التأثير ثقيلًا.Intl.Segmenter مع كل تبديل لكل كلمة منتظرة ظهر في الـ profile.وبالقياس قبل/بعد على محاكاة هاتف بمعالج أبطأ أربع مرات، يكلّف التأثير كله نحو 0.35 ثانية من عمل الخيط الرئيسي موزعة على أول ثانيتين، ولا شيء بعدها.
هذا المكوّن من موقعي، مختصرًا إلى ما يهم. يحتاج مكتبة ES2022 أو أحدث في TypeScript من أجل Intl.Segmenter، ويعود إلى نقاط الترميز إن غاب عن المتصفح.
import { useEffect, useMemo, useRef, useState } from 'react'
const GLYPHS = '{}[]()<>/=+-*&|!?#$%@;:01λΣ'
const ARABIC = /\p{Script=Arabic}/u
/** الحروف كما يراها القارئ، فيحتفظ الحرف بحركاته. */
const graphemes = (text: string): string[] =>
typeof Intl.Segmenter === 'function'
? Array.from(new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(text), (s) => s.segment)
: Array.from(text)
type Props = {
text: string
delay?: number // ms قبل أن تبدأ أول وحدة
step?: number // ms لكل حرف؛ والكلمة العربية تأخذ ثلاث خطوات
window?: number // كم وحدة أمام المؤشر تتبدل رموزها
onSettled?: () => void
}
export default function DecodeText({ text, delay = 0, step = 20, window: span = 5, onSettled }: Props) {
const ref = useRef<HTMLSpanElement>(null)
const onSettledRef = useRef(onSettled)
useEffect(() => {
onSettledRef.current = onSettled
})
const byWord = ARABIC.test(text)
// العربية بالكلمات (المسافات تبقى نصًا عاديًا بينها)، وغيرها بالعناقيد.
const units = useMemo(() => (byWord ? text.split(/( )/).filter(Boolean) : graphemes(text)), [text, byWord])
const [settledText, setSettledText] = useState<string | null>(null)
const settled = settledText === text
useEffect(() => {
const root = ref.current
if (!root || settled) return
const cells = Array.from(root.querySelectorAll<HTMLElement>('.dc'))
const settle = () => {
setSettledText(text)
onSettledRef.current?.()
}
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
settle()
return
}
const noise = (n: number) => Array.from({ length: n }, () => GLYPHS[(Math.random() * GLYPHS.length) | 0]).join('')
// دفعة الكلمة بطولها تقريبًا: تُحسب مرة واحدة، لا مع كل تبديل.
const burst = cells.map((c) => (byWord ? Math.min(7, Math.max(2, graphemes(c.textContent ?? '').length)) : 1))
const pace = byWord ? step * 3 : step
const start = performance.now() + delay
let raf = 0
let timer = 0
let lastShuffle = 0
const tick = (now: number) => {
const t = now - start
const shuffle = now - lastShuffle > 60 // نحو 16 رمزًا جديدًا في الثانية
if (shuffle) lastShuffle = now
let landed = 0
for (let i = 0; i < cells.length; i++) {
const cell = cells[i]
const at = i * pace
if (t >= at) {
if (!cell.classList.contains('is-on')) {
cell.classList.remove('is-scr')
cell.classList.add('is-on')
}
landed++
} else if (t >= at - span * pace) {
if (shuffle || !cell.classList.contains('is-scr')) {
cell.dataset.g = noise(burst[i])
cell.classList.add('is-scr')
}
} else break // كل ما بعد هذه الوحدة ما زال ينتظر
}
if (landed < cells.length) raf = requestAnimationFrame(tick)
else timer = window.setTimeout(settle, 200) // ثم أعِد النص عاديًا
}
raf = requestAnimationFrame(tick)
return () => {
cancelAnimationFrame(raf)
window.clearTimeout(timer)
}
}, [text, units, byWord, delay, step, span, settled])
const className = settled ? 'decode is-done' : 'decode'
// بعد الاستقرار: نص عادي واحد، يُشكَّل كأي نص آخر في الصفحة.
if (settled) return <span className={className}>{text}</span>
// المفتاح هو النص، فتبديل اللغة يركّب وحدات جديدة مخفية.
return (
<span key={text} ref={ref} className={className}>
{units.map((unit, i) => (unit === ' ' ? ' ' : <span key={i} className="dc">{unit}</span>))}
</span>
)
}.dc { color: transparent; }
/* أثناء التبدّل فقط: العنصر المتموضع طبقة رسم مستقلة. */
.dc.is-scr { position: relative; }
.dc.is-scr::after {
content: attr(data-g);
position: absolute;
top: 0;
left: 50%;
translate: -50% 0; /* في منتصف وحدته، في أي اتجاه */
white-space: nowrap;
font-family: ui-monospace, monospace;
color: #d6b56d;
}
.dc.is-on { color: inherit; }والعنوان الذي ينتظره:
export function Headline({ text }: { text: string }) {
const [decodedFor, setDecodedFor] = useState<string | null>(null)
return (
<h1 className={decodedFor === text ? 'headline is-decoded' : 'headline'}>
<DecodeText text={text} delay={420} onSettled={() => setDecodedFor(text)} />
</h1>
)
}decodedFor يحفظ النص الذي استقر. بدّل اللغة، فالعنوان الجديد لم يستقر بعد، فتتوقف اللمعة من جديد حتى يستقر.
فك التشفير يغيّر اللون فقط، لذا يتعايش مع العناصر السطرية. أما التأثيرات التي تحرّك الحروف فتحتاج صندوقًا لكل قطعة، وكما أظهر الجدول، inline-block لكل حرف يترك كل حرف عربي وحيدًا.
حرّك الكلمات إذن. الحروف العربية لا تتصل عبر مسافة أبدًا، فصندوق لكل كلمة لا يكلّف التشكيل شيئًا. الفقرة تحت عنواني تنساب بهذه الطريقة، كل كلمة ترتفع بعد سابقتها ببضع ملّي ثوانٍ:
import { Fragment, type CSSProperties } from 'react'
/** كل كلمة ترتفع إلى مكانها بعد سابقتها ببضع ms. الكلمات تبقى كاملة، فتحتفظ العربية باتصالها. */
export function StreamText({ text, delay = 0, step = 14 }: { text: string; delay?: number; step?: number }) {
return (
<>
{text.split(' ').map((word, i) => (
<Fragment key={`${text.length}-${i}`}>
{i > 0 && ' '}
<span className="sw" style={{ ['--sw' as string]: `${delay + i * step}ms` } as CSSProperties}>
{word}
</span>
</Fragment>
))}
</>
)
}.sw {
display: inline-block;
animation: sw-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: var(--sw, 0ms);
}
@keyframes sw-in {
from { opacity: 0; transform: translate3d(0, 0.4em, 0); }
}حركة CSS تعمل مرة واحدة، بالشفافية والـ transform فقط، ولا سكربت بعد أول render. وعلامات الترقيم تبقى ملتصقة بكلمتها، لأن التقسيم على المسافات: «كاملًا،» ترتفع قطعة واحدة مع فاصلتها.
text-wrap: balance، وخطك ووزنه الفعليان، والأحجام الفعلية.العربية تُكتب كلمات، والتأثير لم يعمل إلا حين صار يفك تشفيره كلمات أيضًا.
وإن كانت نصوصك تحمل حركات لا تريد تحريكها أصلًا، فـأداة توحيد النص العربي تحذفها قبل أن تبدأ.
التعليقات
شارك في النقاش
سجّل الدخول بحساب Google لتعجب بالمقالات وتعلّق عليها. ضغطة واحدة تكفي.