newspaper-layout

name

newspaper-layout

description

Convert text content into a beautifully typeset retro newspaper-style HTML page and preview it locally. Use this skill whenever the user wants to format text as a newspaper, create a newspaper-style layout, present content in a vintage newspaper format, or display any kind of text output (reports, articles, analysis, stories, summaries) in a visually striking newspaper design. Also trigger when the user mentions newspaper, retro layout, print-style formatting, multi-column text layout, or wants to make their content look like a classic broadsheet newspaper.

Newspaper Layout Skill

Transform any text content into a stunning retro newspaper-style HTML page and preview it locally — no network access required.

The output should feel like picking up a century-old broadsheet — warm yellowed paper, elegant serif typefaces, crisp multi-column layouts, and typographic details like drop caps and pull quotes that guide the reader's eye naturally through the content.

Workflow Overview

1. Analyze the input — break text into structured newspaper components
2. Generate the HTML — apply the newspaper template with proper CSS styling
3. Save and preview — write the HTML file and open it in the browser locally

---

Step 1: Analyze and Structure the Content

Read the user's text carefully and extract or create these components:

Component	Source	Fallback
Newspaper name (报头)	User-provided or infer from topic	"每日通讯"
Date	Today's date	Current date in Chinese format
Volume/Issue	Optional	"特刊"
Price	Optional	"免费阅读"
Headline (大标题)	Extract the core topic as a punchy headline	First sentence summary
Subheadline (副标题)	A secondary explanatory line	Omit if not natural
Byline (署名)	Author attribution	"本报特约记者"
Body paragraphs	Split into natural paragraphs	Keep original paragraphs
Pull quote (金句引言)	Pick the most impactful sentence	Omit if text is very short
Images	User-provided images	Optional, use generate_image if appropriate

Content adaptation guidelines

• Long text (>500 words): Perfect for the full newspaper treatment. Use 3-column layout, pull quotes, and possibly section breaks.
• Medium text (150-500 words): Standard layout with 2-3 columns. Consider adding a pull quote.
• Short text (<150 words): Use 1-2 columns. The layout should still feel like a newspaper through the masthead, typography, and styling, even with less content.
• Multiple topics: Consider using <hr> dividers or multiple article sections with individual headlines.
• Technical content: Tables, code, and data work fine — they'll span the full width, breaking out of the column layout naturally.

---

Step 2: Generate the Newspaper HTML

Read the template from assets/newspaper-template.html, then fill in the content. The template uses placeholder markers that you replace with actual content.

Template placeholders

Replace these markers in the template:

• {{NEWSPAPER_NAME}} — the masthead title (e.g., "科技前沿日报")
• {{VOL_INFO}} — volume/issue info (e.g., "Vol. 1 — 特刊")
• {{DATE}} — date line (e.g., "2026年3月7日，星期五")
• {{PRICE}} — price info (e.g., "免费阅读")
• {{HEADLINE}} — the main headline
• {{SUBHEADLINE}} — the subheadline (remove the element if not needed)
• {{BYLINE}} — author attribution
• {{BODY_CONTENT}} — the full article body as <p> tags, with optional <div class="pull-quote"> elements

Important CSS rules to remember

The template's CSS achieves the retro newspaper look through these key techniques — if you need to customize, keep these principles intact:

1. Paper texture: Warm background (#f4f1ea), subtle inner shadow for aged paper feel
2. Multi-column layout: CSS column-count: 3 with column-gap and column-rule dividers
3. Justified text: text-align: justify creates the signature blocky newspaper feel
4. Drop cap: ::first-letter pseudo-element on the first paragraph, floated left at ~4.8rem
5. Chinese text indent: text-indent: 2em for standard Chinese paragraph indentation
6. Serif typography: Georgia/Times New Roman for Latin, STSong/SimSun for Chinese
7. Double-line borders: border: 5px double for the classic newspaper header separation
8. Pull quotes: Bold, centered, bordered top and bottom with contrasting font (Kaiti/STKaiti)
9. Responsive breakpoints: 3→2 columns at 800px, 2→1 at 600px

Spacing guidelines

The template has carefully tuned spacing between sections to prevent overlapping. If you customize the layout, keep these minimum spacing rules:

• Header to headline: ≥40px (header { margin-bottom: 40px })
• Headline to subhead: ≥18px (headline { margin-bottom: 18px })
• Subhead to byline: ≥28px (subhead { margin-bottom: 28px })
• Byline to body: ≥28px (byline { margin-bottom: 28px })
• Pull quotes: ≥36px vertical margin on each side
• Section dividers: ≥32px vertical margin on each side
• Figures: ≥28px vertical margin (≥32px for full-width)
• Body to footer: ≥45px (footer { margin-top: 45px })
• Drop cap: Never use negative margin-bottom — it causes overlap with the second line

When adding custom elements that span all columns (via column-span: all), always set break-inside: avoid and sufficient vertical margins (≥30px) to prevent collision with adjacent content.

Handling images

If the user provides images or you generate them:

<figure style="break-inside: avoid; margin: 28px 0; column-span: all;">
  <img src="photo.jpg" alt="Description" style="width: 100%; height: auto;">
  <figcaption style="font-size: 0.85rem; font-style: italic; text-align: center; margin-top: 8px;">
    — 图片说明文字
  </figcaption>
</figure>

Use column-span: all for images that should span the full width. For smaller images within a column, omit this property.

Important: Save image files in the same directory as the HTML file so relative src paths work correctly.

Pure HTML & CSS only

All effects must be achieved with pure HTML and CSS. The <style> tag is the correct way to include CSS.

---

Step 3: Save and Preview

Save the HTML file

Save the generated HTML to a file:

newspaper_output.html

If images are used, save them in the same directory as the HTML file.

Preview locally

Use the included Python script to start a local HTTP server and open the page in the browser:

python <skill-path>/scripts/open_newspaper.py newspaper_output.html

This will:

1. Start a local HTTP server rooted at the file's directory
2. Open the page in the default browser automatically
3. Print the local URL (e.g., http://127.0.0.1:8787/newspaper_output.html)

The script uses only the Python standard library — no external dependencies, no network access needed.

Alternatively, if the agent environment doesn't support webbrowser.open(), you can tell the user to open the file directly:

• File path: Provide the absolute path so the user can open it manually
• Or start the server only and tell the user the local URL:

  python -m http.server 8787 --directory /path/to/output/dir
  

Deliver to the user

1. Tell the user the file path so they can find and share the HTML file
2. If the browser opened successfully, the user can see the result immediately
3. If the user wants changes, modify the HTML and re-run the preview script

---

Language & Typography Notes

• Chinese text: Use font-family: "Georgia", "STSong", "SimSun", serif — the serif fonts create the classic newspaper feel
• English text: Georgia or Times New Roman work perfectly for the retro broadsheet aesthetic
• Mixed content: The font stack handles both gracefully — Latin characters get Georgia, CJK characters fall back to STSong/SimSun
• Headline fonts: Playfair Display (available locally on many systems) adds editorial elegance, but Georgia works as a reliable fallback
• Kaiti (楷体): Used for subheadlines and pull quotes to create visual contrast with the body text
• Offline font note: The template uses a Google Fonts @import for Playfair Display and Noto Serif SC. In fully offline environments, these fonts won't load, but the CSS font stack gracefully falls back to locally installed serif fonts (Georgia, STSong, SimSun). The page will still look great.

---

Reference Files

• assets/newspaper-template.html — the full HTML/CSS template with placeholders. Read this to understand the exact markup structure.
• scripts/open_newspaper.py — local preview script. Starts an HTTP server and opens the newspaper in the browser.