Simple CSS Snippet for pdf export

[sqirrel]

Hi all,

I am trying to get into the CSS business, though have never worked with CSS before. So let me already excuse for this basic question as well as my inability to find an answer in existing posts.

What I’m trying to do

I want a CSS-snippet for export to pdf with only basic functionality. This is

• It should fix a specific font
• It should set the font size
• It should set margins and line spacings

Things I have tried

I have a snippet that does the first point (source):

@media print {
  body {
    /* set your preferred fonts here. */
    --font-text: 'Karla' !important;
  }  
}

Interestingly, the -- in front of the font-text seems crucial, although from my basic understanding I don’t know why.

I tried adding

  --font-size: 11.5px;
  --text-indent: 2em;
  --line-height: 2;

below the --font-text, though without success.

So, what are the crucial CSS basics I am missing (except everything )?

Lots of thanks in advance!

[ariehen]

Something like this should work. You might be able to get by without the !importants, but to be safe I put them in there. Tested with the default and Minimal themes.

 @media print {
  body {
    --font-text: 'SFMono-Regular' !important;
    --font-text-size: 11.5px !important;
  }
  * {
    line-height: 2;
    text-indent: 2em;
  }
}

[sqirrel]

Thanks! So the first part does work, i.e. the

--font-text-size: 11.5px !important;

However, if I add the

* {
    line-height: 2em;
    text-indent: 2em;
}

then the mathjax output will be completely scrambled. May I ask what the * operation does?

[ariehen]

Ha! I guess I should have asked what the content was from the beginning.

The * is a wildcard: What does an asterisk (*) do in a CSS selector? - Stack Overflow. I don’t use mathjax so didn’t think about it. Try with a p instead. p for paragraph. If the mathjax is on it’s own separated by blank lines it should be ok.

@media print {
  body {
    --font-text: 'SFMono-Regular' !important;
    --font-text-size: 11.5px !important;
  }
  p {
    line-height: 2;
    text-indent: 2em;
  }
}

There’s also a variable, --line-height: n; that will work in the body section, but seems to only in the Minimal theme and not in the default theme (which is odd). Didn’t have time to figure out why so put it in the second section. Fingers crossed…

[sqirrel]

@ariehen

p {
    line-height: 2;
    text-indent: 2em;
  }

Great! This works