• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Any way to put WebHelp navigation pane on the right?

Participant ,
Jul 08, 2009 Jul 08, 2009

Copy link to clipboard

Copied

I am producing localised WebHelps in about 30 languages, including Arabic and Hebrew, Generating the helps with RH7.

My workaround to get Right To Left orientation seems to produce "acceptable" results, except our testers suggest that the navigation pane for Arabic and Hebrew should be on the right too. I have not been able to figure out how to do it.

Any suggestions?

Views

10.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 14, 2009 Sep 14, 2009

Better get it perfect eh?

In whihost.js on line 317, change 'window._event.pageX = oMatch.offsetLeft ;' into 'window._event.pageX = oMatch.offsetRight ;'

In whibody.htm on line 162, Change ' nPosX = window.event.srcElement.offsetLeft + window.event.srcElement.offsetWidth - document.body.scrollLeft; ' to ' nPosX = window.event.srcElement.offsetRight + window.event.srcElement.offsetWidth - document.body.scrollRight; '

Greet,

Willam

Votes

Translate

Translate
Community Expert ,
Jul 08, 2009 Jul 08, 2009

Copy link to clipboard

Copied

I don't think that can be done other than perhaps by putting in some blank buttons to force the real ones to the right. I think that was covered a month or so back.

It might be worth asking on Techshoret on Yahoo Groups. It is an Israel based authoring forum and they know what is and is not possible with Hebrew.


See www.grainge.org for RoboHelp and Authoring tips

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 08, 2009 Jul 08, 2009

Copy link to clipboard

Copied

Thanks, I'll take a look at Techshoret.

I can move the buttons OK by including file 'whskin_tbars.htm' in the list of HTML files that must be changed to RTL in the post-processing. (Yes, post-processing is needed...)

It is the pane with the actual ToC, Index and Search that I have not been able to move.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 22, 2009 Jul 22, 2009

Copy link to clipboard

Copied

Hi,

Webhelp uses a lot of html files and scripts to position the menu. If you want to change the place of the menu, you'll have to change the output files. Don't ask which files however, but your best guess is with the first topic and whtdhtml.htm and work your way forward. The positioning function is probable hidden in a couple of files, so changing only one file might not work immediatly.

Succes, Willam.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 11, 2009 Sep 11, 2009

Copy link to clipboard

Copied

Hi,


I did a little digging and I found a solution. I did not test it thorougly in combination with context sensitive help, but I think it should work all the same.


To get the navigation pane, index pane, search pane and glossary pane to the right, you have to edit whskin_frmset01.htm.


In whskin_frmset01.htm, go to line 52. modify the line: Set the cols to *,220 instead of 220,*. Place the second frame before the first frame. The line will now be this:

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><frame src=\""+strDefaultTopic+"\" id=\"topic\" frameborder=\"1\" border=\"1\" scrolling=\"auto\" title=\"Topic\" name=\"bsscright\"></frame></frameset>";

Now go to line 87 and replace  220,* with *,220. This sets the initial width of the topic and the navigation pane.

Last, go to line 114 and replace 0,* with *,0. This sets how thw panes are shown when you close the navpane.

You're al set up with a right navpane. Save the file and copy it over every output where you need a right sided pane.

Everything seems to work, but please test this extensively. Let me know if it works or in which case you're having problems.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 11, 2009 Sep 11, 2009

Copy link to clipboard

Copied

Thanks, that seems to help.

I used your complete line 52, as I did not yet quite figure out what else needed changing except finding and replacing *,220 with 220,* and 0,* with *,0.

Now I can also set file whskin_tbars.htm as RTL, so that the buttons fall above the navigation pane.

Next question

How do I get ToC and Index to have indents RTL?

In regular LTR, I have nice indents for ToC and Index items but, RTL, everything is aligned all the way to the right.

This makes it hard to see what is book, sub-book, or topic.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 11, 2009 Sep 11, 2009

Copy link to clipboard

Copied

Hi,

I used your complete line 52, as I did not yet quite figure out what else needed changing except finding and replacing *,220 with 220,* and 0,* with *,0.

That's why I included it . You set the order of the frames to place the topic left. You set the second frame to be displayed first.

Next question

How do I get ToC and Index to have indents RTL?

For the TOC: open whtdhtml.htm and add the following code before the </head> tag:

<style>
* {direction:rtl;}
</style>

Add the same code in on the same place in whibody.htm for the index entries and in whiform for the index search box.

Note: this changes the alignment from right to left, but it removes the standard indent of the toc... This is governed by whthost.js, but I'll have to look into that further.  An easier way is to play around with css, but that will also require some investigation. I'll try to get back on this a little sooner than the last time

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 11, 2009 Sep 11, 2009

Copy link to clipboard

Copied

Adding

<style>
* {direction:rtl;}
</style>

