Printing a topic from HTML Help

[MC Hammer]

Hello
I have a couple of questions re: the printing of individual topics from a CHM.
1. I am using a WebHelp toolbar in my HTML Help project and whenever I print a topic, there is a slight issue with the WebHelp toolbar. The topic gets printed fine but only the logo icon (on the right) and the separators (and captions, if any) get printed for the WebHelp toolbar. Icons do not get printed. Is there a way to hide or completely show the WebHelp toolbar in printouts? I cannot see how to do this as I have no control over the WebHelp toolbar (otherwise I would encapsulate it is a div for which I would specify display: none or hidden for print media).
2. I am using Javascript in some topics with large tables so that users can expand these tables by showing hidden columns which are not displayed by default. The table gets printed ok if in its default size. However if it is expanded, the last columns to the right go not get printed in the A4 page as the table is too large. Is there a means (apart from editing the printing preferences) to code the resizing of the table to the maximum page width for the printout?

Thanks in advance.
Marie-Claire

[LTinker68]

I don't have any suggestions for #1, but for #2, you can specify the width of the table for print output only. For instance, I have the width of the table tag set to 6 inches for print and no width specified for online output (so it'll size automatically). But you can't specify widths for your columns, or if you do then you have to set print-only widths for them, too, so that they don't add up to more than 6 inches, for example.

[MC Hammer]

Hi Lisa
This is a good idea that did not occur to me because of the way separate table stylesheets are implemented in Flare.
I use the media distinction to show or hide some content inside a topic.

I did not find a way to specify media in the table stylesheet when viewed inside Flare (unless I swap medium on the toolbar at the top of the topic the table is inside), so I presume you open the stylesheet using a text editor and type in the stuff to do with width specification for print...
Do you do this on the table stylesheet or in the main CSS and for which element tab (presumably mcTableStyle for table stylesheet and table for main CSS)? I currently have the tables autofit to window so will need to investigate a bit more on this.

Sorry but the way the table stylesheets are implemented in Flare throws me a bit (I find it difficult to get used to the proprietary "mc" styles and to the list of never-ending selectors and classes inside a table stylesheet ).

Update: I do not think I can use media as I am only generating on-line output and am looking into specifying a table width for when users print topics with large tables. From what I read from the Flare Help, you can only have one medium per target (which makes sense) so as I only produce on-line content, I will not be able to use the print medium. Am I right?

[i-tietz]

Is there a way to hide or completely show the WebHelp toolbar in printouts? I cannot see how to do this as I have no control over the WebHelp toolbar (otherwise I would encapsulate it is a div for which I would specify display: none or hidden for print media).

Encapsulate the toolbar in a div ? ... I tried to edit the file toolbar.htm and got an error message and the help wouldn't compile.
But I don't think you have to do that.
That is the code for the toolbar in a topic:

Code: Select all

<iframe id="mctoolbar" name="mctoolbar" title="Toolbar" src="../../../Skin/Toolbar.htm" frameborder="0" style="width: 100%; height: 28px;"></iframe>

So you might as well edit:

Code: Select all

@media print {
#mctoolbar { display: none; }
}

[MC Hammer]

Hi there,
Even if I can only select one medium per target (I have left it to default), I can set properties for print media using @media print, which what what was confusing me when I first posted about this.
i-tietz, thank you for your solution, it works perfectly well for the toolbar and I should have thought about it .
In a similar way, I have tried to implement Lisa's solution for my tables but to no avail (I ideally only want this for large tables -large_table style), not for any other tables...but the following code in the main CSS does not seem to work (right columns of large tables are still missing from printout and small tables are printed in their original size - specified in defaut medium).

Code: Select all

@media print {
	mcTableStyle { width: 17cm;}
}

[i-tietz]

Code: Select all

@media print {
	mcTableStyle { width: 17cm;}
}

Have you tried "100%" instead of "17cm"?

[LTinker68]

I don't use table styles in Flare -- they're too problematic if you have to merge cells. (I do all my table-related formatting in the main topic stylesheet.)

That said, you should still be able to set the width for the <table> tag in the main topic stylesheet. So long as you don't specify a table width in the table stylesheet, then it will pull the width for the table from the main topic stylesheet.

[MC Hammer]

