Column layout for PDF export via CSS

Share & showcase
, ,
1

I wasn’t able to find an existing solution to how to get column output when exporting to PDF so I came up with my own custom CSS style. If you always want column output for every PDF you can use this global styling.

Screenshot Examples

Example markdown

Screen Shot 2023-07-17 at 9.59.01 AM-500
Screen Shot 2023-07-17 at 9.59.01 AM-500500×723 35 KB

Example PDF export in columns

Screen Shot 2023-07-17 at 9.58.45 AM-500
Screen Shot 2023-07-17 at 9.58.45 AM-500500×648 43.5 KB

Column styling

CSS snippet

/* Adjust printing style only to have column output */
@media print {

    /* Document title to go across entire page */
    h1:first-of-type {
        column-span: all;
        text-align: center;
    }

    /* Content broken up in columns */
    .markdown-preview-view {
        column-count: 2;
        column-rule: 1px solid #EEE;
        column-gap: 2em;
    }
}

If you want to selectively apply column output to PDF then you can do this by adding the cssclass property to your YAML frontmatter to only apply the column formatting to documents that have been tagged accordingly.

Document fontmatter example:

---
cssclass: "columns"
---

CSS snippet

/* Adjust printing style only to have column output 
   when the document is tagged with the fontmatter
   cssclass of 'columns'*/
@media print {

    /* Document title to go across entire page */
    .columns h1:first-of-type {
        column-span: all;
        text-align: center;
    }

    /* Content broken up in columns */
    .columns .markdown-preview-view {
        column-count: 2;
        column-rule: 1px solid #EEE;
        column-gap: 2em;
    }

}
8 Likes
3

Hey I was wondering if there was a way I could modify this to manually choose certain images / tables to span across the two columns?

4

As a quick note: the .columns css class will be applied on the same element that has the .markdown-preview-view class. For this reason, the selector should have no space, aka it should be

.columns.markdown-preview-view {
        column-count: 2;
        column-rule: 1px solid #EEE;
        column-gap: 2em;
}

Also I believe now the property used is cssclasses rather than cssclass
Just a quick update in case anyone (like me) is using this now :slight_smile:

5

Thank you for the great css.

    /* Document title to go across entire page */
    .columns h1:first-of-type {
        column-span: all;
        text-align: center;
    }

For me, the above code doesn’t work. The title is also broken up in two columns.