Skip to main content
LEH_0201
LEH_0201
Known Participant
August 20, 2020
Question

Using a print .css in RoboHelp

  • August 20, 2020
  • 3 replies
  • 349 views

I want to follow up on a question I posted a few weeks ago about printing to PDF out of Responsive HTML Help.

 

https://community.adobe.com/t5/robohelp/print-to-pdf-from-responsive-html5/m-p/11323372?page=1

 

During the conversation, it was suggested that using a print .css may be the way to go. We are kicking around the following idea: could we add a Print link to each topic or modify the behavior of the Print button on the toolbar so that a topic opens in a new window where a print .css is applied, and then you could use the standard Print dialog to print a hardcopy or save a local copy as PDF.

 

Is it possible to do this in RoboHelp? If so, how would we go about it? I'm hoping that someone might be able to point me in the right direction to give this a try.

 

I am about to upgrade to RoboHelp 2019 and will need to use the Classic version for a little while before making the transition to the New UI and eventually RH 2020. It's OK if the solution cannot be implemented in Classic; we can take the longer view here.

 

Thanks!

    This topic has been closed for replies.

    3 replies

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    August 28, 2020

    What you are seeing with the browser print button is the expected behaviour, print the whole page. 

     

    The print button only prints the actual topic. Unless you have defined a separate print css, it should show the same styles as the topic displays in the browser, just without the TOC etc.

     

    If you define a separate print css, RoboHelp will use that so that the printed output is different. Useful if you have an online css that specifies a background colour with white text. Depending on the browser settings, that might mean the background doesn't print and the white text might be a bit difficult to read on white paper. 🙂

     

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    August 22, 2020

    It's possible the "Print friendly" button could be a hangover from when multiple stylesheets or print stylesheets weren't supported, and that might have been the only way to apply a different one.

     

    I don't believe it's necessary.

     

    I use the @media print statements in mine to make sure the table of contents and header don't print - old habit to save ink. 🙂

    LEH_0201
    LEH_0201Author
    Known Participant
    August 28, 2020

    I was finally able to talk to our front-end developer about defining some print styles.

     

    We are noticing different behavior depending on whether you use the Print button on the help toolbar or the browser's Print function. If you use the toolbar's Print button, only the center panel of help content is printed---no TOC, header, footer, etc. If you use the browser's Print function, the result is a mess of overlapping panels with the TOC, header, footer, etc. interfering with the help content.

     

    So my developer is asking whether the Print button on the toolbar is already using a print stylesheet or print-only styles. Is that the case? If so, where are these styles defined? I can't find a .css file anywhere in my project that seems to be used for print. We have not yet included any @media print statements in the project stylesheet we use.

     

    For reference, our current set of help files was generated with RH 2017 using the Indigo layout with some customizations. I have just upgraded to RH 2019 and will be using RH Classic for another release or two.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    August 21, 2020

    This is essentially what the print button already does. If a print stylesheet is found, those styles override the online styles when the topic is printed.

     

    You can try this out, assuming you use Classic (and using Heading 1) by doing the following.

    1. Open your stylesheet in a text editor and add the following at the bottom of the file:

     

    @media print {
 h1 {
    color: pink;
    }
}

     

    3. Generate your output.

    4. Open in Chrome. Your Heading 1 will display as your regular style.

    5. Press Ctrl+P. The heading 1 will be pink in the preview (and when it prints to whatever destination you select). Note: If 'Black and white' is selected in the Colour field, you'll need to change it to 'Colour' to see it in the Preview.

     

    In RH2019 New UI you can specify multiple stylesheets, so theoretically you could define all you print styles in a separate stylesheet, however I haven't tried it as I'm not using that version yet.

     

    The Smashing Magazine article I linked in the other thread provides really good information so I recommend you read it thoroughly.

      LEH_0201
      LEH_0201Author
      Known Participant
      August 21, 2020

      Oh I read it; I just didn't understand all of it 🙂 Fortunately I have a good front-end developer I can call on to help with the .css once I know what it is I'm asking for.

       

      I was thinking we would need to do something similar to those web pages that have a "printer-friendly version" link. But I guess the purpose of that is to weed out ads, videos, etc. on the page.

       

      I will definitely try out your suggestion. Thank you so much!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices