• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Using a print .css in RoboHelp

New Here ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

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!

Views

198

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

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. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 28, 2020 Aug 28, 2020

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 28, 2020 Aug 28, 2020

Copy link to clipboard

Copied

LATEST

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. 🙂

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp