Printing WebHelp topics when topic content is within a table

Report · Aug 31, 2009

This refers to RoboHelp HTML version 7 > WebHelp, but is probably valid for any situation where you want to print WebHelp topic content that is held within a table. This problem occurs with IE6, 7, 8 browsers.

I am creating a WebHelp project for a company whose customers use screen resolutions from 1024x768 upwards to very large, wide screen formats.

Using normal Help topic creation - enter text on a page - this means that it looks OK at 1024x768; but on large, wide-screen formats the text line is about 2 feet long, and therefore very hard to read, and looks dreadful. The image positioning also looks weird, because floating images that don't overlap on 1024x768 now try to overlap. Appearance about 1/10.

To overcome this, I put all topic content within a 750px-wide, left-justified table. This keeps all content looking consistent and great for resolutions from 1024 width upwards. So far, so good.

The next obstacle is printing topics in IE. If I use the WebHelp toolbar Print button option, the text runs off the right-hand edge of the page, because it defaults to print at 100% scaling. This means the user loses about one inch off the right-hand edge of the content. [ Note that Firefox scales it automatically to fit the page width. OK, I know some of you like Firefox; but whether we like it or not, 75% of the world's browsers are IE6/7/8.]

Ideally, I need an easy "Printable Page" option that removes the table but leaves the content untouched, so that the page content adjusts itself automatically to the page width when printing, and then looks good on paper.

Alternatively, some means of fixing the Print button script so that it adjusts the Print dialog > ... > ... > Scaling to 90%, in which case the topic fits within the print margins, again with good appearance.

It occurs to me that this must be a fairly common problem when printing table content from Internet Explorer.

Does anyone know of a solution?

Report · Aug 31, 2009

Hi there

Personally, I'd probably be using a DIV to accomplish the width control instead of a table. Perhaps you might try that?

As for printing, my suggestion would be to create a PDF document and provide a link to the PDF for printing. You might then be astonished and say something like For each page?

And the answer I'd provide is yes! If you want them to print and you are concerned about the look and feel, I'd take it to the page level in PDF.

Cheers... Rick

Helpful and Handy Links

RoboHelp Wish Form/Bug Reporting Form

Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!

Adobe Certified RoboHelp HTML Training

SorcerStone Blog

RoboHelp eBooks

Report · Aug 31, 2009

Hello again Rick, how are you?

DIV? I'm not an HTML man, so what is a DIV and how do I insert one? I'm eager to give it a try.

If it's easy to implement, I could change from tables to DIV; then create a duplicate topic and strip out the DIV tag, and use this as the printer-friendly version. Then provide a "Printer Friendly" link on the original DIV page that calls the non-DIV page. Then the text will automatically adjust to the paper margins. This is still not a clean solution.

PDF for every topic means quite a time overhead, making a clean PDF for every individual page. I don't think that's financially viable...

I wonder what happens if I limit the page width to 750px using CSS? Any ideas what happens when you print it?

------------------

I think look and feel is important for every Help Guide; and I get 'good press' from my customers for it. It certainly helps them to sell their products. So I wonder if anyone knows of a script that I can hook into the optional webhelp print button, to zoom the output down to 90%?

Cheers.

Philip

Report · Aug 31, 2009

Hi,

Using a DIV object is a far better way of aligning content. A div is nothing more than a container that you position withing a html page. Read some more here. I don't know how your aligning-table is build, but you can probably use a find and replace to make your table into a div object.

A faster and more reliable way of scaling your pages then using a script, is to create a printing style sheet. In this style sheet, you just give different styles. Using a import-statement (@import url("fineprint.css") print;) in your style sheet, you're sure that this style sheet is only used for printing.- You could start by trying to set the width of the table you use from 750px to 100%.

Note: You can also specify the print style sheet in every topic, but I find that RoboHelp gives problems whenever I try to assign two or more style sheets to a topic.

Greet,

Willam

Report · Sep 01, 2009

Hello William,

Thanks for your tips.

As for DIVs, I might need the next step down towards layman's English !

1. Can you give me an example of how to make a DIV container that's 750 px

wide please?

Hope you don't mind me asking.

Sincerely,

Philip Tory

Authorgraphic Ltd

Gloucester UK

Tel: 01452 - 500 639

Web: www.authorgraphic.co.uk

Report · Sep 01, 2009

Hi,

I don't mind asking, but it's probably simpler that you think.

1. First, you open the DIV by adding the tag <DIV> in html mode. Since we want to style this DIV, and because it is unique on ever page, we give it the id 'align'. Your tag looks like this: <DIV id="align">

2. Now we close the DIV. To close it, add the end tag </DIV>. Your code now looks like this: <DIV id="align">

</DIV>

3. Place all content in between the DIV start tag and DIV end tag. Normally, you add the start tag right after the body tag (<BODY><DIV id="align">) and you place the end tag right before the end body tag (</DIV></BODY>).

4. Now we style the tag, we set the width, the heidht, border, background colour, everything you want. Since this DIV is unique for every topic, I normally assign an id, in this case "align". Now open your style sheet in an external editor like Notepad and Notepad++ and add the following code: (Note that the text between /**/ is a comment, you can remove it.)

#align /*targets the element with the id 'align'*/

{

position: relative; /*Makes the element appear on the place where it is inserted in HTML. This is standard, add to make sure that a DIV style doesn't overwrite this.*/

width: 750px; /*Set the width of the element to 750px;*/

}

5. That's all. Just add your content in the block. RoboHelps WYSIWYG will show you a block, just click it and add your content.

Report · Sep 01, 2009

Hello William,

I tried this. The DIV tag works OK in Preview (Ctrl+W) mode, but not in

Design view, where it runs to 100%. This gives me problems with aligning

'floating' images etc.

I would try the CSS method, but I don't know how to specify a Table in

CSS...

In the HTML view, I have:

Do I just copy this into the CSS?

Philip

Report · Sep 01, 2009

Hi,

It's not a css method. CSS works with HTML to render your pages. DIV objects may be problematic for the WYSIWYG-editor, true. If you want to keep using your tables, select the table and go to html view, it probably looks something like this:

<body>

Now make it look like this:

<body>

Open your CSS and add the following line (just copy and paste) #align {width: 750px;}. Your table should work. If it doesn't, replace the former line with: #align {width: 750px !important;}. If it still doesn't work, please post back an example topic.

Greet,

Willam

Report · Sep 03, 2009

Hello Willam,

Thank you for offering to help.

I attach two topics; one has a single column, the other has two columns.

Originals are untouched:

Applications_and_Industries.htm

Welcome_to_the_SMS_Help_Guide.htm

I have modified:

Applications_and_Industries2.htm

Welcome_to_the_SMS_Help_Guide2.htm

I tried the import statement, but it just switches everything to 100% wide

on screen. I am trying to set the table to 750px wide on screen, but print

100%.

Philip

Report · Sep 03, 2009

Hi,

I don't see any files attached or queued. Can you try adding them again, of pm me for my e-mail so you can send the files directly to me.

Greet,

Willam

Report · Sep 02, 2009

Ignore what the DIV looks like in Design mode (Preview and output views are what count). RH also doesn't provide a true WYSIWYG version of its placeholders, either (breadcrumbs, minitoc, etc.), but a quick look at Preview mode tells you how you're doing.

Good luck,

Leon

Report · Sep 01, 2009

Hi,

As for your tables, I think tables are still an acceptable way of aligning content when you're not familiar with HTML. It's easy and intuitive. You can also give your table the id "align" instead of creating a div. When you don't use inline styling, the result should be the same for you.

Greet,

Willam

Report · Sep 03, 2009

I have searched for about 5 minutes, and cannot see where to send a personal message. How do I do this?

Report · Sep 03, 2009

Hi,

1. Login to the forum.

2. Click my name left of the post.

3. Right of my profile, click Send private message

Greet,

Willam

Report · Sep 08, 2009

WebHelp: Changes to make a 750px table print to 100% in IE7/8

This assumes you are using a Print button on the skin toolbar. Make the print script like this:

window.parent.frames[1].frames[1].focus(); window.parent.frames[1].frames[1].print();

The solution below will work for this print button, or for any other way of printing the topic; (not for the whole skin, just the topic).

Scenario:

When users have large wide-screen monitors (some may be 30 inches wide), each topic in WebHelp stretches across the screen width, making the appearance very poor, very hard to read, and floating images run into one another.

If you want a good appearance in WebHelp on big, wide screens, you can put the topic content into a left-justified table, 750px wide, with invisible borders. This looks much better, and is much easier to read.

The downside is that when you print a topic, using Internet Explorer as your browser, the table width exceeds the printable page width, and the text is truncated - you lose the right-hand inch of the text and images.

Here is a solution, and I am grateful to Willam van Weelden for his tremendous help.

To fix this problem, carry out the following procedure.

BACK UP YOUR SOURCE FILES FIRST!

These instructions apply for RoboHelp 7; (it may be similar in RH8, but I regeret you must test this for yourself).

1. Style sheets (A)

Using Notepad (or similar) edit the main style sheet for your project and add the following:

#align {
position:relative;
width:750px; }

