0. Capability boundaries (read first)
In the browser, “images” are only SVG dashed frames and slot schematics; content planning splits a multi-image grid proportionally. Nothing in this system runs Place into InDesign or Illustrator, and nothing auto-builds linked text/image frames in Adobe.
Type size in the browser: there is no per-title/body pt slider in the sidebar. Two layers: (1) TYPO — human-readable recommended ranges; (2)
TYPO_PT — one fixed pt each for title / body / meta per template for zone drawing. Text actually painted on the canvas is further multiplied by about
58% (ZONE_PREVIEW_PT_SCALE) so labels don’t cover the grid — preview only.
The three font dropdowns plus “apply recommended fonts by scenario” only change font-family via FONT_MAP; they do not change TYPO_PT.
Main columns in the browser can be overridden as integers 1–24. Adobe panels write the layout result that matches the same meaning as “main columns”, but not the browser’s full set of seven display-layer checkboxes or the entire content planning block.
Bleed on screen follows the template field bleedMm (often 3, often 0 for text-heavy jobs). The bleed region is drawn only when the option is on
and bleedMm > 0. Copy that says “commonly 3 mm” is a habit — the preset data wins.
I. What is this project?
A layout-grid & prepress helper family: one shared idea of trim size, bleed, margins, columns, gutters, module grids, and baselines — previewed in a browser, then applied as far as possible in InDesign and Illustrator via scripts or CEP.
Still manual in Adobe: full paragraph/character style libraries, placing images, TOC, interactive PDF — finish in the layout app.
II. Repository map (roles)
- Browser: same folder
index.html→ Templates (content layout block; legacy 排版网格预览.html redirects here). - Spec: long-form doc — not executed by software.
- InDesign: ExtendScript + CEP — ~7 templates in host, aligned with the first browser presets.
- Illustrator: GridSeed (
com.gridseed.illustrator) — artboards, paths, trim/safe, words (see section V).
III. Browser file — 排版网格预览.html (what exists & what it does)
Below documents behaviour aligned with the Templates content-layout block (merged from the former standalone page). IDs use an lp prefix (e.g. lpLayoutMode).
Templates
presetSelect is filled from PRESETS (~20 items), order matching both CEP panels’ optgroups. Changing template runs
applyPresetDefaults() then render(), and refreshes module cols/rows, main columns, and gutter inputs to the template defaults.
Fonts (preview only)
fontCnTitle: values e.g.shs-b,shr-m.fontCnBody:shr-r,shs-r.fontLatin:ss,mpr,sr,min.
Any change calls render(). Stacks live in FONT_MAP (Source Han / Adobe names first, then system fallback).
fontSuggestBtn (“apply recommended fonts by scenario”) sets the three selects from group + some template ids, then render() — it does
not change grid numbers or content-planning numbers.
Display layer (visibility only — does not change preset data)
Each checkbox triggers render():
showBleed— bleed;showMargins— type area margins;showColumns— main column guides;showModule— module grid;showBaseline— baseline (skipped if computed spacing is 0);showSafe— cover safe zone when the template defines it;showZones— inner title/body/image blocks plus schematic type.
Numbers inside the type area
moduleColsInput/moduleRowsInput: 1–48, validated/clamped on input →render().columnsInput: main columns 1–24.gutterInput: gutter mm, 0–30, step 0.5; bad values fall back to the template gutter.- Reset module / reset columns — restore module rows/cols or columns+gutter from the current template (modules default to 6×8 when the template omits them).
Content planning (preview only)
When enableContentPlan is on, the script splits schematic zones and fills the blue advice box planAdviceSlot.
planImages 0–12, planParas 0–24, planSubs 0–12 — change/input → render().
planImageSizeMode switches mm vs aspect mode and updates planImageSizeModeHint and row unit labels.
planImageSizeRows builds planImgW_0… / planImgH_0… (step 0.1) and planImgUnit_i; delegated input on the container calls render().
planImageLayout: auto, horizontal, vertical, or equal grid.
planAdviceSlot is read-only: buildPlanAdviceHtml writes image/body height ratios, paragraph split hints, layout inference, grid row/column notes, approximate column width for images, and warnings (e.g. image count > 0 when the template has no image zone).
Read-only panels & zoom
typographyPanel: TYPO copy, TYPO_PT, current three font labels, and the ~58% preview note.layoutPanel: long LAYOUT copy for image/text placement.metaPanel: trim, bleed, margins, columns, modules, baseline, note, gridId, etc.scaleRange40%–120%: only CSS preview scale viaapplyScale()/scaleLabel— does not change mm.- Structure:
pageScaler,pageFrame,gridSvgas the canvas roots.
IV. InDesign — script & CEP (summary)
- ~7 templates in host match the first entries in the browser preset list; more templates exist only in the web preview until added to
typogridPRESETS. - Script: dialog → page size, bleed, mm rulers, master margins & columns, baseline grid (optional).
- Module grid: not auto-drawn in script (user uses Layout → Create Guides in InDesign).
- CEP:
typogridApplyPresetIndex,typogridApplyLayoutOverride; InDesign 2026+ may change CEP visibility — follow your install notes.
V. Illustrator — this extension (GridSeed)
Does not replicate the browser’s seven display toggles or content-planning block — see §0 and §III.
- Extension ID:
com.gridseed.illustrator(not the same folder ascom.typogrid.il.panelif you use both). - Artboard = finished size; bleed from each template’s spec; trim/safe as guides; grids as cyan paths on GridSeed Grid.
- No Place, no auto image frames — same boundary as §0.
- No InDesign-style page margin object: margins simulated with guides + layout levels; Words uses a rhythm step, not a full document baseline grid.
- Re-running grids: optional clear of construction first to avoid stacked paths.
VI. Units & source of truth
mm — trim, bleed, margins, gutters. pt — type & baseline in app settings. ≈ 1 pt = 0.3528 mm. Final print rules always follow your school or vendor.
VII. Feature matrix (summary)
| Feature | Web preview | InDesign script / CEP | Illustrator (GridSeed) |
|---|---|---|---|
| Full 20+ templates | Yes | ~7 in host | Many (paper + grid + layout) |
| Bleed / margins / columns / modules visible | Yes | Margins + columns in ID | Artboard + paths + guides |
| Publication baseline grid | Preview | Document grid | Words rhythm / not full ID grid |
| Spine / folds / safe (special) | Yes | No | Trim/safe where spec defines |
| Font & zone storyboard | Yes | No | Words + template preview |
| Place images / auto frames | No (SVG only) | No | No |
| Content planning + planAdvice | Yes (preview) | No | No |
| Live sidebar | Yes | CEP | CEP (this panel) |
| No Adobe install | Yes | No | No |
VIII. FAQ (concept)
- Are “images” in the browser real assets?
- No — dashed SVG slots and schematic zones only; no Place into Adobe.
- Why three type layers (TYPO / TYPO_PT / 58%)?
- Readable recommendations vs fixed zone pts vs non-overlapping preview labels — see §0.
- Why doesn’t InDesign auto-draw module grids?
- ExtendScript varies by version; users create guides from the module count in InDesign.
- Why clear or rebuild guides in Illustrator?
- Paths/guides carry the layout; repeating without clear stacks overlaps.
- Bleed says 3 mm in prose but my template says 0?
- bleedMm in the preset wins; “3 mm common” is only a habit.
- Numbers differ between web and app?
- Trust the current PRESETS / host arrays in each build.