Looking to learn Adobe RoboHelp or other Adobe Software? I've got you covered. Find out more and start learning: Training Options
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.)
- 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:
- Modify your output files, so they are all right to left oriented.
- Modify whskin_frmset01.htm
- Modify whthost.js
- Modify whghost.js
- Modify whihost.js
- Modify whibody.htm
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 files for RoboHelp 7, 8, 9 & 10.|
Modify your output files
Use a find and replace tool to replace all instances of
<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!
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. Note that the actual value (220) may differ when you use a skin. Now go to line 88 and replace
*,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. 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.
Now we have to modify the script for the TOC. Use a simple find and replace to replace all instances of
margin-right. Now save the file.
Now we have to modify the script for the glossary. Use a simple find and replace to replace all instances of
margin-right. Now save the file.
Start by using a simple find and replace to replace all instances of
margin-right. Then go to line 316 and replace
offsetRight. Now save the file.
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.right. Do the same on line 150.
Also on line 150, replace
scrollRight. Do the same again on line 158. Last, also on line 158, replace
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 dir="rtl">in all html files every time you generate your output.