Refine poster: auto-number captions, fix Figure 2 clipping, chart-row layout, vertical centering

- Auto-number Figure/Table captions in column-major reading order
- Poster charts rendered as HTML wrapper divs with captions below SVGs
- Fix Figure 2 clipping by rebalancing grid (Intro 4 rows, Methods 5 rows)
- Remove redundant Background box from Introduction section
- Add justify-content: center for empty-title boxes (Acknowledgements)
- Add 3 more bullet points to Limitations and future work
- Update Acknowledgements links to short format (Data, Code, PDF)
- Consistent caption font size (24pt) immune to scale wrappers
- Legend field support for charts (legend: right positioning)
- Update gallery screenshot

Author: jeremymanning

docs/screenshots/poster-sample.png

@@ -11,7 +11,7 @@ IIIIIIIIRRRRRRRRRRRRDDDDDDDD
 IIIIIIIIRRRRRRRRRRRRDDDDDDDD
 IIIIIIIIRRRRRRRRRRRRDDDDDDDD
 IIIIIIIIRRRRRRRRRRRRDDDDDDDD
-IIIIIIIIRRRRRRRRRRRRDDDDDDDD
+MMMMMMMMRRRRRRRRRRRRDDDDDDDD
 MMMMMMMMRRRRRRRRRRRRDDDDDDDD
 MMMMMMMMRRRRRRRRRRRRDDDDDDDD
 MMMMMMMMRRRRRRRRRRRREEEAAAAA
@@ -28,7 +28,7 @@ MMMMMMMMRRRRRRRRRRRREEEAAAAA
 
 <div class="note-box" data-title="Orient your audience">
 
-Start with the **broad question** your research addresses and narrow to your specific contribution. Explain why this topic matters and what gap your work fills.
+Start with the **broad question** your research addresses and narrow to your contribution.
 
 </div>
 
@@ -46,6 +46,7 @@ Start with the **broad question** your research addresses and narrow to your spe
 <span class="label">Your approach</span>
 </div>
 </div>
+<div class="figure-caption">Research paradigm: from observation to hypothesis-driven inquiry</div>
 
 <div class="note-box" data-title="Hypotheses">
 
@@ -54,16 +55,8 @@ Start with the **broad question** your research addresses and narrow to your spe
 
 </div>
 
-<div class="note-box" data-title="Background">
-
-Prior work motivates this study; our approach advances the field by addressing key limitations in existing models.
-
-</div>
-
 ## M: Methods [violet]
 
-<div class="scale-90">
-
 <div class="definition-box" data-title="Experimental design">
 
 **Paradigm**: $N=50$ participants, within-subject design, naturalistic video stimuli.
@@ -102,8 +95,7 @@ Prior work motivates this study; our approach advances the field by addressing k
 <span class="label">Visualization</span>
 </div>
 </div>
-
-</div>
+<div class="figure-caption">Analysis toolkit spanning computation, brain imaging, and data visualization</div>
 
 ## R: Results [green]
 
@@ -149,6 +141,8 @@ $$\hat{y} = \beta_0 + \beta_1 x_1 + \beta_2 x_2 + \epsilon, \quad R^2 = 0.73$$
 | RT (ms) | 342 | 418 | 450 | < 0.05 |
 | F1 Score | 0.85 | 0.68 | 0.60 | < 0.01 |
 
+<div class="table-caption">Performance metrics across experimental groups</div>
+
 <div class="example-box" data-title="Generalization">
 
 Findings **replicate** across datasets and participant groups.
@@ -167,19 +161,18 @@ datasets:
     data: 0.71, 0.74, 0.70, 0.75, 0.73
 xlabel: Cross-validation fold
 ylabel: F1 score
+legend: right
 caption: Generalization across datasets
 ```
 
 <div class="example-box" data-title="Robustness">
 
-Cross-validation (k=5) and bootstrap resampling (1000 iterations) confirm stable effect size (Cohen's d = 0.8). Permutation testing corroborates significance (BF > 10).
+Cross-validation (k=5) and bootstrap resampling (1000 iterations) confirm stable effect size (Cohen's d = 0.8). Permutation testing corroborates significance (BF > 10). Sensitivity analyses varying regularization strength (λ = 0.01–10) show consistent results across parameter choices.
 
 </div>
 
 ## D: Discussion [teal]
 
-<div class="scale-80">
-
 <div class="tip-box" data-title="Key takeaways">
 
 - **Finding 1**: Model outperforms baseline by 15%, supporting H1
@@ -188,14 +181,6 @@ Cross-validation (k=5) and bootstrap resampling (1000 iterations) confirm stable
 
 </div>
 
-<div class="tip-box" data-title="Implications">
-
-- Evidence for predictive coding frameworks in perception
-- Challenges models assuming static representations
-- Opens avenues for computational psychiatry
-
-</div>
-
 ```chart
 type: radar
 labels: Accuracy, Speed, Scalability, Robustness, Interpretability
@@ -211,14 +196,17 @@ caption: Current capabilities vs. planned improvements
 
 - Sample limited to college-age participants
 - Future: longitudinal designs, larger cohorts
