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?
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
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
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.
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.
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
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.
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
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.
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
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);
}
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.
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
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).
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...
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
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
· 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.
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
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.
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
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.
Copy link to clipboard
Copied
True, but adding it in the source files may have unexpected results in the editor.
Greet,
Willam
Copy link to clipboard
Copied
I also find that
div
{
direction:rtl;
}
at the top of the CSS helps.
Copy link to clipboard
Copied
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.
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.
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 )
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!
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.