Skip to content

[v4] Always treat the slide container of built-in themes as block element #372

Closed
@yhatt

Description

Recent browsers (Chrome >= 123, Firefox >= 125, Safari >= 17.4) become supported align-content: center for the block container.

section {
  display: block;
  align-content: center;
}

Currently Marp built-in themes are using the flexbox container as the slide section to make centering contents vertically.

section {
  display: flex;
  align-items: center;
}

However, some CSS features that are useful for the layout are not available in the flexbox:

They had actually brought users confusion like following:

In next major version, we have to consider to adopt align-content: center with display: block as the slide container for vertically centering.

Backward compatibillity

Between the block container and flexbox container, there is a small difference in the behavior of vertically centering when sticked out inner contents.

  • Contents within flexbox container always will keep the center of the slide, regardless of the slide padding.
    When overflowed, the inner contents will stick out from both upper and lower side of the slide.
  • Contents within block container will try to keep the center of the slide, but not interfere with the slide padding.
    When overflowed, the inner contents will stick out only from the lower side of the slide.

Changing the slide container style may affect to the layout of existing slides. Thus, this change must be a major change of Marp Core, and must provide a workaround to get back into the behavior of flex container through an inline style.

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      [v4] Always treat the slide container of built-in themes as block element · Issue #372 · marp-team/marp-core