Right to left WebHelp

Right to left WebHelp

This article shows you how you can modify your WebHelp output to create right to left help. For this I'm greatly indebted to Pertti Metsanheimo who did all the testing. I created a fix for right to left languages in a forum thread that he started. Here you will find a (slightly improved) summary of the solution.

This modification works for the following RoboHelp versions:

  • RoboHelp 7
  • RoboHelp 8
  • RoboHelp 9
  • RoboHelp 10 (line numbers differ from the ones in this article.)

Note:

  • Peter Grainge also has a wonderful description of this solution on his site. See Right to Left help on Peter' site.
  • Before creating the output, you need to translate your content. The translated must be placed in the project source, overriding the original files. (Work on a copy  of the original project!) You need to translate the following resources:

    • All topics.
    • .hhc and .hhk files.
    • .hhp file: The title in the file.
    • RoboHHRE.lng: Holds the language strings for default text in your output. Note, there may be multiple RoboHHRE.lng files in your project. Translate the one with the default language of the project.
    • .css: You may be required to change the font sizes and you may be required to switch left margins and paddings with right margins and paddings.

To create a left to right language help, there are several things you need to do:

You can also download the modified control files. Just paste these control files into your output after you modify your output files so they are right to left oriented. You do not need to do anything else.

Download modified control filesDownload modified control files for RoboHelp 7, 8, 9 & 10.

Modify your output files

Use a find and replace tool to replace all instances of <htmlwith <html dir="rtl". This sets the text direction from right to left. Note: This will not invert the typed text, so your topics have to be written in a right to left orientation, otherwise your text is simply right aligned.

Imporant! Do NOT find and replace the closing bracket of the HTML tag. If you do, you will incorrectly modify your topics and you will then need to generate your output again!

Modify whskin_frmset01.htm

Whskin_frm01.htm controls the size and position of the navigation pane and the topics. To put the navigation pane on the right, there are four things that need to be changed:

First, go to line 53 and replace 220,*with *,220. Note that the actual value (220) may differ when you use a skin. Now go to line 88 and replace 220,*with *,220. This will set the right pane (which will be the nav pane) to 220 pixels and let the left pane take the remaining space. On line 115, replace 0,*with *,0. This will set the correct values for when a user closes the navigation pane.

Last, you need to switch the navigation pane and the topic pane. If you open the WebHelp now, the navigation pane is still on the right and the topic is placed in a small bar 220 pixels. To correct this, go to line 53 and move the second frame in front of the first frame. The line will then be (Line breaks for readability):

strHTML += "<frameset cols=\"*,220\" hostof=\"parent:minibar_navpane|topic!startpage:no\" frameborder=\"1\" id=\"whPfset\">
  <frame src=\""+strDefaultTopic+"\" id=\"topic\" frameborder=\"1\" border=\"1\" scrolling=\"auto\" title=\"Topic\" name=\"bsscright\"></frame>
  <frame src=\"whskin_frmset010.htm\" id=\"minibar_navpane\" frameborder=\"0\" border=\"0\" scrolling=\"auto\" marginheight=\"0\" marginwidth=\"0\"></frame>
</frameset>";

Save the file.

Modify whthost.js

Now we have to modify the script for the TOC. Use a simple find and replace to replace all instances of margin-leftwith margin-right. Now save the file.

Modify whghost.js

Now we have to modify the script for the glossary. Use a simple find and replace to replace all instances of margin-leftwith margin-right. Now save the file.

Modify whihost.js

Start by using a simple find and replace to replace all instances of margin-leftwith margin-right. Then go to line 316 and replace offsetLeftwith offsetRight. Now save the file.

Modify whibody.htm

This file is a little more work. Do not use a find and replace to replace all instances of left with right. Elements are case sensitive and on line 200, layerPopup.style.lefthas to remain the same.

Start by going to line 73 and add direction: rtl;in the style tag. The line will now look like this:

var strMenu = '<TABLE STYLE="border:2px outset white; direction: rtl;" CELLSPACING=0';

Next, go to line 147 and replace stylePopup.leftwith stylePopup.right. Do the same on line 150.

Also on line 150, replace scrollLeftwith scrollRight. Do the same again on line 158. Last, also on line 158, replace offsetLeftwith offsetRight.

Now save the file and you're done. Paste the four modified files in any WebHelp output to put the navigation pane on the right. You need to replace <html>with <html dir="rtl">in all html files every time you generate your output.

Latest Tweets

Shopping Cart

View your shopping cart.

Recent Content

Copyright WvanWeelden Consultancy. - Terms and conditions - Privacy policy - Taxes apply to all prices. Subscribe to WvanWeelden.eu Blog Back to Top

Back to Top