Hi all,
I did ask this question back in January 2008 but just wondering if Version 4 has brought us any support for right-to-left languages in WebHelp? If not I'll add some steps for bodging it when I have worked out exactly how to do it myself. Lots of <div dir="rtl"> </div> tags everywhere I believe.
Cheers,
Simon
Support for Right-to-Left Languages e.g. Arabic
-
Richard Ferrell
- Propellus Maximus
- Posts: 840
- Joined: Mon May 01, 2006 10:11 am
- Location: Inside California
Re: Support for Right-to-Left Languages e.g. Arabic
Flare v4 Does not currently support Arabic,
Richard Ferrell
Certified Madcap Trainer

Certified Madcap Trainer
Re: Support for Right-to-Left Languages e.g. Arabic
Hi all,
As promised, here is a rough guide to getting WebHelp Skins to appear right-to-left. The advice is relatively specific for my project but hopefully you will be able to convert it for your own. Also I have tried this in 2.5 and 3 but not in Version 4 which I haven't yet upgraded to.
Before Compiling
1. Master Page - If you haven't got a master page already then create a blank one and apply it to all your pages. Then open it in the internal text editor and wrap the <MadCap:bodyProxy /> tag in a div tag as follows:
<div dir="rtl">
<MadCap:bodyProxy />
</div>
2. Open your skin in the Skin Editor:
a. Basic - Tick Content and Search (I got rid of my index and favorites they are a little more tricky to sort out).
b. WebHelp Setip - Set Pane Position to Right and remember to translate your About Box image.
c. WebHelp Toolbar - Reverse the order of your toolbar buttons if appropriate.
d. Styles - Obviously you will need to translate a lot of the terms here but something you shouldn't forget is to put a localised logo in ToolbarItem > Logo.
Now compile your project.
After Compiling
1. Swapping the Toolbar Buttons and the Company Logo - Open <YOUR_OUTPUT_FOLDER>\Skin\Toolbar.htm and change:
<tr>
<td id="AccordionTitle"> </td>
to:
<tr dir=â€rtlâ€>
<td id="AccordionTitle"> </td>
2. Contents - Open FullVersion_WebHelp\Skin\Toc.htm and change:
<div id="CatapultToc" style="white-space: nowrap;">
to:
<div dir="rtl" id="CatapultToc" >
Removing "nowrap" is not ideal but the alternative is worse, the icons overlap the text when you reduce the width of the contents panel.
3. Accordians - Open FullVersion_WebHelp\Skin\Navigation.htm and change:
<div class="AccordionItem" id="tocAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr>
to:
<div class="AccordionItem" id="tocAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr dir=â€rtlâ€>
And change:
<div class="AccordionItem" id="searchAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr>
to:
<div class="AccordionItem" id="searchAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr dir=â€rtlâ€>
4. Search - Open FullVersion_WebHelp\Skin\Search.htm and change:
<table id="SearchFormTable">
<tr>
<td style="padding-right: 10px;">
to:
<table dir=â€rtl†id="SearchFormTable">
<tr>
<td style="padding-left: 10px; padding-right: 10px ">
Hope that is of some help to someone.
Simon
As promised, here is a rough guide to getting WebHelp Skins to appear right-to-left. The advice is relatively specific for my project but hopefully you will be able to convert it for your own. Also I have tried this in 2.5 and 3 but not in Version 4 which I haven't yet upgraded to.
Before Compiling
1. Master Page - If you haven't got a master page already then create a blank one and apply it to all your pages. Then open it in the internal text editor and wrap the <MadCap:bodyProxy /> tag in a div tag as follows:
<div dir="rtl">
<MadCap:bodyProxy />
</div>
2. Open your skin in the Skin Editor:
a. Basic - Tick Content and Search (I got rid of my index and favorites they are a little more tricky to sort out).
b. WebHelp Setip - Set Pane Position to Right and remember to translate your About Box image.
c. WebHelp Toolbar - Reverse the order of your toolbar buttons if appropriate.
d. Styles - Obviously you will need to translate a lot of the terms here but something you shouldn't forget is to put a localised logo in ToolbarItem > Logo.
Now compile your project.
After Compiling
1. Swapping the Toolbar Buttons and the Company Logo - Open <YOUR_OUTPUT_FOLDER>\Skin\Toolbar.htm and change:
<tr>
<td id="AccordionTitle"> </td>
to:
<tr dir=â€rtlâ€>
<td id="AccordionTitle"> </td>
2. Contents - Open FullVersion_WebHelp\Skin\Toc.htm and change:
<div id="CatapultToc" style="white-space: nowrap;">
to:
<div dir="rtl" id="CatapultToc" >
Removing "nowrap" is not ideal but the alternative is worse, the icons overlap the text when you reduce the width of the contents panel.
3. Accordians - Open FullVersion_WebHelp\Skin\Navigation.htm and change:
<div class="AccordionItem" id="tocAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr>
to:
<div class="AccordionItem" id="tocAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr dir=â€rtlâ€>
And change:
<div class="AccordionItem" id="searchAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr>
to:
<div class="AccordionItem" id="searchAccordion" style="display: none;" onclick="AccordionItemClick( this );">
<table cellspacing="0">
<tr dir=â€rtlâ€>
4. Search - Open FullVersion_WebHelp\Skin\Search.htm and change:
<table id="SearchFormTable">
<tr>
<td style="padding-right: 10px;">
to:
<table dir=â€rtl†id="SearchFormTable">
<tr>
<td style="padding-left: 10px; padding-right: 10px ">
Hope that is of some help to someone.
Simon
-
emadgharaibeh
- Jr. Propeller Head
- Posts: 2
- Joined: Mon Nov 29, 2010 3:00 am
- Location: Jordan
Re: Support for Right-to-Left Languages e.g. Arabic
Thanks for posting this dear, but i am wondering, do i have toi change the output files every time i generate a new version?
Re: Support for Right-to-Left Languages e.g. Arabic
Yes. It would be a lot nicer if Flare just built-in support.