-
-</div>
+- Explore transfer learning to clinical populations
+- Incorporate real-time fMRI neurofeedback paradigms
+- Extend to multimodal data (EEG + fMRI fusion)
 
 </div>
 
 ## E: References [orange]
 
-<div class="scale-60">
+<div class="note-box" data-title="">
+
+<div class="scale-50">
 
 1. Author A *et al.* (2023). *J. Neurosci.*
 2. Author C *et al.* (2022). *Nat. Hum. Behav.*
@@ -228,12 +216,22 @@ caption: Current capabilities vs. planned improvements
 
 </div>
 
+</div>
+
 ## A: Acknowledgments [spring]
 
+<div class="note-box" data-title="">
+
 <div class="scale-65">
 
 **NSF EPSCoR** #1632738 · **NIH R01** MH112357 · **NSF CAREER** #1849109
 
-🌐 context-lab.com · 💻 github.com/ContextLab
+📦 Data: github.com/ContextLab
+
+💻 Code: github.com/ContextLab
+
+🌐 PDF: context-lab.com/publications
+
+</div>
 
 </div>

examples/sample_poster.md

@@ -245,13 +245,38 @@ table th {
 .poster-section > div[class*="scale-"] > .example-box:only-child,
 .poster-section > div[class*="scale-"] > .important-box:only-child {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   min-height: 0;
   overflow: visible;
 }
 
+.poster-section .note-box,
+.poster-section .warning-box,
+.poster-section .tip-box,
+.poster-section .definition-box,
+.poster-section .example-box,
+.poster-section .important-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.poster-section .note-box > :first-child,
+.poster-section .warning-box > :first-child,
+.poster-section .tip-box > :first-child,
+.poster-section .definition-box > :first-child,
+.poster-section .example-box > :first-child,
+.poster-section .important-box > :first-child {
+  margin-top: auto;
+}
+
+.poster-section .note-box > :last-child,
+.poster-section .warning-box > :last-child,
+.poster-section .tip-box > :last-child,
+.poster-section .definition-box > :last-child,
+.poster-section .example-box > :last-child,
+.poster-section .important-box > :last-child {
+  margin-bottom: auto;
+}
+
 .chart-row {
   display: flex;
   gap: 4mm;
@@ -265,6 +290,10 @@ table th {
   min-width: 0;
 }
 
+.poster-chart {
+  width: 100%;
+}
+
 /* Ensure SVG charts scale to fit their container */
 .poster-section svg {
   max-width: 100%;
@@ -317,6 +346,9 @@ table th {
   font-size: 1.14em;
   background-color: var(--section-box-bg, var(--box-default-bg));
   border-left: 3mm solid var(--section-box-border, var(--box-default-border));
+  overflow: visible;
+  word-break: normal;
+  overflow-wrap: break-word;
 }
 
 .note-box::before, .warning-box::before, .tip-box::before, 
@@ -373,6 +405,17 @@ table th {
 [data-title]::before { content: attr(data-title); }
 [data-title=""]::before { display: none; }
 
+/* When a box has no visible title, vertically center the content.
+   The ::before is hidden so we can use justify-content directly. */
+.poster-section .note-box[data-title=""],
+.poster-section .warning-box[data-title=""],
+.poster-section .tip-box[data-title=""],
+.poster-section .definition-box[data-title=""],
+.poster-section .example-box[data-title=""],
+.poster-section .important-box[data-title=""] {
+  justify-content: center;
+}
+
 .poster-color-blue { --section-box-bg: rgba(38, 122, 186, 0.12); --section-box-border: var(--river-blue); --section-box-title: var(--river-navy); }
 .poster-color-green { --section-box-bg: rgba(0, 105, 62, 0.10); --section-box-border: var(--dartmouth-green); --section-box-title: var(--dartmouth-green); }
 .poster-color-violet, .poster-color-purple { --section-box-bg: rgba(138, 105, 150, 0.12); --section-box-border: var(--violet); --section-box-title: #6a4d7a; }
@@ -477,6 +520,46 @@ p img[alt] {
   margin-top: 3mm;
 }
 
+.figure-caption {
+  text-align: center;
+  font-size: 0.85em;
+  font-style: italic;
+  color: var(--granite-gray);
+  margin: 2mm 0 4mm;
+  line-height: 1.3;
+}
+
+.figure-caption strong {
+  font-style: normal;
+}
+
+.table-caption {
+  text-align: center;
+  font-size: 0.85em;
+  font-style: italic;
+  color: var(--granite-gray);
+  margin: 1mm 0 4mm;
+  line-height: 1.3;
+}
+
+.table-caption strong {
+  font-style: normal;
+}
+
+/* Captions and figures must be visually consistent across all poster sections,
+   regardless of any scale-* wrapper applied to the parent.  We use a fixed
+   size (24pt ≈ 0.85 × 28pt base) so em-based scaling cannot affect them. */
+.poster-section .figure-caption,
+.poster-section .table-caption {
+  font-size: 24pt;
+}
+
+/* SVG charts inside poster sections should not shrink with scale wrappers */
+.poster-section div[class*="scale-"] svg {
+  max-width: none;
+  width: 100%;
+}
+
 .flow-diagram {
   display: flex;
   align-items: center;

src/cdl_slides/assets/themes/cdl-poster-theme.css

@@ -141,7 +141,17 @@ def _add_legend(ax, config: dict, palette: list):
     always_legend = chart_type in ("pie", "doughnut", "radar")
     show_legend = len(config["datasets"]) > 1 or always_legend
     if show_legend:
-        legend = ax.legend(fontsize=LEGEND_SIZE, frameon=False, labelcolor=CDL_TEXT_COLOR)
+        legend_pos = config.get("legend", "")
+        if legend_pos == "right":
+            legend = ax.legend(
+                fontsize=LEGEND_SIZE,
+                frameon=False,
+                labelcolor=CDL_TEXT_COLOR,
+                loc="center left",
+                bbox_to_anchor=(1.02, 0.5),
+            )
+        else:
+            legend = ax.legend(fontsize=LEGEND_SIZE, frameon=False, labelcolor=CDL_TEXT_COLOR)
         if legend:
             legend.get_frame().set_alpha(0)
 
@@ -320,7 +330,11 @@ def _data_sum(ds):
 
 
 def process_poster_chart_blocks(content: str) -> tuple:
-    """Process ```chart code blocks and convert them to inline SVG for posters."""
+    """Process ```chart code blocks and convert them to inline SVG for posters.
+
+    Chart captions are rendered as HTML divs (not embedded in SVG) so the
+    poster preprocessor can auto-number them consistently with other figures.
+    """
     chart_pattern = r"```chart\n(.*?)```"
     charts_processed = 0
 
@@ -333,7 +347,14 @@ def replace_chart_block(match):
             return match.group(0)
 
         charts_processed += 1
-        return render_chart_svg(config)
+        caption = config.get("caption", "")
+        config["caption"] = ""
+        svg_html = render_chart_svg(config)
+
+        if caption:
+            svg_html += f'\n<p class="figure-caption">{caption}</p>'
+
+        return f'<div class="poster-chart">\n{svg_html}\n</div>'
 
     processed = re.sub(chart_pattern, replace_chart_block, content, flags=re.DOTALL)
     return processed, charts_processed

src/cdl_slides/chart_renderer.py

@@ -174,6 +174,50 @@ def extract_poster_sections(content: str) -> dict[str, dict[str, str | None]]:
     return sections
 
 
+def _reading_order_labels(layout: dict[str, Any]) -> list[str]:
+    """Return section labels sorted in column-major reading order.
+
+    Sorts by (col_start, row_start) so sections are ordered left-to-right
+    across columns and top-to-bottom within each column — matching the
+    natural reading order of a multi-column academic poster.
+    """
+    areas = layout["areas"]
+    return sorted(
+        layout["labels"],
+        key=lambda lbl: (areas[lbl]["col_start"], areas[lbl]["row_start"]),
+    )
+
+
+def _auto_number_captions(content: str, fig_count: int, tbl_count: int) -> tuple[str, int, int]:
+    """Prepend bold 'Figure X.' / 'Table X.' to caption divs in *content*.
+
+    Only captions with text are numbered; empty caption divs are skipped.
+    Returns (updated_content, new_fig_count, new_tbl_count).
+    """
+
+    def _replace_fig(m: re.Match) -> str:
+        nonlocal fig_count
+        tag = m.group(1)
+        caption_text = m.group(2).strip()
+        if not caption_text:
+            return m.group(0)
+        fig_count += 1
+        return f'<{tag} class="figure-caption"><strong>Figure {fig_count}.</strong> {caption_text}</{tag}>'
+
+    def _replace_tbl(m: re.Match) -> str:
+        nonlocal tbl_count
+        tag = m.group(1)
+        caption_text = m.group(2).strip()
+        if not caption_text:
+            return m.group(0)
+        tbl_count += 1
+        return f'<{tag} class="table-caption"><strong>Table {tbl_count}.</strong> {caption_text}</{tag}>'
+
+    content = re.sub(r'<(div|p) class="figure-caption">(.*?)</(?:div|p)>', _replace_fig, content)
+    content = re.sub(r'<(div|p) class="table-caption">(.*?)</(?:div|p)>', _replace_tbl, content)
+    return content, fig_count, tbl_count
+
+
 def generate_poster_html(
     frontmatter: dict[str, Any],
     layout: dict[str, Any],
@@ -217,9 +261,12 @@ def generate_poster_html(
 }}
 </style>"""
 
+    ordered_labels = _reading_order_labels(layout)
     section_divs = []
     charts_total = 0
-    for label in layout["labels"]:
+    fig_count = 0
+    tbl_count = 0
+    for label in ordered_labels:
         if label not in sections:
             continue
         sec = sections[label]
@@ -230,6 +277,7 @@ def generate_poster_html(
         section_content = sec["content"] or ""
         section_content, chart_count = process_poster_chart_blocks(section_content)
         charts_total += chart_count
+        section_content, fig_count, tbl_count = _auto_number_captions(section_content, fig_count, tbl_count)
         div = f"""<div style="grid-area: {label};" class="{css_class}">
 
 {heading}