Adding CSS styling to PDF output

[impostorsguides]

Hey there, sorry to follow up so soon after my last question. Hoping this'll be an easier one.

I've got the following HTML content:

<p>We can check for the most popular Ruby version managers by using the <code>which</code> command:</p>

<center style="margin-bottom: 3em">
  <img src="assets/images/2024-01-06-1037am.png" width="60%" style="padding: 0.5em">
</center>

<p>If you see anything other than "not found" for <code>which asdf</code>, <code>which rvm</code>, and <code>which chruby</code>, you likely have another version manager on your machine.  In that case, you'll need to make a decision about which version manager you want to use.  <a href="https://github.com/rbenv/rbenv/wiki/Comparison-of-version-managers" target='_blank' rel='noopener'>RBENV's Github page has a guide</a> on differentiating between the various version managers out there.</p>

I was expecting the image to be centered when I generated the output, but what I saw was this:

In contrast, this is what shows up in my browser:

I also tried changing style="margin-bottom: 3em" to style="margin: auto", but that had the same result.

Any tips on adding the stylings I want? I also need to change things like font-family, line-spacing, etc., but I assume the approach is the same for all CSS properties.

EDIT:

I added the css flag to the Converter:

converter.configure do
  from 'html'
  to 'pdf'
  output 'output.pdf'
  resource_path 'assets/images'
  filter "filter_remove_slashes_from_images.rb"
  css "pdf_styles.css"
end

My pdf_styles.css file looks like so:

p {
  line-height: 3em;
}

This is just to make sure the changes are having an effect.

However, it doesn't appear that the CSS file is being used, since the line heights appear the same before and after this change. As another data point, I also tried a change which would have been more obvious if it had worked:

p {
  font-family: "Comic Sans MS", "Comic Sans";
}

But this didn't work either. Am I doing something wrong?

[iandol]

What PDF engine have you configured? Pandoc would not be able to convert CSS into LaTeX if that is what you are using (the default PDF engine). If you use PrinceXML or another HTML engine then you should be able to see the CSS effects, though noting that paged CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_paged_media) needs specific additions for a robust layout (web pages have no concept of a page, whereas they are fundamental to a PDF etc.)

[impostorsguides]

@iandol thanks for this, installing wkhtmltopdf and using it as my PDF engine worked. I appreciate you!

[impostorsguides]

For future readers of this issue, FYI that wkhtmltopdf doesn't support CSS variables (at least for me). See this Github issue for more info.