Reusing the Styling for WebHelp and PDF Output

If you are using the pdf-css-html5 transformation type, then the generated HTML5 document that is later converted to PDF is very similar to the generated HTML5 pages from the WebHelp Responsive output.

This is an output example from the WebHelp transformation:

 <h1 class="title topictitle1" id="ariaid-title2">Care and Preparation</h1>
 <div class="body">
     <p class="shortdesc">When caring ...</p>
     <p class="p">When caring for your flower garden you want ... </p>

And the same example from the PDF transformation (note the additional emphasized class values):

 <h1 class="- topic/title title topictitle1" id="ariaid-title2">Care andPreparation</h1>
 <div class="- topic/body body">
    <p class="- topic/shortdesc shortdesc">When caring ... </p>
    <p class="- topic/p p">When caring for your flower garden you want ...  </p>

It makes sense to reuse the same CSS rules you developed for one transformation type to the other. The main rule is to use the short class names instead of the long ones. For example, to style the short descriptions with italic font, use:

.shortdesc {
  font-style: italic;
}

The rule of thumb is that if you have a CSS rule that successfully styles an element in WebHelp, it should apply without any modification in the PDF output.