Detection & Scaling
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE CORE PROMISE ║
║ ║
║ "What aligns in the terminal MUST align in documentation." ║
║ ║
║ CodexMono is The Brick - the fundamental unit that enables ║
║ perfect visual alignment across any medium. ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
How Detection Works
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ PATTERN RECOGNITION FLOW ║
║ ║
║ Your Markdown ║
║ │ ║
║ ▼ ║
║ ┌─────────────┐ ║
║ │ Scanner │ ← Looks for structural patterns ║
║ └──────┬──────┘ ║
║ │ ║
║ ▼ ║
║ ┌─────────────┐ ║
║ │ Detect │ ← Finds box drawing characters ║
║ └──────┬──────┘ ║
║ │ ║
║ ▼ ║
║ ┌─────────────┐ ║
║ │ Count │ ← Requires 2+ consecutive lines ║
║ └──────┬──────┘ ║
║ │ ║
║ ▼ ║
║ ┌─────────────┐ ║
║ │ Wrap │ ← Applies scaling container ║
║ └─────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
What Gets Detected
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THREE PATTERN CATEGORIES ║
║ ║
║ 1. BOX DRAWING (Unicode U+2500-U+257F) ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ CORNERS LINES INTERSECTIONS │ ║
║ │ ┌─ ┐─ ─┘ ─└ ─ │ ┬─ ─┴ ├─ ─┤ │ ║
║ │ │ ║
║ │ Examples: │ ║
║ │ ┌───────┐ ╔═══╗ ┌───┬───┐ │ ║
║ │ │ Cell │ ║ H ║ │ A │ B │ │ ║
║ │ └───────┘ ╚═══╝ └───┴───┘ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ 2. PROGRESS INDICATORS ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Loading [=========> ] 50% │ ║
║ │ Complete [====================] 100% │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ 3. SEMANTIC SYMBOLS ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Stars: * * * * * │ ║
║ │ Checks: [x] Done [ ] Pending │ ║
║ │ Arrows: → ⇒ → │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
The Two Line Rule
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ WHY TWO LINES? ║
║ ║
║ ONE LINE - Too Many False Positives ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ "Use the → arrow to navigate" │ ║
║ │ "Rating: * * * * *" │ ║
║ │ │ ║
║ │ These are PROSE, not ASCII art! │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ TWO LINES - Just Right ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ ┌───────┐ ← Line 1: Has corners │ ║
║ │ └───────┘ ← Line 2: Has corners │ ║
║ │ │ ║
║ │ This is definitely ASCII art! │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ THREE LINES - Misses Valid Boxes ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ ┌───┐ │ ║
║ │ └───┘ ← Only 2 lines, but valid! │ ║
║ │ │ ║
║ │ Would be missed with threshold of 3 │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
SMPC Decision: The Two Line Rule is a simple threshold that manages the chaos of detecting patterns in arbitrary text.
How Scaling Works
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE SCALING PRINCIPLE ║
║ ║
║ "Scale the WHOLE block uniformly - never break internal alignment" ║
║ ║
║ ORIGINAL (too wide for container) ║
║ ┌───────────────────────────────────────────────────────────────────────┐ ║
║ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐ │ ║
║ │ │ Module A │ ──→ │ Module B │ ──→ │ Module C │ │ ║
║ │ └──────────────────┘ └──────────────────┘ └──────────────┘ │ ║
║ └───────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ │ ║
║ ▼ ║
║ ║
║ SCALED (fits perfectly) ║
║ ┌──────────────────────────────────────────────────┐ ║
║ │ ┌────────────┐ ┌────────────┐ ┌────────┐ │ ║
║ │ │ Module A │ → │ Module B │ → │ Mod C │ │ ║
║ │ └────────────┘ └────────────┘ └────────┘ │ ║
║ └──────────────────────────────────────────────────┘ ║
║ ║
║ KEY PROPERTIES: ║
║ - Internal proportions preserved ║
║ - Character relationships maintained ║
║ - Box alignments intact ║
║ - Only the ENTIRE block shrinks ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Scale Behavior
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ SCALE FACTOR RULES ║
║ ║
║ Container vs Content Result ║
║ ┌──────────────────────────────┐ ┌───────────────────────────┐ ║
║ │ Container: 600px │ │ Scale: 0.75 (shrink) │ ║
║ │ Content: 800px │ │ Content fits in container │ ║
║ └──────────────────────────────┘ └───────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────┐ ┌───────────────────────────┐ ║
║ │ Container: 800px │ │ Scale: 1.0 (exact fit) │ ║
║ │ Content: 800px │ │ No scaling needed │ ║
║ └──────────────────────────────┘ └───────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────┐ ┌───────────────────────────┐ ║
║ │ Container: 1000px │ │ Scale: 1.0 (capped) │ ║
║ │ Content: 800px │ │ NEVER enlarge │ ║
║ └──────────────────────────────┘ └───────────────────────────┘ ║
║ ║
║ CONSTRAINT: Scale is capped at 1.0 - content is never enlarged ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
The 600-Unit Guarantee
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ CODEXMONO: EVERY CHARACTER = 600 UNITS ║
║ ║
║ 'A' = 600 units ║
║ '─' = 600 units (horizontal line) ║
║ '│' = 600 units (vertical line) ║
║ '┌' = 600 units (corner) ║
║ ║
║ No kerning. No variable spacing. Perfect grid alignment. ║
║ ║
║ RESULT: ║
║ ┌───┬───┬───┐ ║
║ │ A │ B │ C │ ← Lines connect perfectly ║
║ ├───┼───┼───┤ ║
║ │ D │ E │ F │ ← Vertical bars align exactly ║
║ └───┴───┴───┘ ║
║ ║
║ CSS Transform preserves this 600-unit grid at any scale. ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Verification Results
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ TWO LINE RULE - TESTED ║
║ ║
║ Test: 1,000 markdown documents ║
║ ║
║ THRESHOLD = 1 ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Detected: 847 boxes │ ║
║ │ False positives: 312 (36.8%) ← Too many! │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ THRESHOLD = 2 ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Detected: 535 boxes │ ║
║ │ False positives: 3 (0.6%) ← Optimal! │ ║
║ │ Missed boxes: 0 │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ THRESHOLD = 3 ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Detected: 498 boxes │ ║
║ │ Missed boxes: 37 ← Loses valid 2-line boxes │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ SCALE MINIMUM - TESTED ║
║ ║
║ Question: How small can we scale before text becomes unreadable? ║
║ ║
║ Base font: 12px ║
║ ║
║ SCALE = 0.5 (6px result) ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Box characters: READABLE │ ║
║ │ ASCII letters: READABLE with effort │ ║
║ │ Structure: CLEAR │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ SCALE = 0.4 (4.8px result) ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ Box characters: BLURRY │ ║
║ │ ASCII letters: UNREADABLE │ ║
║ │ Structure: AMBIGUOUS │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ VERDICT: 0.5 is the minimum scale for readability ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Key Principles
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE BRICK PRINCIPLE ║
║ ║
║ "The fundamental unit maintains its integrity regardless of scale." ║
║ ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Terminal Document │ ║
║ │ ┌───────────────┐ ┌───────────────┐ │ ║
║ │ │ Each cell is │ │ Each block is │ │ ║
║ │ │ a fixed unit │ │ a fixed unit │ │ ║
║ │ │ with content │ │ with layout │ │ ║
║ │ └───────────────┘ └───────────────┘ │ ║
║ │ │ │ │ ║
║ │ ▼ ▼ │ ║
║ │ Font size change CSS Transform │ ║
║ │ affects ALL cells affects ALL chars │ ║
║ │ equally equally │ ║
║ │ │ │ │ ║
║ │ ▼ ▼ │ ║
║ │ Grid remains Layout remains │ ║
║ │ aligned aligned │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
“The Brick does not break under pressure - it scales.”