CSS for 2 different outputs (online and PDF)

[larryk33930191]

I have one CSS file for Online (Studio Frameless) and PDF outputs in RH 2020.7.46, however, I would like the font size to be larger for Online (smaller for PDF).

Is there a way to assign a different CSS file to be used for each kind of output?  Or, is there a way to tweak the one CSS file so that a different font size is used for PDF vs Online?

[Amebr · Accepted solution]

There are a number of ways to do it.

One is to go in to your current stylesheet and edit the code to add a 'media' statement. For example, something like this:

@media print {
    body {
        font-size: 10pt;
    }
}

 Or you can include a second stylesheet that specifies only the differences from the main stylesheet. Then specify both stylesheets in a master page that you assign to the pdf output.

So for example you would have your normal css then add second css, say pdf.css. In the pdf.css you would specify the smaller font size. Then you would create a master page, assign the normal css to it then the pdf.css file second, so it takes precedence. The select that master page in the pdf output preset.

[johndaigle]

Ha! Amber sneaked in before me with a shorter, better response. If you want to dig deeper with more options, take a look at the following. 

Normally there is a "topic.css" for styling content in your Online topics. That same style sheet can be used for your PDF, or changed and substituted by using Master Pages and a new workflow for customizing PDFs.

This new workflow involves editing the "book.css" supplied with the Rh 2020 version, or your own custom .css. You then "attach" or associate the customized PDF .css with a Master Page and then specify which Master Page to use for different parts of your output (referred to as Front Matter and Back Matter.) 

Peter Grainge has some good best practice tips here:

https://www.grainge.org/pages/authoring/rh_tour/rh2020/outputs/outputs_pdf.htm 

In particular, scroll down to the "NOTE: Adobe RoboHelp ships with a Book master page that is linked to book.css. The styles in that css control the appearance of the TOC, the Index and the Glossary.
If you want to use master pages with your PDF output
- You can use the supplied master page and leave the topic css files to apply to the topics
- You can use your own master page and link both your own css and book.css to it.
With either of those options make sure your own css does not override what is in book.css.
You can also copy the book.css styles into your own css and apply just that to the master page."

Additional info can be found in the Online Help for PDF Output here:

https://helpx.adobe.com/robohelp/using/generate-pdf-output.html

[Amebr]

My English teachers always described my essays as 'Succinct' unfortunately they didn't mean it as a compiment. 😛