Right to left help

Submitted by Willam van Weelden on

Download: 

right_to_left.zip

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.

Note:

  • Peter Grainge also has a wonderful description of this solution on his site. See Right to Left help on Peter' site.
  • This fix was created for RoboHelp 7, but it also works for RoboHelp 8. I have not tested it in RoboHelp 9, but it should work. Note that when you use Dynamic User Centric Content, you need to apply the fix to every content type.

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

  • Modify your output files, so they are all right to left oriented.
  • Modify whskin_frmset01.htm
  • Modify whthost.js
  • Modify whihost.js
  • Modify whibody.htm

You can also download the modified control files. See the zip file above this article. When you use the downloaded files, you still need to modify your output files so they are right to left oriented.

Modify your output files

Use a find and replace tool to replace all instances of <html> with <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 written in a right to left orientation, otherwise your text is simply right aligned.

Modify whskin_frm01.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-left with margin-right. Now save the file.

Modify whihost.js

Start by using a simple find and replace to replace all instances of margin-left with margin-right. Then go to line 316 and replace offsetLeft with 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.left has 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.left with stylePopup.right. Do the same on line 150.

Also on line 150, replace scrollLeft with scrollRight. Do the same again on line 158. Last, also on line 158, replace offsetLeft with 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.

Tags: