Skip to content

Instantly share code, notes, and snippets.

@ScottKillen
Last active April 2, 2024 17:12
Show Gist options
  • Star 42 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ScottKillen/499246e2f44fc1b59d8ff3795311f21f to your computer and use it in GitHub Desktop.
Save ScottKillen/499246e2f44fc1b59d8ff3795311f21f to your computer and use it in GitHub Desktop.
PDF export stylesheet for obsidian
/* 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
}
/* -=-=-=-=-=-=- */
}
@InvaderHawk
Copy link

@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.

@ScottKillen
Copy link
Author

@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?

@InvaderHawk
Copy link

@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?

@ScottKillen
Copy link
Author

@InvaderHawk

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

@InvaderHawk
Copy link

@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!

@ScottKillen
Copy link
Author

@yosun
Copy link

yosun commented Jan 12, 2024

how do you have Obsidian print 1" standard margins?

@ScottKillen
Copy link
Author

@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

@yosun
Copy link

yosun commented Jan 14, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment