Control appearance of output printed from HTML5 Target?

[Phlawm53]

For Flare 10, HTML5 Target, Target skin's Print this topic button.

How does one control the appearance of topics printed via an HTML5 Skin's Print this topic button?

I have a single-sourced project which produces good looking HTML5 AND good looking PDF outputs. To produce those good looking outputs one of my design "tricks" is to indent the left side of the Body or Page Layout, then outdent the headings.

The first two screenshots in this composite image show the proper appearance of the outdented headings in those outputs.

PrintedTopicIssueOutputComparisons.PNG

However, IF in the HTML5 Target I click the Print this topic button, THEN the headings tries to outdent but truncates the first characters.

SO, how do I control the appearance of the headings in the "Print this topic" output?

A secondary issue is getting rid of the empty first page. I suspect if I solve my "Print this topic" outdenting problem I'll also know how to solve this second problem as well(?)

Cheers & thanks for your help,
Riley
SFO

[Nita Beck]

Hi Riley,

This'll be pretty easy to solve.

It's my understanding that the purpose of the "print" medium originally came to be as the means to control how webpages would look when printed. Along comes Flare, which can produce both online and print formats, and one would naturally think that one should use the "print" medium for PDF output. After all, PDF is a print format. So one happily modifies the "print" medium to get the PDF looking just great, and then, woah, look what happens when a topic in an online output is printed!

My remedy is NOT to use the "print" medium for my PDFs but to use it exclusively for controlling how my online Help topics look when printed. For my PDF output, I'll create a custom medium called something like "PDF" or "printPDF", to distinguish it from the "print" medium.

For the "PDF" medium, I'll do everything I need to do to make my PDF output look grand. This might indeed include having heading styles use "outdents," that is, negative left margins. It might also include having certain heading levels always have a page break before.

For the "print" medium, I'll do whatever I need to do to tweak how my online output's topics will look when printed. For example, in the "default" medium, whereas I might have my h1s be white text on a maroon background, I'll define the h1 in the "print" medium as being black type on no background. A real-life example is a requirement for one of my current clients; they'd like topics, when printed from their HTML5 Help, to not use any colors at all. (Don't know why; but they write the checks so they get to decide.) So I'll "switch off" the colors of borders, backgrounds, headings, table headings, etc. in the "print" medium. And I definitely don't want there to be page breaks before headings styles, most likely.

So I think all you need do is to rename your "print" medium to something else and associate your PDF target to that renamed medium. Then add the "print" medium to the stylesheet and make whatever tweaks you need to so that your HTML5 topics will print from the browser as you'd like.

Make sense?

[Phlawm53]

Thanks Nita (hope all is well with you):

I'll try that.

Cheers & thanks 'gain,l
Riley
SFO

[Phlawm53]

------
Just to close the loop: I concocted a fix, or at least something that so far seems to be working, using a DIV.

I created a DIV class, div.bodyAlignment, that I then used to wrap everything formerly contained within a given topic's BODY tags.

For each stylesheet medium, I can now use the bodyAlignment class's margins and padding to position the entire main flow of content within the BODY element. This enables me to create the necessary room for outdented headings in online outputs, in topics printed via an HTML5 help system's toolbar button, and in mobile outputs using the Safari browser (the mobile outputs thing was another problem I was gonna' fix "someday" -- now I have…).

Having tested this approach on a topic or two, I did a two-pass global find/replace on the XHMTL in my project's topic files (Step 1 of course being to back up the project…): The first find/replace pass inserted the <div class="bodyAlignment"> tag after a topic's <body> tag, the second pass inserted the </div> tag before the </body> tag. So it was easy to update an entire project's XHTML topics.

Having put this in place, I now wonder why it took me so long to do this — it seems so obvious in retrospect…

Cheers & hope this helps,
Riley
SFO

[Leon Descoteaux]

A secondary issue is getting rid of the empty first page.

I'd also like to hear from anyone who can solve the empty first page when printing online help pages. And, Nita, a "print" and "printPDF" media work quite well, as we've recently found.