The rendered height often exceeds the boundaries

[maxin9966]

Note

To make clear the subject and improve discoverability, the moderator has been changed a title of this thread from original.

Original title: AI-generated md content issue

---

Another issue is that since the content is AI-generated, the rendered height often exceeds the boundaries of the PPT slide. This forces me to render repeatedly, adjusting the scaling factor each time. Producing a single image might take seven or eight rendering attempts—not only is this slow, but it also consumes significant IO resources.

Does Marp have any built-in mechanism to ensure that the main content always stays within a predefined area, with automatic scaling if the content overflows?

[yhatt]

Does Marp have any built-in mechanism to ensure that the main content always stays within a predefined area, with automatic scaling if the content overflows?

Partially.

Marp Core has auto-scaling features for some kind of elements that are horizontaly exceeded from the slide boundary: The code block, math block, and the fitting header (# <!--fit--> foobar).

On the other hand, we have no built-in support of auto-scaling for vertically exceeded contents.

 
Each of the built-in Marp themes is designed to have a sufficiently large font size. We do not recommend using smaller font sizes, as this can make slides hard for the audience to see.

As a general advice to lead making better presentation slides, we recommend dividing the content appropriately across multiple pages. A single page should not cram much text and contents into it.

[yhatt]

If you REALLY want the content to fit vertically within the slide, you can put a client-side JavaScript to make smaller font size until it no longer exceeds the size of the slide page.

Reference of base idea: https://dev.to/jankapunkt/make-text-fit-it-s-parent-size-using-javascript-m40

<script defer>
  document
    .querySelectorAll(
      // Target only `<section>` elements that are used as a primary content of each slide page
      `svg[data-marpit-svg] > foreignObject > section:is(
        :not([data-marpit-advanced-background]),
        [data-marpit-advanced-background="content"]
      )`
    )
    .forEach((section) => {
      // Get the initial font size from the page
      let fontSize = parseFloat(window.getComputedStyle(section).fontSize);

      // Try to set reduced font size until the content fits within the section
      while(section.scrollHeight > section.clientHeight) {
        fontSize -= 0.1;
        section.style.fontSize = `${fontSize}px`;
      }
    });
</script>

Again, we do not recommend this approach. Running <script> in the global context is potentially dangerous, and it may become invalid in other Marp tools including 3rd party.