Skip navigation
Currently Being Moderated

Any way to put WebHelp navigation pane on the right?

Jul 8, 2009 2:33 AM

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?

 
Replies
  • Currently Being Moderated
    Jul 8, 2009 2:41 AM   in reply to perttime

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 22, 2009 6:38 AM   in reply to perttime

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 11, 2009 2:28 AM   in reply to perttime

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 11, 2009 5:17 AM   in reply to perttime

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 11, 2009 6:11 AM   in reply to perttime

    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 :-b

     

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 11, 2009 9:13 AM   in reply to Willam van Weelden

    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:"+gsMa rgin+";}\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);
    }

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 2:29 AM   in reply to perttime

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 6:53 AM   in reply to perttime

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 15, 2009 12:25 AM   in reply to perttime

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 16, 2009 6:36 AM   in reply to perttime

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2009 1:06 AM   in reply to perttime

    Hi,

     

    The whihost.js change was just a failsafe for if your html didn't have the text direction set.

     

    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.

    I agree. No matter how complicated the scrips become, they need to use a rather simple syntax to place elements on your screen. You need to know which functions are called in which files - That's what gives me a headache sometimes

     

    Hope you were able to fix it before the release!

     

    Greet,

     

    Willam

     

    PS: Don't force all users on Firefox, they can use Opera as well

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2009 3:56 AM   in reply to perttime

    Good idea about the Final Builder. Were now busy getting that running and I'll try to get them to implement RoboHelp too. Never thought about that, thanks!

     

    Greet,

     

    Willam

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2012 7:22 AM   in reply to perttime

    Good to see you back in town Pertti.

     


    See www.grainge.org for RoboHelp and Authoring tips

     

    @petergrainge

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 11:27 PM   in reply to Peter Grainge

    The RTL process is working for me (testing), EXCEPT my breadcrumbs still read left to right. Can you assist?

     

    RTL_breadcrumb_issue.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 11:58 PM   in reply to perttime

    Welcome back Pertti.

     

    The breadcrumbs are created by JavaScript and they do come from the TOC. They're placed on generation, based on the TOC. Since the skin is in English, the breadcrumbs are too.

     

    I will have to play around to look what is going on. Be sure to look at the article on Peter's site too: http://www.grainge.org/pages/authoring/right2left/right2left.htm According to the screenshots of Pertti's test project, the breadcrumbs are correct in his test project.

     

    Greet,

     

    Willam

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 12:14 AM   in reply to perttime

    Thank you both, Pertti and William.  I have only one translated file so far, but am trying to test the process, with that file and a few English files, while I await more translations.  I did add <html dir=RTL> to each of the Source htm files, and in the Output htm files, after generation.

     

    Should I also update the TOC (.hhc) file with <html dir=RTL> prior to generation ?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 1:10 AM   in reply to perttime

    Thanks for additional thoughts and questions:

     

    • Using RoboHelp 7.03.001
    • Followed instructions on Peter's site
    • I don't think source files reverted, but my WebHelp output folder contains many additional htm files, with "whxxx" filenames.  The first step in Peter's Post-Generation process says "Replace the <html> tag at the top of all output HTML files with <html dir=RTL> " 
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 9:36 AM   in reply to perttime

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 9:55 AM   in reply to BonnieM

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 10:08 AM   in reply to Willam van Weelden

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 11:28 AM   in reply to BonnieM

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

     

    Greet,

     

    Willam

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2013 11:59 AM   in reply to Willam van Weelden

    I also find that

     

    div

    {

    direction:rtl;

    }

     

    at the top of the CSS helps.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points