how to create full slide size stretched three columns #194

wakatana · 2021-10-23T22:12:35Z

wakatana
Oct 23, 2021

Hello. I'm using marp/marpit to create slides. My goal is to create slide with three vertical columns. I have one CSS file which I use on HTML page and also in marp. In web browser the HTML page it is widen to whole page. But in PDF viewer (file generated by marp) slide has some borders from left/right top/bottom.

Files that I'm using:

page.html

<!DOCTYPE html>
<html>

<!-- page.html -->

<head>
	<!-- <link rel="stylesheet" href="css.css"> -->
	<link rel="stylesheet" href="custom-theme.css">
</head>

<body>
	<div class="container">
		<!-- <div class="toppane">Test Page</div> -->
		<div class="leftpane">
			<h1>Left column</h1>
		</div>
		<div class="middlepane">
			<h1>Middle column</h1>
		</div>
		<div class="rightpane">
			<h1>Right column</h1>
		</div>
	</div>
</body>

</html>

custom-theme.css

/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
  }
  
  .container {
	width: 100%;
	height: 100%;
  }
  
  .leftpane {
	  width: 33%;
	  height: 100%;
	  float: left;
	  background-color: rosybrown;
	  border-collapse: collapse;
  }
  
  .middlepane {
	  width: 34%;
	  height: 100%;
	  float: left;
	  background-color: royalblue;
	  border-collapse: collapse;
  }
  
  .rightpane {
	width: 33%;
	height: 100%;
	position: relative;
	float: right;
	background-color: yellow;
	border-collapse: collapse;
  }
  
  /* .toppane {
	width: 100%;
	height: 100px;
	border-collapse: collapse;
	background-color: #4da6ff;
  } */

---
marp: true
theme: custom-theme

---

**slide.md**
<!-- slide.md -->

<div class="container">
	<!-- <div class="toppane">Test Page</div> -->
		<div class="leftpane">
			<h1>Left column</h1>
		</div>
		<div class="middlepane">
			<h1>Middle column</h1>
		</div>
		<div class="rightpane">
			<h1>Right column</h1>
		</div>
</div>

<!-- https://stackoverflow.com/questions/36662712/how-do-i-divide-a-page-in-three-vertical-sections/36662828 -->

Code that I'm using to generate PDF:

marp --html --bespoke.progress --allow-local-files --theme-set custom-theme.css --pdf -- slide.md -o slide.pdf

CSS used in HTML and displayed in browser

PDF file generated by marp

How can I stretch columns to full slide size in PDF?
PS: why font has different size & color?

Thanks

Answered by yhatt

Oct 24, 2021

Simply remove a line @import 'default';. This is Marp-specific definition for to inherit styles from Marp default theme. You have inherited a lot of unique styles by this line.

Hint

The root element for contents in common HTML is <html>, but the root element in Marp slides is <section> for each pages. All of CSS declarations in Marp will apply only in rendered Marp slides. So the styles for outer elements like <html> and <body> will be ignored in Marp rendering.

If you want to make CSS compatible with both of HTML page and Marp slides, it's important to apply styles to both root elements. :root pseudo-class will match to the correct root element in both cases (match to <html> in common HT…

View full answer

yhatt · 2021-10-24T15:54:31Z

yhatt
Oct 24, 2021
Maintainer

Simply remove a line @import 'default';. This is Marp-specific definition for to inherit styles from Marp default theme. You have inherited a lot of unique styles by this line.

Hint

The root element for contents in common HTML is <html>, but the root element in Marp slides is <section> for each pages. All of CSS declarations in Marp will apply only in rendered Marp slides. So the styles for outer elements like <html> and <body> will be ignored in Marp rendering.

If you want to make CSS compatible with both of HTML page and Marp slides, it's important to apply styles to both root elements. :root pseudo-class will match to the correct root element in both cases (match to <html> in common HTML, and <section> in Marp/Marpit).

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Marp

how to create full slide size stretched three columns #194

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Marp

how to create full slide size stretched three columns #194

wakatana Oct 23, 2021

Hint

Replies: 1 comment

yhatt Oct 24, 2021 Maintainer

Hint

wakatana
Oct 23, 2021

yhatt
Oct 24, 2021
Maintainer