38 Replies Latest reply: Jan 19, 2013 2:14 AM by perttime RSS

    Any way to put WebHelp navigation pane on the right?

    perttime

      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?

        • 1. Re: Any way to put WebHelp navigation pane on the right?
          Peter Grainge ACP/MVPs

          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

          • 2. Re: Any way to put WebHelp navigation pane on the right?
            perttime Community Member

            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.

            • 3. Re: Any way to put WebHelp navigation pane on the right?
              Willam van Weelden ACP/MVPs

              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.

              • 4. Re: Any way to put WebHelp navigation pane on the right?
                Willam van Weelden ACP/MVPs

                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

                • 5. Re: Any way to put WebHelp navigation pane on the right?
                  perttime Community Member

                  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.

                  • 6. Re: Any way to put WebHelp navigation pane on the right?
                    Willam van Weelden ACP/MVPs

                    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

                    • 7. Re: Any way to put WebHelp navigation pane on the right?
                      perttime Community Member

                      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.

                      • 8. Re: Any way to put WebHelp navigation pane on the right?
                        Willam van Weelden ACP/MVPs

                        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

                        • 9. Re: Any way to put WebHelp navigation pane on the right?
                          Willam van Weelden ACP/MVPs

                          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);
                          }

                          • 10. Re: Any way to put WebHelp navigation pane on the right?
                            perttime Community Member

                            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.

                            • 11. Re: Any way to put WebHelp navigation pane on the right?
                              Willam van Weelden ACP/MVPs

                              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

                              • 12. Re: Any way to put WebHelp navigation pane on the right?
                                perttime Community Member

                                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...

                                • 13. Re: Any way to put WebHelp navigation pane on the right?
                                  Willam van Weelden ACP/MVPs

                                  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

                                  • 14. Re: Any way to put WebHelp navigation pane on the right?
                                    perttime Community Member

                                    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.

                                    • 15. Re: Any way to put WebHelp navigation pane on the right?
                                      Peter Grainge ACP/MVPs

                                      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

                                      • 16. Re: Any way to put WebHelp navigation pane on the right?
                                        perttime Community Member

                                        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 )

                                        • 17. Re: Any way to put WebHelp navigation pane on the right?
                                          Willam van Weelden ACP/MVPs

                                          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!

                                          • 18. Re: Any way to put WebHelp navigation pane on the right?
                                            perttime Community Member

                                            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.

                                            • 19. Re: Any way to put WebHelp navigation pane on the right?
                                              Willam van Weelden ACP/MVPs

                                              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

                                              • 20. Re: Any way to put WebHelp navigation pane on the right?
                                                perttime Community Member

                                                It does not look too bad in Opera either...

                                                 

                                                Anyway, I could not have done this without you, Willam.

                                                 

                                                They are building a Release Candidate now. It is not our fault if it is not good enough, and they have to do it again

                                                 

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

                                                We have Final Builder 6 software for various tasks and my friendly release engineer made a project that helps RoboHelp Generate all our languages in one go:

                                                 

                                                Extract resources form version control

                                                Generate helps in the languages that have changes

                                                Make all the replacements that are needed to make RTL work too

                                                Put the finished helps where we need them

                                                Inform those who need to know

                                                • 21. Re: Any way to put WebHelp navigation pane on the right?
                                                  Willam van Weelden ACP/MVPs

                                                  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

                                                  • 22. Re: Any way to put WebHelp navigation pane on the right?
                                                    perttime Community Member

                                                    Hi,

                                                     

                                                    I've been away for some time...

                                                     

                                                    I noticed that Willam has an improved version of the WebHelp RTL process on his site:

                                                    http://www.wvanweelden.eu/robohelp/right_to_left_help

                                                     

                                                    His post-processing procedure should work in later versions of RH, too.

                                                    • 23. Re: Any way to put WebHelp navigation pane on the right?
                                                      Peter Grainge ACP/MVPs

                                                      Good to see you back in town Pertti.

                                                       


                                                      See www.grainge.org for RoboHelp and Authoring tips

                                                       

                                                      @petergrainge

                                                      • 24. Re: Any way to put WebHelp navigation pane on the right?
                                                        blormor

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

                                                         

                                                        RTL_breadcrumb_issue.jpg

                                                        • 25. Re: Any way to put WebHelp navigation pane on the right?
                                                          perttime Community Member

                                                          I don't have access to Robohelp and a suitable project for testing now, so I'm answering from vague memories:

                                                           

                                                          That was not a problem to me when I had <html dir=RTL>, instead of <html> at the beginning of each SOURCE HTML file.

                                                           

                                                          Your breadcrumbs are also in English. I think those texts came from the ToC, or the Title (not Heading) of the HTML files.

                                                          • 26. Re: Any way to put WebHelp navigation pane on the right?
                                                            Willam van Weelden ACP/MVPs

                                                            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

                                                            • 27. Re: Any way to put WebHelp navigation pane on the right?
                                                              perttime Community Member

                                                              By the time I started paying attention to things like breadcrumbs, I also had translated LNG files (they contain texts that appear on the “Help UI”).

                                                               

                                                              I didn't have different skins in the projects.

                                                              • 28. Re: Any way to put WebHelp navigation pane on the right?
                                                                blormor Community Member

                                                                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 ?

                                                                • 29. Re: Any way to put WebHelp navigation pane on the right?
                                                                  perttime Community Member

                                                                  I recall <html dir=RTL> was not needed in the .hhc or .hhk files. It may even cause problems. Trying it will not cause any harm.

                                                                  • 30. Re: Any way to put WebHelp navigation pane on the right?
                                                                    perttime Community Member

                                                                    A couple of questions occurred to me:

                                                                     

                                                                    - Which version of Robohelp are you using?

                                                                    - Which instructions were you following (Willam's, this thread, or the one's on Peter's site?

                                                                    - Do I understand correctly that <html dir=RTL> in source files reverted to <html> in the output when you generate the help?

                                                                    • 31. Re: Any way to put WebHelp navigation pane on the right?
                                                                      blormor Community Member

                                                                      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> " 
                                                                      • 32. Re: Any way to put WebHelp navigation pane on the right?
                                                                        perttime Community Member

                                                                        Sounds OK.

                                                                        The "whxxx" files are generated by RH, every time you Generate.

                                                                         

                                                                        I cannot give much more advice without playing with some files, which I cannot do now.

                                                                        One thing to try could be to replace the relevant texts in the .hhc file with some Arabic.

                                                                        • 33. Re: Any way to put WebHelp navigation pane on the right?
                                                                          BonnieM Community Member

                                                                          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.

                                                                          • 34. Re: Any way to put WebHelp navigation pane on the right?
                                                                            Willam van Weelden ACP/MVPs

                                                                            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

                                                                            • 35. Re: Any way to put WebHelp navigation pane on the right?
                                                                              BonnieM Community Member

                                                                              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.

                                                                              • 36. Re: Any way to put WebHelp navigation pane on the right?
                                                                                Willam van Weelden ACP/MVPs

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

                                                                                 

                                                                                Greet,

                                                                                 

                                                                                Willam

                                                                                • 37. Re: Any way to put WebHelp navigation pane on the right?
                                                                                  BonnieM Community Member

                                                                                  I also find that

                                                                                   

                                                                                  div

                                                                                  {

                                                                                  direction:rtl;

                                                                                  }

                                                                                   

                                                                                  at the top of the CSS helps.

                                                                                  • 38. Re: Any way to put WebHelp navigation pane on the right?
                                                                                    perttime Community Member

                                                                                    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.