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
  }
  /* -=-=-=-=-=-=- */

}

@ScottKillen,

Thank you for sharing this. I'm new to css, and have spent more than five hours trying to get this to work before writing you. I'm probably ten characters away from nirvana (my experience with coding in a nutshell).

My issue is that your script isn't changing the font of the "body" text in the PDF export. The header font changes, but the body text doesn't. To troubleshoot this, I took out the @media print line so I would see the styling effects live in obsidian. I found that the body adjustments affected the menu and option fonts, but not the text within the note. A few hours later, I found that manipulating ".cm-content " altered the text within the body. But these changes weren't being applied to the exported PDF!

Is there something I'm missing here? Any help would be so appreciated.

Best,
MW

Hi, @mw9982!

The release notes for v1.2.1 say this is fixed, but it still does not honor my fonts.

I use the Print Preview Plugin to determine the correct CSS, but the generated pdf still contains the wrong fonts even though the preview window shows the correct font. I think #ObsidianMD still has some work to do on this.

I built this for Obsidian several releases back and don't do much exporting anymore, but I will take a look and see if I can get it to work.

Subscribe to this gist to be notified of changes.

Best,

Scott

@ScottKillen ,
Thanks for looking into this. Glad to know I'm not the only one hitting a wall. Will keep my eyes peeled to forthcoming Obsidian changelogs.

Thanks,
Max

@mw9982 @ScottKillen

Having a look on this https://github.com/NicklasVraa/Obsidian-academic-export/blob/main/academic-pdf-export.css, adding a p block will do, like the following.

  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--body-font-family);
    background: none;
  }

  p {
    font-family: var(--body-font-family);
    font-size: 12pt;
    text-align: justify;
  }

This segment of css works nicely.

Best,
CarrotDLaw

I should have realized the font settings for the body element aren't being inherited by other elements. Thanks for this solution!

After some experimenting, I found that no element inherits from body, and not every element is enclosed in a p element.

I have revised the snippet accordingly.

I use different font for editing and exporting and I observe that currently the font-family for headers is not working.

I try the following, and it seems to work well.

  :is(.markdown-rendered) h1,
  :is(.markdown-rendered) h2,
  :is(.markdown-rendered) h3,
  :is(.markdown-rendered) h4,
  :is(.markdown-rendered) h5,
  :is(.markdown-rendered) h6 {
    font-family: var(--header-font-family);
  }

Thanks!

Thank you!

…

On Fri, May 5, 2023 at 11:31 PM Scott Killen ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Thanks! — Reply to this email directly, view it on GitHub <https://gist.github.com/ScottKillen/499246e2f44fc1b59d8ff3795311f21f#gistcomment-4559633> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWWVC4KUS7QK53KRHX54QYDXEXAZXBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNBTGYYTCMRUU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

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