Get back size global directive

[yhatt]

Background

The old Marp app has $size global directive to change slide size, but it omitted in Marpit framework by restriction of inline SVG slide for realizing zero-JS slide.

In the position of theme author, it means does not need to worry about responsive design. So it would become easy to create theme with less effort. (We also have an opinion that the other slide framework has few community themes because it's hard to care responsive layout on the Web)

Marp Core is also following this way of thinking. Our official themes only provide 16:9 slide, is the standard size in PowerPoint and Keynote.

Feedback

On the other hand, we have recieved many feedbacks that want to change slide size. (marp-team/marpit#163, marp-team/marp-vscode#43, #90)

Currently we are recommending to use new theme with @import 'base-theme' + custom section size, but it's bit complex and have some unsupported Marp integrations: VS Code, React, Vue.

#90 suggests to provide 4:3 slide as the variation of built-in theme but we could not accept because it denys our position that theme author does not need to worry responsive size. Marp Core's theme support should select whether theme author allowed custom size.

Idea

Get back size global directive from the old Marp app.

Theme author has to permit pre-defined custom size in Marp Core's theme metadata, so don't have to worry collapsed design by unexpected size.

Usage

/*
 * @theme foobar
 * @size 4:3 960px 720px
 * @size 16:9 1280px 720px
 */

---
theme: foobar
size: 4:3
---

# 4:3 slide

ToDo

• Add size global directive to Marp Core by using Marpit's custom directive support
• Parse theme metadata @size 4:3 960px 720px
  • size global directive can only use pre-defined size in @size meta.
• Generate temporary custom theme based on parsed size directive
  • Marp Core can override Marpit's style generation method, so we should generate temporary custom theme like Add 4:3 Themes #90 programmatically.

[kishida]

Sounds great!
Current problem is that it is hard to include a theme css for some environment such as Web client.
If marp-core had the feature to configure 4:3 as a directive, we can describe it as a document property. It is very nice.

[yhatt]

To parse multi-time meta definitions like @size metadata, we have to work on Marpit too.
👉 marp-team/marpit#170