PDF export stylesheet for obsidian

print.css

/* Obsidian snippet to style output of pdf exports
 */

@media print {

  /* set your preferred fonts here.
   */

  :root {
    --body-font-family: "Newsreader Text", TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    --header-font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    --code-font-family: MonoLisa, Menlo, SFMono-Regular, Consolas, "Roboto Mono", monospace;
  }

  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none;
  }

  /* If you find your font settings ae not being used for an element,
   * Add it below. You can fund the element by inspecting the document
   * in "Reading" mode in the console.
   */
  body, p, li, div.callout {
    line-height: 1.4;
    word-spacing: 1.1pt;
    letter-spacing: 0.2pt;
    font-family: var(--body-font-family);
    font-size: 12pt
  }

  /* */

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font-family);
    font-weight: normal !important
  }

  h1 {
    font-size: 19pt !important
  }

  h2 {
    font-size: 17pt !important
  }

  h3 {
    font-size: 15pt !important
  }

  h4, h5, h6 {
    font-size: 12pt !important
  }

  code, code[class*="language-"],
  pre, pre[class*="language-"] {
    font-size: 10pt;
    font-family: var(--code-font-family);
    color: black !important;
    background: none !important;
  }

  pre,
  code span,
  code {
    color: black !important
  }

  code {
    border: 1px solid darkgray !important;
    padding: 0 0.2em !important;
    line-height: initial !important;
    border-radius: 4px !important
  }

  pre {
    border: 1px solid darkgray !important;
    margin: 1em 0px !important;
    padding: 0.5em !important;
    border-radius: 4px !important
  }

  pre > code {
    font-size: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    border-radius: 4px !important
  }

  blockquote {
    margin: 1.3em;
    padding: 1em;
    font-size: 10pt;
    color: darkslategray !important
  }

  hr {
    background-color: #ccc
  }

  img {
    display:block;
    margin: 1em 0
  }

  a img {
    border: none
  }

  table {
    margin: 1px;
    text-align: left
  }

  th {
    border-bottom: 1px aolis #333
  }

  td {
    border-bottom: 1px solid #333
  }

  th,td, tr {
    padding: 4px 10px 4px 0;
    color: black !important;
    background: none !important
  }

  tfoot {
    font-style: italic
  }

  caption {
    background: #fff;
    margin-bottom: 2em;
    text-align: left
  }

  thead {
    display: table-header-group
  }

  tr {
    page-break-inside: avoid
  }

  a {
    text-decoration: none;
    color: black !important
  }


  a[aria-label]::after {
    display: inline !important;
    content: " (" attr(aria-label) ")" !important;
    color: slategray !important;
    font-size: 70% !important;
  }

  a[class="tag"] {
    font-weight: bold;
    font-family: var(--font-monospace);
    background: none
  }

  .callout {
    background: none;
    border-width: 1px;
    border-color: rgba(var(--callout-color), 0.75)
  }

  /* -=-=-=-=-=-=-
   * Specific to custom checkboxes in @kepano's minimal theme
   */
  li[data-task="/"]>input:checked::after,
  input[type=checkbox]:checked::after {
    background-color: black
  }

  input[type=checkbox]:checked {
    background: none
  }

  ul>li.task-list-item[data-task="x"] {
    color: black
  }

  li[data-task="!"]>input:checked::after,
  li[data-task="*"]>input:checked::after,
  li[data-task='"']>input:checked::after,
  li[data-task="l"]>input:checked::after,
  li[data-task="b"]>input:checked::after,
  li[data-task="i"]>input:checked::after,
  li[data-task="S"]>input:checked::after,
  li[data-task="I"]>input:checked::after,
  li[data-task="p"]>input:checked::after,
  li[data-task="c"]>input:checked::after,
  li[data-task="f"]>input:checked::after,
  li[data-task="k"]>input:checked::after,
  li[data-task="w"]>input:checked::after,
  li[data-task="u"]>input:checked::after,
  li[data-task="d"]>input:checked::after,
  li[data-task="?"]>input:checked::after {
    background: none !important;
    -webkit-mask-image: none !important
  }
  /* -=-=-=-=-=-=- */

}

Hey @ScottKillen,

I've been trying to figure out how to remove the spacing between the lines, but no matter what I change in the snippet, it doesn't seem to work. I am VERY unfamiliar with CSS, so I know I'm probably missing something simple.
Any clue what I can do for this?

Thanks for your time

@InvaderHawk

You might tinker with the line-height property for the body element. That sets the line height relative to the font size. Here, it is set to be 20% larger than the font.

@ScottKillen

Thanks for the quick response!
My bad for not being specific enough! I am trying to remove the lines between paragraphs. A different CSS snippet I found that works in longform (but I was unable to make it work for printing properly) uses margin-bottom but that did not work when added to that same section in this snippet.

@InvaderHawk
There is nothing in the snippet that adjusts the margins between paragraphs. I'm not sure what could be causing the issue, but Obsidian has gotten a lot better about the pdf export facility matching the screen medium. Is the undesired behavior present on screen, or is it particular to pdf export?

@ScottKillen
It is on screen too. If I remove the @media print { bit the rest of the formatting from the snippet still applies. I've tried making it a PDF after the changes too, just to make sure.

Here's how it appears in longform with the snippet I found for that (which does NOT print with it, leading to my finding your snippet).
Edit mode then Read mode:

Then here is with your print snippet (edit then read mode, and exported as a PDF just to be sure):

The font changes, the indent appears regardless of which mode I'm in, but that closing of the gap will not take effect. I have tried messing with the margin property in the body section above, but that also changes nothing.

@InvaderHawk

Try:

p {
  margin-bottom: 0;
  margin-top: 0;
}

By default, the p element has top and bottom margins of 1em.

@ScottKillen

Somehow, still nothing! I tried positive and negative values, and from as low as 5 up to 500 with no change. Everything is pointing to this should just work! I also tried removing everything but that specific section on both this snippet, and the longform one. The longform one did work, but this one didn't! Here is what that looks like, for reference.

.longform-leaf p {
  margin-bottom: -15px;
  line-height: 1.3em;
} 

The only difference being that tag(?) at the beginning.

@InvaderHawk

You've got me stumped. The fact that I don't have this issue makes me think it relates to your theme. Perhaps try different themes and see if it improves?

@ScottKillen

Well darn! I'm actually not using a theme right now, unless that's the problem? I downloaded and tried 'Things' and it still didn't work.
Very bizarre that it works for you when it doesn't on my end... Is it even working when exported as a PDF?

@InvaderHawk

I use the minimal theme. Maybe that is it? I know printing support is sketchy for a lot of platforms.

@ScottKillen

I've tried it with that theme too, but to no avail! Well, it's alright, I can work with it. Thank you so much for trying to help me figure it out!

@InvaderHawk 👍

how do you have Obsidian print 1" standard margins?

@yosun Something like this might work:

@page {
    margin: 0.5in; /* set margin on each page */
    size: 8.5in 11in; /* set page size */
  }

See Printing With Style: Using CSS for Printer Optimization

i ended up using this though it is perhaps a bit overkill simply to generate standard 1in" margins for print https://github.com/yosun/Obsidian-academic-export

You can use this snippet for margins:

/* Page structure. */
@page { 
 margin-top: 60px !important;
 margin-left: 60px !important;
 margin-right: 60px !important;
 margin-bottom: 60px !important;
}

You can use this snippet for margins:

Thanks, @Pri5m4