Hi Lisa and i-tietz,
Thank you for your contributions.
Yes, I have tried 100% (instead of an absolute value such as 17cm) to no avail.
My tables have got specific widths in the default medium (either autofit to window or a percentage of the window size) but I thought that if I had something like below, it would work.
I need to have a closer look at the main CSS and the table CSS's...

Code: Select all

@media print {
   mcTableStyle or table { width: 100%;}
}

[LTinker68]

Code: Select all

@media print {
   mcTableStyle or table { width: 100%;}
}

I don't think that's valid CSS. I don't think you can use "or" in a style. It should be:

Code: Select all

@media print {
   mcTableStyle,
   table {
      width: 100%;
   }
}

[JasonSTI]

This may be the same issue we were having with printing some of our HTML topics. If the icon is set by stylesheet, it won't print if the "Print background colors and images" option is not selected in Internet Options. We had to document that as a troubleshooting step for our Help files.

Not sure if this is the same with the toolbar, but it sounds similar (text printing, but icons not).

[MC Hammer]

I don't think that's valid CSS. I don't think you can use "or" in a style. It should be:

Code: Select all

@media print {
   mcTableStyle,
   table {
      width: 100%;
   }
}

Hi Lisa
Sorry, I should not have put that in code style, of course, the "or" should not be there . I had it just like you wrote, and the tables still print in whatever size I have set in the default medium. I will investigate further and will post my findings if these are interesting.

Jason, thanks for your contribution. As far as I am concerned, I do not mind if the WebHelp toolbar does not get printed (I have removed it from printed output), but I shall have a look to see if the "Print background colors and images" option is selected or not in Internet Options and if it could explain why my icons did not print.

[i-tietz]

and the tables still print in whatever size I have set in the default medium. I will investigate further and will post my findings if these are interesting.

I the text editor: is the default section placed after the print section? That would overwrite those in the print section ...

[MC Hammer]

Hi i-tietz,
Thanks for your post.
Hmmm, haven't had much time to look at this but the print media stuff is placed at the end of my tablestyles' CSS and these are called after the main CSS so it should work. Maybe my expanded tables are simply too large to fit on one page...

[kmiller]

I don't use table styles in Flare -- they're too problematic if you have to merge cells. (I do all my table-related formatting in the main topic stylesheet.)

Lisa, could you please elaborate on your comment about not using table styles in Flare? I'm having trouble with alternating border colors appearing when I merge cells. I think it's because I have conflicting border settings, but I'm not sure how to get rid of them.
Thank you very much.

[LTinker68]

I think it's because I have conflicting border settings, but I'm not sure how to get rid of them.

You can't get rid of them -- that's the problem with table stylesheets. When you merge cells, you've gone from two sets of <td></td> to one set, or if you're merging vertically, then it's even more complicated, as there's now a <td colspan="2"> on one of the rows. When you use alternating rows or alternating columns, the stylesheet will use the colors associated with the first <tr> or first <td> of the merged cells, which means something will always be screwed up. If you use custom classes in the main topic stylesheet instead, then you have more control over the application of the styles, but you lose the ease of having the styles applied automatically when you add or remove rows or columns. I prefer the table look as it should as opposed to saving myself some time, so if I know I'm going to be merging cells, then I use classes I added to the topic stylesheet and manually apply the classes to alternating rows or columns, instead of using a table stylesheet. And you can get the classes in the topic stylesheet to render the same colors and other attributes that you specified in the table stylesheet, so from the end user standpoint, there's no difference between the tables, except one has some merged cells and one doesn't.

[i-tietz]

Just thought of another cause of you table problem: Do your table cells or colums have fixed widths? That is considered inline formating which ALWAYS overrules stylesheets.

[kmiller]

Thank you very much, Lisa! Now I have more questions. First of all, do I need custom classes in the main stylesheet when we don't use alternating rows or columns? The problem I'm having is that the border colors are not being consistent. I want all the borders to be the same green, and when I merge cells, some portions of the merged cell borders turn navy blue. I've found border settings in our TableStyle stylesheet and in the main topic stylesheet under Table Styles. How do I set the border attributes so that they're only in one place? If I do still need custom classes, how would I create them, and how would I make sure nothing in the table styles in either the main stylesheet or the TableStyle stylesheet would override them?

[LTinker68]

