Pretext — Build creative browser demos with DOM-free text layout
Pretext — Build creative browser demos with DOM-free text layout
ابدأ بالمعنى، ثم انتقل إلى التفاصيل.
هذا الدرس يشرح Pretext — Build creative browser demos with DOM-free text layout ضمن موضوع توسيع Hermes وربطه بأدوات أخرى. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.
إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟
للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.
للمتخصص: راجع Skill metadata، Reference: full SKILL.md، Overview، ثم افحص حالات الفشل والتوافق مع إصدارك.
أكمل التثبيت وأول مهمة قبل إضافة قدرات جديدة.
نتيجة واضحة قبل أن تقرأ.
- تفهم Pretext — Build creative browser demos with DOM-free text layout من دون افتراض معرفة سابقة.
- تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
- اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
تعريفات قصيرة قبل التفاصيل.
- Skill
- حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.
- Browser / CDP
- طبقة للتحكم في المتصفح ومراقبة الصفحات والأحداث بطريقة قابلة للبرمجة.
Build creative browser demos with DOM-free text layout
ما الذي يقوله المصدر، وبأي ترتيب؟
- 01Skill metadata
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
- 02Reference: full SKILL.md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 03Overview
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 04When to Use
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 05Creative Standard
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 06Stack
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 07The Two Use Cases
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 08Use-case 1 — measure, then render with CSS/DOM
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 09Use-case 2 — measure and render yourself
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 10Helpers worth knowing
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.
انسخ بعد أن تفهم الأثر.
Pin the version. `@0.0.6` at time of writing — check [npm](https://www.npmjs.com/package/@chenglou/pretext) for the latest if demo behavior is off.
## The Two Use Cases
Almost everything reduces to one of these two shapes. Learn both.
### Use-case 1 — measure, then render with CSS/DOMYou still let the browser draw the text. Pretext just tells you how tall the box will be at a given width, **without** a DOM read. Use for:
- Virtualized lists where rows contain wrapping text
- Masonry with precise card heights
- "Does this label fit?" dev-time checks
- Preventing layout shift when remote text loads
**Keep `font` and `letterSpacing` exactly in sync with your CSS.** The canvas `ctx.font` format (e.g. `"16px Inter"`, `"500 17px 'JetBrains Mono'"`) must match the rendered CSS, or measurements drift.
### Use-case 2 — measure *and* render yourselfThis is where the creative work lives. You own the drawing, so you can:
- Render to canvas, SVG, WebGL, or any coordinate system
- Substitute per-glyph transforms (rotation, jitter, scale, opacity)
- Use line metadata (width, grapheme positions) as geometry
For **variable-width-per-line** flow (text around a shape, text in a donut band, text in a non-rectangular column):اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.