The Review — Style Guide

This guide ensures consistency across all editions of The Review. It applies to both human editors and AI assistants during production. The goal: professional, readable, uniform output across HTML, PDF, and Obsidian Markdown formats.

1. Output Formats & File Structure

Required Outputs

Each edition produces three files:

Format	Filename Pattern	Purpose
HTML	`yyyy-mm-dd-todays-newspaper.html`	Standalone web viewing
PDF	`yyyy-mm-dd-todays-newspaper.pdf`	Print/archive
Markdown	`yyyy-mm-dd-todays-newspaper.md`	Obsidian vault integration

File naming rules:

All lowercase
Dashes for word separation (never underscores)
Date prefix in ISO format: yyyy-mm-dd

Folder Structure

newspaper-yyyy-mm-dd/
├── yyyy-mm-dd-todays-newspaper.html   (standalone, all assets embedded)
├── yyyy-mm-dd-todays-newspaper.md     (for Obsidian)
├── yyyy-mm-dd-todays-newspaper.pdf    (generated from HTML)
├── infographic-name-1.svg             (flat, for user's attachments folder)
├── infographic-name-2.svg
└── ...

Critical: SVG files are delivered flat (not in subfolders) so users can drop them directly into their vault’s attachments folder.

2. HTML Format Specifications

Self-Containment Requirements

The HTML file must work completely standalone — viewable from a local hard drive with no network connection.

Embed everything inline:

Asset Type	Embedding Method
CSS	`<style>` block in `<head>`
SVG graphics	Inline SVG elements in document body
Fonts	Google Fonts CDN link with local fallbacks

Example structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Review — [Date]</title>
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* ALL CSS HERE — never link external .css files */
    body { font-family: 'Playfair Display', Georgia, serif; }
  </style>
</head>
<body>
  <!-- Content with inline SVGs -->
</body>
</html>

Font Stack (with fallbacks)

Always specify fallbacks for offline viewing:

/* Headlines */
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
 
/* Body text */
font-family: 'Source Serif Pro', Georgia, serif;
 
/* Captions/UI */
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;

Infographic Container Styling

.infographic-container {
  max-width: 700px;
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
 
.infographic-container svg {
  width: 100%;
  height: auto;
  display: block;
}
 
.infographic-container figcaption {
  text-align: center;
  font-style: italic;
  color: #666;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

3. Obsidian Markdown Format

YAML Frontmatter (Required)

Every Markdown file begins with frontmatter in this exact format:

---
title: "The Review — [Day], [Month] [Date], [Year]"
created: "yyyy-mm-dd"
modified: "yyyy-mm-dd"
description: "Brief description of this edition's themes and articles."
tags:
  - newspaper
  - the-review
  - [topic-tag-1]
  - [topic-tag-2]
  - [topic-tag-3]
---

Tag conventions:

All lowercase
Dashes for multi-word tags (e.g., dead-sea-scrolls)
Always include newspaper and the-review
Add 3-6 topic-specific tags per edition

Image References

Use Obsidian wikilink syntax:

![[attachments/infographic-name.svg]]

Critical clarifications:

The attachments/ path references the vault root, not a subfolder
Do NOT use relative paths like ./images/ or ../attachments/
Do NOT use standard Markdown image syntax ![alt](path)

Centered image blocks:

<center>
 
![[attachments/bible-paper-supply-chain.svg]]
*Caption: The Materiality Gap*
 
</center>

Drop Caps in Markdown

Approximate drop caps with bold first letter:

**T**he pages are ghosting. That's the term Bible collectors use...

4. SVG Infographic Specifications

Naming Convention

[topic-slug].svg

Examples:

bible-paper-supply-chain.svg
enoch-ai-analysis.svg
psalm-circle.svg

Technical Requirements

Property	Value
ViewBox	Recommended `0 0 800 500` (adjust for content)
Fonts	Use `font-family` with web-safe fallbacks
Colors	Muted palette matching newspaper aesthetic
Text	All text as `<text>` elements (not paths) for accessibility

Style Guidelines

<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
  <style>
    .title { font-family: Georgia, serif; font-size: 24px; font-weight: bold; }
    .label { font-family: Arial, sans-serif; font-size: 14px; }
    .accent { fill: #8B4513; }  /* Warm brown for emphasis */
    .muted { fill: #666; }
  </style>
  <!-- Content -->
</svg>

Required Infographics Per Edition

One infographic per main article (not editorial). Each should:

Visualize data, processes, or comparisons from the article
Include a descriptive caption
Use consistent styling across the edition

5. Content Structure

Edition Components (in order)

Masthead
- Volume/issue line: VOL. I, NO. [n] • [DAY], [MONTH] [DATE], [YEAR] • PRICE: [WHIMSICAL ITEM]
- Newspaper name: THE REVIEW
- Tagline in quotes, italic
- Section divider: ---
Editor’s Letter
- Headline in bold, title case
- “Dear Reader,” salutation
- Drop cap on first paragraph
- Signed: —The Editors
- Section divider: ❧ ❧ ❧
Main Articles (4-6)
- Each includes:
  - Headline (title case, bold)
  - Subheadline (italic)
  - Drop cap on first paragraph
  - Infographic (placed after 1st or 2nd paragraph)
  - “For Further Reading: Perspectives” section
- Section divider: ❧ ❧ ❧
Editorial
- Label: # EDITORIAL
- Headline
- Drop cap
- “For Further Reading: Perspectives” section
- Section divider: ❧ ❧ ❧
Footer
- Production Note
- Coming Next Week teaser
- Copyright: © [Year] The Review. All rights reserved.
- Contact line

”For Further Reading: Perspectives” Format

#### For Further Reading: Perspectives
 
**PRO** "Article Title" — Source Name  
[domain.com](https://full-url) (Month Year)  
*Argument: One-sentence summary of the pro position.*
 
**CON** "Article Title" — Source Name  
[domain.com](https://full-url) (Month Year)  
*Argument: One-sentence summary of the con position.*

Requirements:

Links must be clickable and point to actual articles
Always include both PRO and CON perspectives
Arguments should be neutral summaries, not endorsements

6. Typography & Formatting Rules

Headlines

Level	Markdown	Use
Newspaper name	`# THE REVIEW`	Masthead only
Article headline	`## Headline Here`	Each article
Article subhead	`### Subheadline here`	Below headline
Section label	`# EDITORIAL`	Editorial section

Text Emphasis

Style	Use	Example
Bold	First mention of key terms/names	Mark Bertrand of Bible Design Blog
Italic	Book titles, foreign words, emphasis	lectio divina
”Quotes”	Direct quotations, article titles	”quantified objectivity”

Punctuation

Oxford comma: Always use (apples, oranges, and bananas)
Em-dash: — for interruptions (no spaces around)
En-dash: – for ranges (2025–2026)
Quotation marks: Curly quotes preferred in HTML (""), straight in Markdown

Numbers

Spell out one through nine
Use numerals for 10 and above
Always use numerals with units: 2.5 centimeters, 783,000 words

7. Language & Tone

Style Standard

Follow Associated Press (AP) style with these additions:

American English spelling (color, not colour)
Abbreviate months in dates: Jan. 25, 2026
Titles on first reference: Professor Mladen Popović; thereafter: Popović

Voice

Section	Tone
Editor’s Letter	Warm, direct, reflective
News Articles	Neutral, factual, with witty edge
Editorial	Opinionated but balanced

Word Count Guidelines

Section	Target
Editor’s Letter	250-500 words
Main Articles	450-750 words each
Editorial	400-800 words
Total Edition	2,000-3,500 words

8. PDF Generation

Method

Generate PDF from HTML using wkhtmltopdf:

wkhtmltopdf \
  --enable-local-file-access \
  --page-size Letter \
  --margin-top 20mm \
  --margin-bottom 20mm \
  --margin-left 20mm \
  --margin-right 20mm \
  input.html output.pdf

Pre-Generation Checklist

All SVGs render correctly in browser
Fonts load (or fallbacks display properly)
Links are clickable
Drop caps display correctly
Infographics fit within page width

9. Production Checklist

Before Starting

Confirm publication date and day of week
Note preparation date for Production Note
Identify 4-6 articles plus editorial
Plan infographic for each main article

Content Review

All headlines in title case
Drop caps on all article openings
All “Perspectives” links verified working
PRO and CON provided for each article
Price in masthead is whimsical and thematic

File Outputs

HTML opens standalone in browser (no network)
All CSS embedded in <style> block
All SVGs embedded inline in HTML
Markdown has correct YAML frontmatter
Markdown uses ![[attachments/...]] syntax
PDF renders all content correctly
All files use yyyy-mm-dd-todays-newspaper naming

Delivery

SVG files delivered flat (not in subfolders)
Instructions provided: “Drop SVGs into vault’s /attachments/ folder”
All three formats present and named correctly

10. Common Mistakes to Avoid

HTML Issues

Mistake	Correction
CSS in external file	Embed all CSS in `<style>` block
SVGs as `<img src="">`	Use inline `<svg>` elements
Missing font fallbacks	Always specify Georgia/Arial fallbacks

Markdown Issues

Mistake	Correction
`![alt](path)` for images	Use `![[attachments/filename.svg]]`
Subfolder paths	Reference vault-root `attachments/`
Inline YAML tags `[tag1, tag2]`	Use array format with `-`
Missing frontmatter fields	Include title, created, modified, description, tags

Infographic Issues

Mistake	Correction
Placed in subfolder	Deliver flat for easy vault integration
Mixed naming conventions	Use all-lowercase with dashes
Missing captions	Always include descriptive figcaption

Appendix A: Example YAML Frontmatter

---
title: "The Review — Sunday, January 25, 2026"
created: "2026-01-22"
modified: "2026-01-22"
description: "Weekly newspaper examining faith, technology, and scripture. This edition: Bible paper supply chain crisis, AI dating Dead Sea Scrolls, Assyrian cuneiform in Jerusalem, LDS translation policy, dyslexia-friendly Bibles, and contemplative reading."
tags:
  - newspaper
  - the-review
  - bible
  - technology
  - faith
  - dead-sea-scrolls
  - typography
  - publishing
  - ai
  - archaeology
  - lectio-divina
---

Appendix B: Example Infographic Reference

In HTML (inline SVG):

<figure class="infographic-container">
  <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG content -->
  </svg>
  <figcaption>The Materiality Gap: Where the Bible Paper Supply Chain Breaks Down</figcaption>
</figure>

In Markdown (Obsidian wikilink):

<center>
 
![[attachments/bible-paper-supply-chain.svg]]
*The Materiality Gap: Where the Bible Paper Supply Chain Breaks Down*
 
</center>

Appendix C: Color Palette

Use	Hex	Description
Background	`#faf7f2`	Warm paper tone
Text	`#333`	Near-black for readability
Headlines	`#1a1a1a`	True black
Accent	`#8B4513`	Saddle brown
Links	`#5c3d2e`	Dark brown
Dividers	`#ddd`	Light gray
PRO highlight	`#e8f5e9`	Soft green
CON highlight	`#ffebee`	Soft red

This style guide should be reviewed and updated after each production cycle to incorporate lessons learned.

DB Markham's Homepage

Explorer

The Review — Style Guide

The Review — Style Guide

1. Output Formats & File Structure

Required Outputs

Folder Structure

2. HTML Format Specifications

Self-Containment Requirements

Font Stack (with fallbacks)

Infographic Container Styling

3. Obsidian Markdown Format

YAML Frontmatter (Required)

Image References

Drop Caps in Markdown

4. SVG Infographic Specifications

Naming Convention

Technical Requirements

Style Guidelines

Required Infographics Per Edition

5. Content Structure

Edition Components (in order)

”For Further Reading: Perspectives” Format

6. Typography & Formatting Rules

Headlines

Text Emphasis

Punctuation

Numbers

7. Language & Tone

Style Standard

Voice

Word Count Guidelines

8. PDF Generation

Method

Pre-Generation Checklist

9. Production Checklist

Before Starting

Content Review

File Outputs

Delivery

10. Common Mistakes to Avoid

HTML Issues

Markdown Issues

Infographic Issues

Appendix A: Example YAML Frontmatter

Appendix B: Example Infographic Reference

Appendix C: Color Palette

Graph View

Table of Contents