Skip to content

Overflow and callouts ​

Why measure the rendering? ​

The theme hides whatever spills over (overflow: hidden): one paragraph too many can disappear without the preview making it obvious. Analyzing the Markdown is not enough to predict it, because everything depends on the font, the column width and line wrapping.

So the extension actually renders each slide, in a separate process, with Marp Core, the chosen CSS, your images and your local fonts, then measures:

  • the usable area of each slide;
  • the text fragments that overflow their column, card or cell.

Results appear in Problems, with the source DWA rendu (DWA rendering). The lightbulb offers to try medium or small. Intentional cropping of an image-full bg image is not reported.

When does measurement happen? ​

After a pause in typing (dwa.overflow.delay, 1,400 ms by default), or on demand with DWA : vérifier les débordements (check overflow). The status bar shows a measurement in progress, overflows, a partial measurement or an unavailable browser. Details are in Output → DWA Slides.

The browser ​

Chrome, Chromium or Edge must be installed in the environment that runs the extension: in WSL or over SSH, you need a browser in that environment. If detection fails, set dwa.overflow.browserPath. No browser is downloaded automatically.

Limitations ​

  • The document must be saved to resolve image paths.
  • Remote resources are not downloaded: remote or missing images ⇒ partial measurement.
  • Installed fonts affect the result (Montserrat missing ⇒ the theme's fallback font).
  • Raw HTML is disabled for measurement: third-party Marp extensions and arbitrary CSS/HTML are not part of the DWA contract.
  • Overlapping elements that stay inside their frame are not all detected; structure rules complement the geometric measurement.
  • Disabled in untrusted folders.
  • If Marp's experimental diagnostic markdown.marp.diagnostics.slideContentOverflow is enabled, disable one of the two to avoid duplicates. DWA does not change this setting.

Automatic callout sizing ​

A callout carries a single sentence, as large as possible. With dwa.callout.autoFit (enabled by default), after a pause in typing, the local browser picks the largest size that fits, from 50 to 180 px in 5 px steps, and writes it into the Markdown as a readable class:

md
<!-- _class: callout callout-size-105 -->

# A key idea to remember

Three sizes for three text lengths. Sizes picked by hand for illustration.

  • No CSS is written: the theme provides the 27 classes callout-size-50 to callout-size-180. No per-slide identifier, no generated file.
  • Measurement keeps 24 px of inner padding. Without a size class: 108 px.
  • Preview, PDF and PPTX use the saved size (converted to points for PowerPoint, whose metrics may differ slightly).
  • Copying, moving or renaming a presentation keeps the sizes.
  • If even 50 px is not enough, the overflow diagnostic stays.

Requirements: saved file, trusted folder, local browser. The calculation works even if overflow diagnostics are disabled. A measurement is discarded if the text or theme changed in the meantime.

To choose the size yourself, disable dwa.callout.autoFit: sizes are then offered in autocompletion after callout.

Former method

Earlier versions generated identifiers and styles in the Markdown. They are migrated to callout-size-N classes on the next successful calculation; manual styles and code examples are kept.

Documentation of the DWA Core v1 language, the VS Code extension, the CLI and the theme portal.