Editorial Layout

No operable specimen yet; the illustration is editorial. Still to verify in a product: whether heading hierarchy survives intact in a real content-management system, whether pull-quote excerpts stay in sync with the body without drifting inconsistent, and whether images and captions stay associated rather than being separated when the layout reflows at responsive breakpoints.

{
  "states": [
    "wide-multi-column-body",
    "narrow-single-column-body"
  ],
  "a11y": [
    "Heading levels stay sequential and semantically correct so screen readers can navigate by heading",
    "Pull quotes are not announced as a separate new source of information in the accessibility tree; image captions stay associated with and read alongside their images"
  ],
  "motion": "None"
}

{
  "id": "editorial-layout",
  "type": "layout",
  "name": {
    "zh": "编辑式版面",
    "en": "Editorial Layout"
  },
  "aliases": [
    "长文版面",
    "Long-Form Article Layout",
    "杂志式版面"
  ],
  "granularity": "page",
  "intents": [
    "read-content",
    "organize-content"
  ],
  "tags": [
    "heading hierarchy",
    "pull quote",
    "caption",
    "long-form",
    "typographic layout"
  ],
  "definition": "Organize a headline, deck (subhead/standfirst), body text, pull quotes, and image captions into a long-form page the way print editorial practice does, using real heading levels together with size and weight differences to signal what is a heading versus body text; pull quotes are excerpted from the body to emphasize a point rather than replace it, and each image and its caption travel as one unit.",
  "boundary": "This concerns the typographic relationships between headline, deck, body, pull quotes, and captions inside a long-form page, not the grid mechanics of rows and columns (modular grid) or the choice of a single sequential reading column (single-column). Editorial layout usually sits on top of a single column or a modular grid, but it addresses text hierarchy and text-image relationships within the page, not the coordinate system carrying it. Swiss style is an optional visual language spanning both layout and visual categories; editorial layout does not assume any one visual style.",
  "signature": [
    "Real heading elements (e.g. h1/h2) distinguish headline from body, not size changes alone",
    "A deck paragraph precedes the body, set at a size or weight between headline and body",
    "Pull quotes are excerpted from the body at larger size and repeated; images stay adjacent to and paired with their captions"
  ],
  "when": [
    "Presenting a long-form piece with a headline, deck, body, and images, such as an article, feature, or case study",
    "Body copy is long enough that pull quotes create visual pauses and flag key points to aid scanning",
    "The piece includes images that need explanation or attribution, and captions must be read alongside their images"
  ],
  "when_not": [
    "The content is already short lists or card summaries with no continuous body and heading hierarchy to organize",
    "The only decision left is how many grid columns or a single reading column should carry the content — that belongs to modular grid or single-column layout",
    "Heading tags or larger sizes are applied to ordinary paragraphs purely for visual effect while the structure remains the same level of body text"
  ],
  "tradeoff": "A clear heading hierarchy with paired captions makes long-form content easier to scan and easier for assistive technology to understand structurally, but excerpting pull quotes takes editorial judgment — a poorly chosen excerpt can mislead readers about the body's actual emphasis, and maintaining heading hierarchy and caption association costs more effort than uniform body paragraphs.",
  "comparison": {
    "focus": "The typographic relationships between headline, deck, body, pull quotes, and captions within a long-form page",
    "mechanism": "Real heading hierarchy conveys structure, pull quotes repeat for emphasis, and images pair with their captions",
    "cost": "Requires ongoing maintenance of correct heading semantics and consistency between pull quotes and body text"
  },
  "sources": [
    {
      "id": "editorial-layout-mdn-headings",
      "title": "MDN · Heading Elements",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements",
      "claim": "Explains that heading elements express a document's semantic hierarchy so screen-reading software can jump between headings to understand page structure; heading levels should not be skipped, and headings should not be used to resize text — font size should be adjusted with CSS instead of changing the heading level.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements",
        "status": "available",
        "checkedAt": "2026-09-16T05:39:17.184Z",
        "jobId": "spn2-2a0a1b4ac0f16c8759e5d7c20d5ce8316dbafde7",
        "url": "https://web.archive.org/web/20260916054037/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements",
        "timestamp": "20260916054037"
      }
    },
    {
      "id": "editorial-layout-wikipedia-pull-quote",
      "title": "Wikipedia · Pull quote",
      "url": "https://en.wikipedia.org/wiki/Pull_quote",
      "claim": "Defines a pull quote as a key phrase or excerpt pulled from the body and used as a page-layout graphic element to entice readers into the article or highlight a point; its content already comes from the body and may be abbreviated or paraphrased for space or clarity rather than introducing information absent from the body.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://en.wikipedia.org/wiki/Pull_quote",
        "status": "available",
        "checkedAt": "2026-09-16T05:39:29.608Z",
        "jobId": "spn2-7840f14ecc52683f58e57cae61f27058cc72c613",
        "url": "https://web.archive.org/web/20260916053952/https://en.wikipedia.org/wiki/Pull_quote",
        "timestamp": "20260916053952"
      }
    },
    {
      "id": "editorial-layout-mdn-figure",
      "title": "MDN · The Figure with Optional Caption element",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure",
      "claim": "Explains that a figure and its figcaption are referenced as a single unit; an image and its caption should stay associated and not disrupt the main flow even if moved elsewhere in the document, and the figcaption also provides the figure's accessible name.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure",
        "status": "available",
        "checkedAt": "2026-09-16T05:40:02.979Z",
        "jobId": "spn2-b1dad3a2c145361af704bfc488e137e36642d79d",
        "url": "https://web.archive.org/web/20260916054125/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure",
        "timestamp": "20260916054125"
      }
    }
  ],
  "relations": [
    {
      "target": "single-column",
      "kind": "composes_with",
      "condition": "The long-form body needs a stable reading column",
      "reason": "Editorial layout often places body text on top of a single-column layout, but it is about heading, pull-quote, and caption hierarchy, not the choice of the column itself.",
      "basis": "editorial"
    },
    {
      "target": "modular-grid",
      "kind": "composes_with",
      "condition": "The page needs a shared coordinate system to arrange a headline, multi-column body, and images",
      "reason": "A modular grid supplies the row-and-column coordinate system carrying the page; editorial layout arranges heading hierarchy and text-image relationships on top of it — the two sit at different conceptual levels.",
      "basis": "editorial"
    },
    {
      "target": "swiss",
      "kind": "composes_with",
      "condition": "The page adopts Swiss style as its visual language",
      "reason": "Swiss style is a typography-and-whitespace language spanning both layout and visual categories, and can be layered onto editorial layout, which does not itself assume any one visual style.",
      "basis": "editorial"
    },
    {
      "target": "card-grid",
      "kind": "alternative",
      "condition": "Deciding whether the content is a single long-form piece to read deeply or several parallel summaries to browse",
      "reason": "Editorial layout serves the heading and body hierarchy inside one long-form piece, while a card grid serves parallel browsing of several homogeneous items — the two serve different reading modes.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "The page needs to distinguish headline, deck, and body",
      "instruction": "Express the hierarchy with real heading elements (e.g. h1/h2/h3), not just larger or bolder text without changing tag semantics; heading levels must stay sequential and not skip.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "A pull quote is inserted into the body to emphasize a point",
      "instruction": "The pull quote's content must already appear in the body and serve only to repeat and emphasize it for scanning; never make the pull quote the sole place readers can find information absent from the body.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "An image carries a caption and the page reflows at a different breakpoint or narrow width",
      "instruction": "Keep the image and its caption in one associated unit so they stay adjacent and are never separated across different regions when the layout reflows.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "wide-multi-column-body",
      "narrow-single-column-body"
    ],
    "a11y": [
      "Heading levels stay sequential and semantically correct so screen readers can navigate by heading",
      "Pull quotes are not announced as a separate new source of information in the accessibility tree; image captions stay associated with and read alongside their images"
    ],
    "motion": "None"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "No operable specimen yet; the illustration is editorial. Still to verify in a product: whether heading hierarchy survives intact in a real content-management system, whether pull-quote excerpts stay in sync with the body without drifting inconsistent, and whether images and captions stay associated rather than being separated when the layout reflows at responsive breakpoints.",
  "image": {
    "src": "/images/editorial-layout.webp",
    "alt": "A fictional FIELDNOTES article page: a large headline at the top, a smaller deck line below it, a two-column body in the middle with an inset pull quote set in larger type, and an image with its caption beneath it near the bottom."
  },
  "searchTerms": [
    "标题层级",
    "引文",
    "图注",
    "长文",
    "版式"
  ]
}