does not seem to change anything compared with changing <html> to <html dir=rtl> in those files.

I already have the items on the right but getting them indented would be nice.

whthost.js seems to have a few lines mentioning "indent" but those scripts are way beyond my competence.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 11, 2009 Sep 11, 2009

Copy link to clipboard

Copied

Hi,

Indeed, it's the same, only using css instead of html Guess I wasn't paying enough attention to your previous post, I thought you wanted to know how to change the text to RTL... I'm as good a reader as my users 😛

I'll look into it, but it may take some time. I thought that Robo uses div elemens to build the toc, but I'll have to look into this.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 11, 2009 Sep 11, 2009

Copy link to clipboard

Copied

Hi again,

This actually was a quick one.

To set the indent correct, do the following:

(No line numbers, since I use a modified whthost.js, line numbers won't match)

1. Open whthost.js and search for var gsMargin.

2. Set the required indent for the value of gsMargin, this will effect all TOC elements

3. Search for the TocWriteClassStyle

4. Locate .parent and change margin-left in margin-right.

5. Locate .stub and change margin-left in margin-right.

6. Locate .child and change margin-left in margin-right.

7. Save your file and place it in every output requiring a right sided toc.

That's it, you should be ready to go. Just post if you need some more changes, I'm confident they'll be an easy fix.

Greet,

Willam

PS.: the modified function TocWriteClassStyle:

function TocWriteClassStyle()
{
    var sStyle="<STYLE TYPE='text/css'>\n";
    if(gsBgImage)
        sStyle+="body {border-top:"+gsBgColor+" 1px solid;}\n";
    else
        sStyle+="body {border-top:black 1px solid;}\n";
    sStyle+="P {"+getFontStyle(goFont)+"margin-top:"+gsMargin+";margin-bottom:"+gsMargin+";}\n";
    sStyle+="DIV {margin-top:"+gsMargin+";margin-bottom:"+gsMargin+";}\n";
    sStyle+=".parent {margin-right:0pt;}\n";
    sStyle+=".stub {margin-right:0pt;display:none}\n";
    sStyle+=".child {display:none;margin-right:"+gsIndent+";}\n";
    sStyle+="A:link {"+getFontStyle(goFont)+"}\n";
    sStyle+="A:visited {"+getFontStyle(goFont)+"}\n";
    sStyle+="A:active {background-color:"+gsABgColor+";}\n";
    sStyle +="A:hover {"+getFontStyle(goHFont)+"}\n";
    sStyle+="</STYLE>";
    document.write(sStyle);
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 14, 2009 Sep 14, 2009

Copy link to clipboard

Copied

Magic ... it works

Being lazy, I just opened whthost.js in Notepad and replaced all instances of "margin-left" with "margin right" .

Then I did the same thing in whihost.js, to get the indents right in the Index.

I don't have a Glossary in my helps but editing whghost.js might do the same thing there.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2009 Sep 14, 2009

Copy link to clipboard

Copied

Hi,

You're method probably works fine, I don't know why it shouldn't. Just remember that you still have to set the text direction for the html files. You can do this per file, but you can also try to set it globally by editing the javascript. Add the following code to the style functions:

  sStyle+="* {direction: rtl;}\n";

If you want to do it in het html files, you'll need to change the following files:

TOC: whtdhtml.htm

INDEX: whibody.htm and whiform.htm

GLOS: whgdef.htm and whgbody.htm

Search: whfform.htm and whfbody.htm

Greet,

Willam

Message was edited by: W. van Weelden: filenames added

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 14, 2009 Sep 14, 2009

Copy link to clipboard

Copied

I showed my Hebrew help to a tester in Israel and he still found one issue in the Index, when viewed on IE8:

Many of our index items have sub items.

Checked with IE8 and FF 3.0.14 (both English version).

However, the pop-up in Index pane, showing available topics, is aligned and indented to the left, and for that reason cut (see screens attached).

The error happens ONLY in IE (FF is fine).

Index_Selection_IE_Cut_Heb2.JPG

The same thing happens in the Arabic help on my English XP with English IE6.

This is getting pretty minor but it would be nice to be perfect...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2009 Sep 14, 2009

Copy link to clipboard

Copied

Better get it perfect eh?

In whihost.js on line 317, change 'window._event.pageX = oMatch.offsetLeft ;' into 'window._event.pageX = oMatch.offsetRight ;'

In whibody.htm on line 162, Change ' nPosX = window.event.srcElement.offsetLeft + window.event.srcElement.offsetWidth - document.body.scrollLeft; ' to ' nPosX = window.event.srcElement.offsetRight + window.event.srcElement.offsetWidth - document.body.scrollRight; '

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 14, 2009 Sep 14, 2009

Copy link to clipboard

Copied

Yes!

I wrote down this stuff, with all the shortcuts I seem to get away with. Not exactly as Willam explained but the result looks the same.

Below, my steps AFTER Generating the help in RH 7.02.

Peter asked for details on making a RTL WebHelp. I am sending him my complete list of steps for getting a help localised in RTL.

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

Post-Processing

  1. Replace the <html> tag at the top of all output HTML files with <html dir=RTL>
  2. 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>";

with

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.


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

whthost.js for ToC, whihost.js for Index, and whghost.js for Glossary

·         Change all instances of “left” to “right”, i.e. “margin-left” becomes “margin-right”.

whibody.htm, to align Index popups in Internet Explorer:

·         Replace section

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

with

nPosX = window.event.srcElement.offsetRight + window.event.srcElement.offsetWidth - document.body.scrollRight;

There seem to be cases where a missing characterset definition in a HTML file causes problems with displaying things. 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">

Note:

Changing those things in all the files manually would really be a pain. For doing it occasionally, a good Find and Replace tool may be fine. For doing it often, your friendly engineer can write a few lines of code that will do it automagically.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 15, 2009 Sep 15, 2009

Copy link to clipboard

Copied

Peter is off on holiday today!

Once I get back I will post all this on my site for ready reference for anyone else needing right to left language help.


See www.grainge.org for RoboHelp and Authoring tips

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 18, 2013 Jan 18, 2013

Copy link to clipboard

Copied

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

What are "all output HTML files"? Surely not all topic files!

Do you mean all "whxxx.htm" files? Because I can't find anything in my output files with an HTML extension.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 18, 2013 Jan 18, 2013

Copy link to clipboard

Copied

Yep. In your output, replace that tag in ALL html files (.html and .htm), both the topics and the skin files.

Both Peter and I have a summary of all the required steps:

- http://www.wvanweelden.eu/articles/right-left-webhelp

- http://www.grainge.org/pages/authoring/right2left/right2left.htm

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 18, 2013 Jan 18, 2013

Copy link to clipboard

Copied

In RH10, I can put dir=rtl in the HTML tag of the source files at the time of editing and the tag is not stripped out post-generation.

I've also found that <div class=rtl> just inside the body tags works, too.

The steps on your and Mr. Grainge's sites are very helpful, thanks!

Furthermore, if you open all the whxxx.htm files in Dreamweaver at the same time, you can do a search and replace (<html> to <html dir=rtl>) in a jiffy.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 18, 2013 Jan 18, 2013

Copy link to clipboard

Copied

True, but adding it in the source files may have unexpected results in the editor.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 18, 2013 Jan 18, 2013

Copy link to clipboard

Copied

I also find that

div

{

direction:rtl;

}

at the top of the CSS helps.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 19, 2013 Jan 19, 2013

Copy link to clipboard

Copied

LATEST

Anything that will do "Replace in Files" can do the <html> to <html dir=rtl> switch. Some HTML editors may make more changes than you really want, so I preferred to do such changes with a text editor like Notepad++, until an automated solution was created.

Unexpected results in Robohelp editor might or might not matter. I never edited RTL help topics in RH: it was for Generating only.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 16, 2009 Sep 16, 2009

Copy link to clipboard

Copied

I am sure I saw the index popup text perfectly aligned to the right in IE. Now I cannot.

I went through all the steps again and:

The popup is now well inside the help window, but the text is aligned on the left in IE.

Index_Selection_IE_Cut_ara.JPG

Firefox still shows the popup text perfectly aligned on the right too....

(we are not postponing release because of this but I though we got it absolutely perfect already )

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 16, 2009 Sep 16, 2009

Copy link to clipboard

Copied

Hi again,

This was a major pain, I think this happens because IE (including 8) doesn't correctly support the text-direction. To solve this, I made two small changes, of which the first is probably unnecessary, but still...

In whihost.js, in the function IndexWriteClassStyle(), I added the following: sStyle+="* {direction: rtl;}"; directly above the line sStyle+="</STYLE>";.

Next, in whibody.htm on line 73 is the following code:     var strMenu = '<TABLE STYLE="border:2px outset white;" CELLSPACING=0';. Replace it with:     var strMenu = '<TABLE STYLE="border:2px outset white; direction: rtl;" CELLSPACING=0';.

This works on my pc on IE6 and above.

Greet,

Willam

PS: Solve all IE bugs... Use Firefox!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 17, 2009 Sep 17, 2009

Copy link to clipboard

Copied

For me, just replacing the line in whibody.htm seems to do it.

from

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

to

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

Maybe because all my .htm files are already RTL?

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

All these changed strings make sense to me, when I see them. Looks like I don't have the education or experience to spot them in the scripts and fix them in a correct syntax. Yet anyway

Cannot really force all our users to use Firefox For the moment, we'll be pretty well covered when stuff works in IE and FF.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp