Core deck content remains available. Presentation controls, overview, theme switching, notes, and validation require JavaScript.
HTML Slide Decks Reference SPA · Read mode

Reference SPA · v1.1

One deck. Four incompatible jobs.

Live delivery, independent reading, interactive inspection, and durable distribution require different attention models.

Present Read Explore Print

A live slide may rely on narration and controlled pacing. A distributed artifact must remain complete without the presenter. An exploratory view must expose detail without flooding the primary narrative. A printable artifact must survive without motion or interaction.

The system therefore starts from semantic content and produces context-specific renderings.

Failure pattern

Scaling one canvas creates predictable failures.

The same geometry cannot preserve pace, legibility, context, and interactivity at once.

01Live

Dense reference content competes with narration.

02Mobile

Labels shrink while targets and diagrams become unusable.

03Distributed

Speaker-dependent slides lose their reasoning and caveats.

04Print

Motion, progressive disclosure, and controls disappear.

The failure is architectural rather than cosmetic. Smaller fonts and tighter spacing cannot solve missing narration, lost interaction, or incompatible reading distances. Each context needs a renderer with its own density and composition policy.

Architecture decision

Make meaning canonical—not the stage.

The stage becomes one renderer. It no longer owns the knowledge.

Stage-centricGeometry is canonical
Semantic publishingMeaning is canonical

The canonical model stores the assertion, evidence, narrative intent, reader detail, notes, sources, and rendering hints. Present, Read, Explore, and Print views then compose those elements for their specific cognitive and physical constraints.

Cognitive contract

One slide performs one cognitive job.

State the conclusion. Show the evidence. Add only the interpretation required to connect them.

01Assertion

What should the audience understand?

02Evidence

What makes the assertion credible?

03Implication

Why does it matter now?

The assertion is the slide title. Evidence should be visually dominant enough to inspect. Interpretation should be concise. Definitions, caveats, methodology, and complete references remain available in Read or Explore mode.

Density

Stage evidence instead of shrinking it.

Density is the number of mental operations required—not merely the number of words.

Overloaded

Six encodings. Three comparisons. No clear entry point.

Staged
What changed+18%
Why it mattersThreshold exceeded
What to doScale the control plane

Use an attention budget. An assertion costs one unit. A primary chart or system diagram costs roughly two. A legend, independent annotation cluster, or interactive control costs another. When the stage exceeds the budget, move detail into another reveal, slide, or renderer.

Platform architecture

One canonical model drives four renderers.

Canonical modelAssertion · evidence · detail · notes · sources
PresentPaced evidence
ReadComplete reflow
ExploreInspection and zoom
PrintStable pages

The content model is independent from any framework. Renderers may share semantic HTML and CSS primitives, but each controls its own visibility, composition, density, navigation, and output behavior.

Semantic contract

Separate the platform into four contracts.

01Knowledge

Claims, evidence, sources, confidence

02Narrative

Intent, sequence, reveal stages, decision arc

03Rendering

Layout type, profile, responsive composition

04Distribution

Routes, metadata, offline assets, PDF policy

This separation prevents geometry from becoming the data model. It also enables linting, schema validation, source traceability, renderer replacement, and future export adapters without rewriting the underlying content.

Framework decision

Own the semantic shell.

Borrow presentation conventions without inheriting stage-centric assumptions.

RecommendedSmall custom shell
  • Multi-mode by design
  • Adaptive mobile composition
  • Native semantic baseline
Reveal.jsSpeaker-led adapter
SlidevDeveloper-deck adapter
MarpBriefing export

The decision is not to reject existing frameworks. It is to avoid making their stage geometry the canonical knowledge format. Adapters can still target them when their strengths match a distribution need.

Quality gates

Validate every delivery context.

Structure alone cannot detect clipped evidence, broken themes, or unusable compact layouts.

ViewportPresentReadExplorePrint
1440 × 900
390 × 844
844 × 390
320 × 568

Also test 2 themes × 5 profiles, target size, contrast, overflow, title lines, focus, history, and reduced effects.

The shield control runs in-browser structural and current-viewport checks. Release validation additionally runs an automated viewport and appearance matrix, including document overflow, active-stage overflow, target sizing, contrast tokens, and console errors.

Decision and action

Approve the schema and compiler boundary.

Keep this shell as the renderer and validator. Move authoring into a typed semantic model.

01Define

Typed slide schema and narrative intents

02Compile

Semantic HTML and renderer-specific views

03Gate

Content linting and visual regression

The reference shell now demonstrates the target architecture and validates its main delivery contexts. The next engineering phase is a content compiler that accepts structured source material, emits these semantic sections, and runs the same quality gates before distribution.

Slide overview

Speaker notes

Deck validation