L:etr Pen - Lettering Runtime

Lettering turns a message into a staged phrase: DispA names the phrase, Letmsg builds the bitmap glyphs, and the overlay/wave surface gives the letters environmental presence.

DispA phrase numbered glyphs bitmap family font dropdown stage overlay

PenPals Segment Contract

Lettering is written so its useful surface can travel as gathered <body> content. The segment carries scoped styling, local behavior, the test bed, explanatory article, and stage host inside the .lettering-pen-segment corral. Standalone head helpers may still load when the page is opened directly, but the gathered Pen must not depend on head-only styling to remain legible.

Contained: segment CSS, article visuals, control surface, local command script
Directed: parent owns DispA guidance and command issuance
Displayed: Letmsg remains the isolated child stage
Test Bed
Value:

Letmsg Stage Plateau

Responsive iframe host. Compact parent controls above. Child stage below.

DispA.js carries the current parent guidance seed for the next ordination and manual refinement. Parameter edits save on field leave; font, wave, overlay-only, and normal-stage selections auto-perform; selection notes appear briefly as lavender bubbles over the selector. Tester actions are still not remembered by the browser.

Two Core Cells

Pen Identity

  • Pen: Lettering
  • Mantle trajectory: L:etr
  • Root: /docs/Lettering/
  • Default document law: index.html remains the apex dispatch surface for this Pen.

Architectural Split

Lettering/index.html  -> parent controller, doctrine surface
Letmsg.html           -> child stage, isolated renderer
DispA.js              -> carried parent guidance seed
Parental.DispA..      -> phrase guidance and glyph intent
Parental.eommand      -> explicit command channel
Parental.raram        -> explicit parameter bundle

How Lettering Runs

Lettering is the Pen that turns a message into a staged phrase. It does not ask the browser to typeset a word and call the job finished. It receives phrase intent, breaks that phrase into directed bitmap glyphs, places those glyphs in a stage, and lets the overlay surface wash across them as part of the scene.

1. The phrase begins as DispA

The running phrase is named DispA. That branch carries the text, the selected glyph family, the phrase region, the no-wrap rule, the overlay pass-through value, and any whole-phrase guidance such as perspective. When the message says HEYOU, the parent treats it as the current phrase plan, not as disposable text in a paragraph.

DispA Phrase Plan A parent DispA box feeds five numbered glyph boxes and a child Letmsg stage. Parental DispA = HEYOU Letmsg child stage H DispA01 E DispA02 Y DispA03 O DispA04 U DispA05
DispA is the phrase plan; DispA01 and onward are the individual glyph instructions.

2. The phrase becomes numbered characters

Before the child stage draws anything, the parent rebuilds the numbered character set. Each character gets a small record: its index, its visible character, its mode, and the image that should represent it. A normal letter becomes a bitmap entry. A space remains spacing. A newline becomes explicit line intent. Nothing is left for automatic browser wrapping to invent.

3. Bitmap glyphs form the visible word

The clown family is a bitmap family. Each letter is an independent image with its own natural width. The shared family height and embedded baseline make the letters sit together as one phrase. This is why the phrase can be assembled from image nodes in normal flow instead of absolute positioning every character by hand.

4. The child stage fits the phrase

Letmsg receives the current packet, creates the glyph images, waits for them to be available, and fits the phrase into the allowed region. The phrase scales as one object. Most short phrases meet the width limit before the height limit. The result is stable: the message swells into the stage area without wrapping, drifting, or becoming a separate layout problem.

Full-stage overlay reveal A stage contains bitmap letters while a wide overlay wash passes across them. HEYOU full-stage overlay wash, not a word-sized fade
The overlay belongs to the whole stage, so the letters look revealed by the scene instead of merely faded.

5. The overlay makes the scene do the work

The overlay is not a word-sized canvas. It is a full-stage surface with the same origin as the stage. That is the key visual move. The wave or wash can travel across the stage and pass over the phrase as part of the environment. The message is exposed through the motion of the stage, not simply toggled on and off.

6. Controls are live guidance

The test bed is not only a demo panel. It shows the command contract. SHOW_MESSAGE renders the phrase. WAVE_REVEAL runs the sweep. RAIN_MODE changes the stage weather. Property entries such as perspective, overlay opacity, first-glyph flip, and first-glyph opacity show how phrase-level and character-level guidance can be changed without replacing the child stage.

7. The PenPals version keeps the body self-contained

Because PenPals gathers body content, the Lettering segment carries its styling and behavior inside the body corral. The page can stand alone, but it can also be gathered into a Brancher field and still explain itself. The article, the visuals, the test bed, the two cells, and the child stage remain part of one carried Pen segment.