METHOD FOR THOSE NEW TO CSS:
First, open the properties screen for the table itself and make sure 1) it's not pointing to any table stylesheet, and 2) make sure all of the border fields are set to (not set). If you set border colors in the table properties screen, then you're setting styles inline on the table tag, which means those styles will override what you specify in whichever stylesheet (topic or table) you're using. That's what's probably happening in your case. You have blue (for example) for the borders in the table properties screen, which is the border for the whole table, then you have a green border color set on the td tag (either inline or in the stylesheet) and you're probably merging a cell on the perimeter of the table, so you see the green border of the cell jutting up against the blue border of the table. So don't set any border colors in the Table Properties screen.

One other thing you do want to do in the Table Properties is to set the borders to collapse.

I tend to put borders on the table cells (<td> and <th> tags) instead of outlining the whole table (<table> tag). To create classes, open the stylesheet in the Stylesheet Editor. If you have the editor set to Simplified view, then select Show Table Styles from the drop-down menu in the top left of the editor. Left-click on the base td tag to select it, then click the Add Class icon along the top of the editor. Give the class a name, like cellBrdrBlue. Your new class will be added to the stylesheet as td.cellBrdrBlue. Set whatever attributes for it you want. If you want a header row in the table, then repeat the process, but select the base th tag and add a class to it, and set its attributes. You'll probably want to set its border attributes the same as your new td class, but you can have different styles if you want. Save the stylesheet file (actually, after setting the styles in the td class, save the stylesheet, create and modify the th class, then save the stylesheet again -- the stylesheet display gets funky if you switch between tags and classes without saving first).

Now go back to the topic. I tend to keep the Styles pane docked to the right side of the screen to make selecting styles easier. In your table, if you have a header row, select all the styles in that header row then in the Styles pane click the th class you created previously. Then select all the content cells and select the td class. Merge your cells and you should be fine.

***See the next post for an alternative method***

[LTinker68]

ALTERNATIVE METHOD:
If you're new to CSS, the steps in the previous post are probably the easiest to follow and understand. However, there is a quicker method, but it's slightly complicated from a "how stylesheets work" standpoint, plus it requires you to manually modify the stylesheet file. It does result in sleeker code (you don't call a class in each cell in the table) and it's easier to implement in the long run.

The alternate method is to use complex selectors. A complex selector is kind of an implied if/then/else statement. Say your paragraph tags normally have a black font, but for whatever reason you want paragraphs inside of tables to have a blue font. You could create a custom paragraph class, set its font to blue, then apply that class to each paragraph in each cell of every table in your project. Or, you could create a complex selector, which in English would be described as "If a paragraph is inside a table cell, then make its font blue, else make its font black". In this situation, you're going to name the table (e.g., "blueBorderTable") then set up a complex selector that says "if a table cell is inside a table called blueBorderTable, then set the border color of the td tag to blue, else use the default value for the td tag".

To do this, first add a table class to the stylesheet, name the class blueBorderTable, but don't set any attributes for it -- you're just creating the class so you can select it in the next step. Next, add a table to a topic, set the number of columns and rows and number of header rows, click the Style Class button and select the table class you just created. Leave all other settings at their default values. Click Ok to insert the table in the topic and save the topic. The last step is to create the complex selector. Right-click on the stylesheet file in the Content Explorer and select Open with > Internal Text Editor. Scroll down to the very bottom of the file -- your table class will be the last thing listed. Modify the table class slight to collapse the borders, as shown below, then type the next block of code into the stylesheet file:

Code: Select all

table.blueCellTable
{
	border-collapse:collapse;
}

table.blueCellTable td
{
	border: solid 1px #0000FF;
}

Save the stylesheet file then go back to your topic. You'll see that there are no gaps in the borders (you collapsed the borders) and all the cells have a blue border. It might not be the shade of blue you want, and you might want to make more style changes to the cells, but now that you've added the complex selector to the stylesheet, it's easier to modify. To do that, go back to the Stylesheet Editor, set it to Advanced view, set it to Show All Styles, then expand the (Complex Selectors) category near the top of the list. The table.blueCellTable td complex selector is listed. Click on it to select it, then modify the style using the fields on the right. (I don't think you can view complex selectors in the Simplified view.) Note also that the stylesheet editor's display gets a bit funky with complex selectors, so I still tend to manually modify the stylesheet file so I can see what actual styles are being set for it.

[kmiller]

Thanks again, Lisa!