Support for Right-to-Left Languages e.g. Arabic

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Simon
Jr. Propeller Head
Posts: 6
Joined: Thu Sep 21, 2006 11:16 am

Support for Right-to-Left Languages e.g. Arabic

Post by Simon »

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

Post by Richard Ferrell »

Flare v4 Does not currently support Arabic,
Richard Ferrell

Certified Madcap Trainer
Image
Simon
Jr. Propeller Head
Posts: 6
Joined: Thu Sep 21, 2006 11:16 am

Re: Support for Right-to-Left Languages e.g. Arabic

Post by Simon »

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

Post by emadgharaibeh »

Thanks for posting this dear, but i am wondering, do i have toi change the output files every time i generate a new version?
Simon
Jr. Propeller Head
Posts: 6
Joined: Thu Sep 21, 2006 11:16 am

Re: Support for Right-to-Left Languages e.g. Arabic

Post by Simon »

Yes. It would be a lot nicer if Flare just built-in support.
Post Reply