search

marp-team / marp-core

The core of Marp converter
MIT License
766 stars 129 forks source link

Content overlap with header and footer in included themes #308

Closed Doctor-love closed 2 years ago

Doctor-love commented 2 years ago

Version of Marp Tool

Marp CLI v2.0.4

Operating System

Linux

Environment

How to reproduce

  1. Add a header and/or footer to a presentation with one of the three included themes
  2. Fill the slide with content
  3. Render slide using Marp CLI

Expected behavior

Reserved space/margin for header and footer to fit content

Actual behavior

Slide content overlap with header and footer.

Example 1: header_footer_overlap-1

Example 2: header_footer_overlap-2

Additional information

The behavior has been observed in the exported PDFs (Chromium) and using Firefox. To reproduce, create and render a presentation using the following content presentation: overlap_demo.md

yhatt commented 2 years ago

It's a known limitation from CSS absolute positioning for header and footer (position: absolute). Content-aware scaling is difficult in HTML rich contents (#197), and the slide author should reduce contents or change the style such as font-size for the current slide.

Escape-hatch: In Marp Core v3, you can use <marp-auto-scaling> custom element directly for down-scaling. Please enable HTML rendering in the Marp tool you are using. (--html in Marp CLI)

---
header: test
footer: test
style: |
  marp-auto-scaling[data-inside-container] > * {
    min-width: 1280px;
  }
  marp-auto-scaling[data-inside-container]::part(svg) {
    height: 600px;
  }
---

<marp-auto-scaling data-inside-container data-downscale-only>

# Hello

Write your contents here

</marp-auto-scaling>

---

...
harsh183 commented 1 year ago

Awesome! Having more code lines is such a big help