and save the file.

2. Style sheets (B)

Create a new style sheet, and call it, say, fineprint.css ; make it contain only this line of text:

#align {width: 100% !important}

Save this new style sheet into the main project source-files folder in Windows Explorer.

3. Import fineprint.css into the Help Project as a baggage file, as follows:

Project Manager pod > Project Files folder > right-click > New > Baggage file > ... (select and add).

This makes the file build into the output folder when you build WebHelp.

4. Each page content table must be given an id = align as follows:

Remove the old table code in every topic (this example is for a 750px table):

<table x-use-null-cells style="x-cell-content-align: top; width: 750px; border-spacing: 0px; border-spacing: 0px;" cellspacing=0 width=750>

and replace with:

<table id="align"> [ Note - RH changes this to <table id=align x-use-null-cells> , which is OK ]

The table code is followed by <tr ...><td ...> - do not change these.

The tables will now pick up their 750px style from the project style sheet.

5. Modify the table in the project template also, so that new topics have the new table id.

6. After you build the output layout, you need to modify the htm files in the target build folder as follows:

- Use the Search and Replace tool.

MAKE SURE YOU POINT IT TO THE OUTPUT FOLDER!

- Search in all files for

</title>

and replace all occurrences with this line below:

</title><link rel="stylesheet" href="fineprint.css" type="text/css" media="print">

This makes the topic content appear in a table at 750px wide when viewed on screen, but when printing it will switch to the fineprint.css stylesheet and change the table to 100% wide - and hence print within the page margins.

Note: This will require that fineprint.css is available within the directory that holds the topic. If you use multiple directories, you must add fineprint.css as a baggage file to every directory.

7. Now build your help project into WebHelp, and test it by printing the Help topics in Internet Explorer and Firefox. It should view and print OK in both.

You now have a good looking Help Guide that you can (a) view and (b) print properly.

Again, my thanks to Willam van Weelden in Holland for his help with this.

Philip Tory, Authorgraphic www.authorgraphic.co.uk

Adobe Community

Printing WebHelp topics when topic content is within a table