Split slides

[tosaba]

I was wondering if there is a way to split the canvas in the same way as you can split the slide for background images, i.e. a two-columns layout?

At the moment, this is possible,

<!--Left hand side -->
# Some title
- item
- item

![](https://maybe.another.non-background-image.jpg)

<!--Right hand side -->
![bg right](https://example.com/backgroundB.jpg)

but wouldn't it be nice to be able to split the slides for non-image contents,

<!-- Left column -->
# Left hand side
- item
- item

<!--Right column -->
# Right hand side
- item
- item

or to even vertically split a column to include non-image contents or BG-images only within one column?

<!-- Left column -->
# Left hand side
- item
- item

<!--Right column -->
<!--Right top -->
![bg right-top](https://example.com/backgroundA.jpg)
<!--Right bottom -->
![bg right-bottom](https://example.com/backgroundB.jpg)

If this can not easily be added, I think it would already be very nice if this only works with BG-images.
Maybe this can be realized with additional keywords (e.g., left-top, left-bottom, right-top, right-bottom), like in the example above.

[yhatt]

Marpit allows flexible and predictable layouting via theme CSS, so I'm afraid edge cases of unexpected layout for Marpit theme author by split slides.

I think it is not impossible to implement but should stay simple in Marpit.

[jingsam]

I think it would be useful to add some common layout like ppt:

[yhatt]

We expect that it's a job by theme CSS, not framework. Marpit already provides class directive to select defined layout through class for styling.

section.title {
  --title-height: 130px;
  --subtitle-height: 70px;

  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr var(--title-height) var(--subtitle-height) 1fr;
  grid-template-areas: "." "title" "subtitle" ".";
}

section.title h1,
section.title h2 {
  margin: 0;
  padding: 0;
  text-align: center;
  height: var(--area-height);
  line-height: var(--area-height);
  font-size: calc(var(--area-height) * 0.7);

  border: 1px dashed gray; /* debug */
}

section.title h1 {
  grid-area: title;
  --area-height: var(--title-height);
}

section.title h2 {
  grid-area: subtitle;
  --area-height: var(--subtitle-height);
}

<!-- _class: title -->

# Title
## Subtitle

[fabulist-ssdd]

@yhatt I can understand the example and idea that you were trying to present. However, I believe that there are still needs for split slide for some certain situation, such as presenting comparative contents in one slide. I have tried to solve it with theme CSS as you were suggested. However, the solution involved with using html tags.

section.split {
    overflow: visible;
    display: grid;
    grid-template-columns: 500px 500px;
    grid-template-rows: 100px auto;
    grid-template-areas: 
        "slideheading slideheading"
        "leftpanel rightpanel";
}
/* debug */
section.split h3, 
section.split .ldiv, 
section.split .rdiv { border: 1.5pt dashed dimgray; }
section.split h3 {
    grid-area: slideheading;
    font-size: 50px;
}
section.split .ldiv { grid-area: leftpanel; }
section.split .rdiv { grid-area: rightpanel; }

### A split slide
<!-- _class: split -->

<div class=ldiv>

#### Title for the left panel
- listed item
- listed item
- listed item
</div>
<div class=rdiv>

#### Title for the right panel
- listed item
- listed item
- listed item
</div>

As @jingsam has suggested, PowerPoint offers layout options which provide a range of solutions on presenting different types of contents for variety of purposes, for example, comparative content: "advantages" on the left and "disadvantages" on the right, or explaining data table: "table" on the left and "descriptions" on the right.

Right now, the advanced background setting can offer 2 columns display for text and image, which will be placed on each side. But, the needs are:

• presenting contents with 2 columns with non-image based elements on each side; As @tosaba was suggested.
• the contents in 2 columns are same level as presented.

These needs, (well, in my opinion), are essential for a common presentation, especially when involving data table, evaluation, comparison, and etc. in wide screen.

If I understand the marpit css framework right, I can adjust element display with css individually on tag basis. Which means, under the condition of using grid display, a H3 title can go either left or right. But once the H3 title has been defined on the left, it can't really be placed on the right. And, without a parent container such as div or span, it is nearly impossible to set a group of markdown elements on both sides.

So, I can accept using html tags. But, just wondering, is there any other solution with no html tags involvement?

[yhatt]

I think it's surely difficult to provide a complex layout only in Markdown because container elements are required for grid layout to some contents as you were pointing out. (e.g. reveal.js)

A remaining way is using plugin to extend Marpit. It needs a lot of knowledges about JavaScript, Marpit and markdown-it, but it would be able to control the result of DOM structure as you like, by manipulating tokens and instance in plugin. So Marpit does never prevent to enhance Markdown syntax through plugin to help building containers for layout. Actually markdown-it-container, explained in the document, already might help that case.

In all cases, our framework had better to keep simple structure, based on CommonMark and plain CSS themeing, for making easy to extend. Marpit should not provide complex layouts until The Only Neat Thing to Do has found.

[yhatt]

I'll plant a seed for an idea: Split slides by ---, and split contents by ***. It won't be broken compatibility with Markdown document because both are indicated the same ruler <hr /> in CommonMark.

<!-- _layout: two-columns -->

# Title

***

## Contents

- foo
- bar

***

![](image.jpg)

---

# Second page

[fabulist-ssdd]

It actually a good idea of using *** as column separator.

I have checked markdown-it-container like months ago when I first spot this thread. It requires knowledge about JavaScript which I don't have. And I have tried to find a markdown preview plugin for markdown-it-container on VSCode, which failed again. It seems that adding container is not really a critical need for a markdown document. As you have kept mentioned about marpit should stay simple, a markdown document is meant to be simple as well. Then, it got me thinking and actually changing the structures of all my document templates.

I am actually a Latex user for more than half decade, complex formatting seems a life for my work. I used a lot container in Latex beamer in order to separate different types of contents. To be honest, markdown+css is far more easier to maintain than latex, while I am not composing document with strict academic formatting requirements.

Now, I can't really help with programming bit as I am never a programmer. But, here is what I thought about using *** as column separator:

For the most of time, Latex offers a concept of structural writing. A normal article will have front matter, main matter, and end matter for different functions. So does the presentation. In Latex beamer, even the slide page was edited frame by frame individually, it is still encouraged to separated them by sections or sub-sections. The frame title (slide title) were separated from section structure.

As for Marpit, separating slides can be done in --- or *** or using headingDivider.

Now, the headingDivider is a great thing. It actually provides title for each slide, and it is perfect for structural writing. If using the headingDivider, contents will be naturally separated by pre-defined heading level. Then, here comes the ground rules:

• if: headingDivider: 3
• then: every H3 will start a new slide, and a slide will be ended by a new apeared H1 or H2 ro H3.
• if: current slide cannot hold all contents before the next divider can appeared.
• then: using --- to break current slide into 2 slides.

These work perfectly under the current framework, while all elements in a slide are vertically line up and within a <section> tag.

So, using *** to separate columns, it basically separate a slide into 3 area: (by using class directive to trigger the 2-columns template)

• a pre-defined heading divider (such as H3) or a --- will start the slide; the heading divider that start the 2-columns slide will be displayed as heading text, in a heading area that covers the double columns width horizontally. And, it will be more convenience that, all elements will be displayed under the default format in this heading are before the *** indicator appeared. Then, it will be quite easy to add sub-title and briefing before the columns can begin.
• The *** mark should be treated as indicator for a column start. Meaning,
  the 1st *** will trigger the format and force everything after the *** into the left column.
  the 2nd *** will trigger the format and force everything after this *** into the right column.
• once the column has been trigger by the ***, all elements will be hold in the desired area. But, a new pre-defined heading divider or a new --- will end the current slide and start a new slide.

And, here are some predictable compatibility issues:

• A slide can be separated into 2 columns. The 3rd *** should forcibly end the slide.
• The heading divider or --- appeared after the 1st *** should end the slide. But, the left column should remain.
• Split background image and 2-columns break can work together. Personally, I don't think that is necessary to have split background within column. The current background handle for slide is good enough.

For advanced usage:

• The 2-columns formatting can be adjusted by css theme, such as the width of the columns (individually setting for left and right?), the gaps, border, color, etc. If the columns were controlled by a container with class attribute, customization with css won't be a problem.

Well, here is all I can come out with right now.

[wq163]

Have any progress about using *** as column separator ？

[yhatt]

No. That's just an idea and we don't think to start work for the built-in feature. We expect creating plugin for *** separator by community as shown by better-for-plugin label.

If the plugin has grown by accepting by community, we would consider to take in it.

[cben]

A benefit of sticking to markdown-it-container syntax, is that it's very close to a "fenced div" syntax Pandoc supports.
Specifically, it supports using it do delimit columns, for many output formats — regular HTML doc, HTML presentations, LaTeX beamer presentations.
See https://gitlab.com/cben/markdown-posters/ for a working pandoc example with some horizontal/vertical nesting. (As mentioned there you need the latest Pandoc due to recently fixed bug.)

One difference is that Pandoc works with explicit ::::: column containers, while the example on https://marpit.marp.app/usage?id=extend-marpit-by-plugins just sets a class that gets styled .columns { column-count: 2; }, resulting in automatic split of content into columns?
But I guess it's easy to do explicit ones in Marp too. FWIW, the CSS Pandoc used says:

      div.column{display: inline-block; vertical-align: top; width: 50%;}

(and nothing special for div.columns). Plus pandoc knows to translate ::: column width=0.3 into <div class="column" style="width:0.3;">.

[ricardo-reis-1970]

I agree with @yhatt that keeping this simple and compatible with standard Markdown sounds the sane way to go, as there are out there enough Markdown dialects already.

Having said this, it is true that LaTeX does have different interpretations for document parts for book, article or beamer presentation, but LaTeX is a full typesetting system, in a way placed on the extreme opposite from Markdown, whose ethos was always to bring down the complexity.

Here are my current solutions:

1. CSS column-count:

CSS

div.twocols {
  margin-top: 35px;
  column-count: 2;
}
div.twocols p:first-child,
div.twocols h1:first-child,
div.twocols h2:first-child,
div.twocols ul:first-child,
div.twocols ul li:first-child,
div.twocols ul li p:first-child {
  margin-top: 0 !important;
}
div.twocols p.break {
  break-before: column;
  margin-top: 0;
}

Usage

---

# Title
<div class="twocols">

## LHS Title
- item
- item
- item
- item

<p class="break"></p>

## RHS Title
- item
- item
- item
- item
</div>

Notes:

• if you don't use <p class="break"></p>, CSS will even the columns;
• you can easily generalise to any number of columns, but keep in mind that font size is generous.

2. CSS div positioning:

CSS

div.colwrap {
  background-color: inherit;
  color: inherit;
  width: 100%;
  height: 100%;
}
div.colwrap div h1:first-child, div.colwrap div h2:first-child {
  margin-top: 0px !important;
}
div.colwrap div.left, div.colwrap div.right {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 70px 35px 70px 70px;
}
div.colwrap div.left {
  right: 50%;
  left: 0;
}
div.colwrap div.right {
  left: 50%;
  right: 0;
}

Usage

---

<div class="colwrap">
<div class="left">

# LHS Title
- item
- item
- item
- item
</div>
<div class="right inverted">

# RHS Title
- item
- item
- item
- item

</div>
</div>

Notes:

• This layout takes the whole page, not leaving room for a global title. This was made like this by design, as what I wanted was to have the second half to bear a reverse colour effect. If all you need is a two columns layout, I could very easily adjust this second solution for that.
• With this solution, the content flow is all on you, as the two divs are totally separate.
• Although allowing for different formatting on each side, this solution is not as flexible as the previous one, regarding column count. In any case, high column counts are ill-advised in this kind of presentation.
• CSS alternatives could be devised through flex or grid.

Final notes

• The solution here presented might come across as a tad too HTML-y for a pure Markdown style. I tried to keep it simple and my slides still look essentially Markdown, and the final result is great.
• It is my belief that the MS PowerPoint layouts presented by @jingsam could all be implemented with this solution
• Pure Markdown solutions would always be partial, as at least some CSS would be required. Table-based layouts would look much boxy with borderlines.

I hope this helps.

[travisfranck]

What about including syntax like Deckset's [.column]? I found that really easy to use recently and it is very lightweight for inclusion in a markdown doc.

[walterrowe]

I use Atom to write markdown, and there is an atom-marp package for previewing marp slide decks. I feel the documentation for creating themes is still "not simple enough". Multi-column slide layout is very common practice. This needs to be provided with the built-in themes, and we need a few more choices for built-in themes.

[travisfranck]

I find myself agreeing with @walterrowe . I'm pretty technical and comfortable using md, reSt, LaTeX, etc. Of course, when I'm making slides, I just want to make slides; not deal with thinking about coding and HTML/CSS. The purpose of markdown is to allow a writer to focus more on content and less on formatting. Doing something like Deckset's [.column] syntax (or the other suggest of ***) adds just enough non-standard markdown to get the job done, but still allows the writer to stay focused on content more than formatting.

Marp is cool, but maybe Deckset or http://Slideas.app are better for me; acknowledging not every tool is meant for everyone. I love the idea of Marp, though.

[yhatt]

Our policy to achieve long-term maintainabillity of the ecosystem is "Keep following CommonMark and don't add too extra syntaxes". (A classic Marp app had burned out by lacking this) Marpit is a framework for JS developers and designers that have treating Markdown so we have to keep simple not only for Marp users but also for like them.

And Marp team requires the proof of a new syntax usefullness by community plugin, to merge as the built-in feature (https://github.com/marp-team/.github/blob/master/CONTRIBUTING.md#before-adding-new-feature)

Actually I'm wondering if why anyone does not try to make plugin, though the idea of extra syntax to split columns is supported by many users. An important difference from the other similar products like Deckset and Slideas is that Marp ecosystem is open-source and everyone can try to improve by extensible plugin architecture based on markdown-it.

We have more technical documentation in https://marpit-api.marp.app/ and I hope someone of community makes a plugin for that by referring docs and our implementations.

[yhatt]

For users that came from search engine: More simple way with modern CSS is available in marp-team/marp#192.