```
```css
figcaption::before { content: attr(data-label) " "; font-weight: bold; }
caption::before { content: attr(data-label) " "; font-weight: bold; }
.equation::after { content: attr(data-label); float: right; }
```
**Anchor placement**: `id` goes on `` not ``, for correct jump positioning.
#### Prevent Overflow (CRITICAL)
**All block elements must not exceed page width.** Use this unified rule:
```css
/* Prevent all block elements from overflowing page */
pre, table, figure, img, svg, .mermaid, blockquote, .equation {
max-width: 100%;
box-sizing: border-box;
}
pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
figure img, figure svg { max-width: 80%; max-height: 40vh; height: auto; }
table { overflow-x: auto; }
/* Prevent justify from stretching short lines */
body { text-align: justify; text-align-last: left; }
/* Prevent long URLs from overflowing */
a { word-break: break-all; }
/* Prevent long formulas from overflowing */
.katex-display { overflow-x: auto; }
/* Prevent long code/words from overflowing */
code { word-break: break-word; }
/* Prevent table rows from breaking mid-cell */
tr { page-break-inside: avoid; }
```
The conversion script auto-detects overflow and warns. Fix any reported elements.
#### Vertical Centering (CRITICAL)
**PROHIBITED**: Do NOT use `line-height` or `vertical-align: middle` for centering text in fixed-size containers. These depend on font baseline and are unreliable—text often appears off-center.
**Required**: Use flexbox. This applies to ALL fixed-size containers with centered content: step numbers, badges, tags, avatar placeholders, icon wrappers, etc.
```css
/* WRONG - text shifts with different fonts */
.step-number {
width: 1.5em; height: 1.5em;
line-height: 1.5em;
text-align: center;
}
/* CORRECT - universal pattern for any centered container */
.step-number {
width: 1.5em; height: 1.5em;
display: inline-flex;
align-items: center;
justify-content: center;
}
```
### Reference Standards
**All citations must be real, no mocking**—must verify via search, fabricating any author, title, year, or page number is prohibited.
#### Strict Correspondence Constraint
In-text `[1]` must strictly correspond to end-of-document `
`:
- `id` must be unique and matching
- No empty links or dangling references
#### Citation Style (Black Superscript)
```css
a.cite { color: black; text-decoration: none; vertical-align: super; font-size: 0.75em; }
```
#### Hanging Indent (Professional Typesetting Mark)
```css
.references li {
padding-left: 2em;
text-indent: -2em;
}
```
#### Citation Format Selection
| Scenario | Format |
|----------|--------|
| Chinese academic papers, coursework | GB/T 7714 (use [J][M][D] etc. document type identifiers) |
| English papers, international journals | APA format |
| Mixed Chinese/English | Chinese uses GB/T 7714, English uses APA |
#### Italics Rules (APA)
Book titles, journal names must be italicized, use `` tag:
```html
Raymond, E. S. (2003). The Art of Unix Programming. Addison-Wesley.
Vaswani, A., et al. (2017). Attention is all you need. NeurIPS, 30, 5998-6008.
```
**Italics scope**: Book titles, Journal names (yes), Article titles, Publishers (no)
### Footnotes (Paged.js Specific Syntax)
```css
.footnote-ref { float: footnote; }
.footnote-ref::footnote-call { content: counter(footnote); vertical-align: super; font-size: 0.75em; }
.footnote-ref::footnote-marker { content: counter(footnote) ". "; }
@page { @footnote { margin-top: 1em; border-top: 1px solid #ccc; padding-top: 0.5em; } }
```
```html
Body textThis is footnote content, automatically typeset at page bottom.
```
### Table of Contents (Must Use Links for Clickability)
```html
