Right to Left WebHelp



What's covered?

The Classic versions of RoboHelp did not support online help for right to left languages. That presented Nokia's Pertti Metsanheimo with a problem but with the assistance of Willam van Weelden, he was able to produce the procedure set out below using RoboHelp 7. It may not work in later versions.

Please note the method is for WebHelp only, not for compiled Microsoft HTML Help (CHM).

FrameMaker now supports right to left languages and can generate a RoboHelp output. That might be a better solution. RoboHelp 2019 has right to left skins that can work with content produced in external editors that support right to left editing.

09 Jul 2020 - The New UI version of RoboHelp has a left to right version of the Azure Blue skin.


Overview of the steps

  1. Create a RoboHelp project in a left to right language.
  2. Create a copy of the project for each language. It helps to include the name of the language in the root folder name.
  3. Translate as described in Get Your Files Translated.
  4. Copy the edited files back into the appropriate copy project using Windows Explorer.
  5. Generate the webhelp output.
  6. At this stage, the topics will be right to left but the navigation pane and buttons will be in their usual position. Changing that is described in Post Generation Processing.



Get your files translated

.htm files

Translate texts

Replace the <html> tag at the top of every resource HTML file with <html dir=RTL>

If pages contain tables, you may have to edit the table formatting, especially “border-right” and “border-left” definitions so that borders appear where they should.

.hhc and .hhk files

Translate just like in any other language

.hhp file

The Title in the .hhp file may be localised


This file contains texts that appear on the “Help UI”. Get the texts translated. There are two identical RoboHHRE.lng files in the project: one at the root level in the folder structure, one in the ‘!Language!\ [Language-identifier] folder. I put my translated file in the ‘en_UK’ folder because I did not manage to add language names to the Robohelp Project Settings.


You may need to edit the .css file that you are using for the help.

  • larger fonts may be needed if you use very small ones in the original

  • left and right alignment may need to be swapped in some styles, eg. margin-left: and margin-right:

Using Windows Explorer, copy these files into the copy project for the relevant language. The file names must not be changed in any way.

It makes sense to name the root folder of the localised project according to the language.

Generate the help

  1. Open the help project using the .xpj file.
  2. Check Project Settings (File > Project Settings):
  1. Generate help

Post Generation Processing

At this point your help will look like this. Whilst the topics are right to left aligned, the navigation pane and tool bar will be in their normal positions.

Update 18th August 2013. In RoboHelp 10 some of line numbers have changed but you should be able to locate them from the information below.


Replace the <html> tag at the top of all output HTML files with <html dir=RTL>

This corrects the toolbar position and the navigation pane is right to left aligned. However, the position and indentation are not right.

Edit file whskin_frmset01.htm to put the Navigation Pane on the right:

  • Replace the section

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


    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>";

  • Replace 220,* with *,220 and 0,* with *,0 in the rest of the file.

Now the navigation pane is right aligned but the indentation is still wrong.

Edit files to correct Table of Contents, Index and Glossary indentations

  • Edit whthost.js for the ToC
  • Edit whihost.js for the Index
  • Edit whghost.js for the Glossary

Change all instances of “margin-left” to “margin-right”

Now the indentation is correct.

Edit whibody.htm to get the Index popups to align right in IE

  1. Replace the following section (Line 158)

    nPosX = window.event.srcElement.offsetLeft + window.event.srcElement.offsetWidth - document.body.scrollLeft;


    nPosX = window.event.srcElement.offsetRight + window.event.srcElement.offsetWidth - document.body.scrollRight;
  2. Replace the following (Line 150)
    stylePopup.left = nEventX + document.body.scrollLeft + 20;

    stylePopup.left = nEventX + document.body.scrollRight + 20;
  3. Replace section

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


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

A missing characterset definition in a HTML file can cause display problems.

It may be safest to add it to the <head> section in files where it is missing:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Future changes

Adding and Removing Topics

There are two ways in which you can add and remove topics from the project for any language.

Using RoboHelp

  1. Open the project using the XPJ file.
  2. Delete any topics that are no longer required in the usual way.
  3. Create new topics with the required filename and topic title. See below for information about creating the content.

Using the HHP file

You can make the necessary changes to the HHP file and then use RoboHelp to browse to that file to open the project. You will be prompted to use the existing XPJ file, click No.

New Content

  1. Take a copy of the file to be edited and amend / create the required content.
  2. Using Windows Explorer, copy the updated file back into the project.


© Copyright 2009 Pertti Metsanheimo and Peter Grainge


If you find the information and tutorials on my site save you time figuring it out for yourself and help improve what you produce, please consider making a small donation.

Topic Revisions


Changes to this page

09 Jul 2020

Update added re Left to Right version of Azure Blue skin.

17 Jun 2019

Amended to cover applicable RoboHelp versions.

20 Feb 2017

Topic reviewed. Notes added re use with newer versions of RoboHelp and suggesting use of FrameMaker. Any screenshots may differ in your version of RoboHelp but the functionality is the same.

19 Aug 2013

Note added re change of line numbers and availability of ready modified files from www.wvanweelden.eu

04 Apr 2012

Old Step 2 is now Step 3. New Step 2 added.

22 Nov 2009

New topic.