Wordpress pluging (2.6) displays wrong on right-to-left layout

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Install reCAPTCHA for WP 2.6 on a right-to-left (Hebrew/Arabic/Urdu
etc.) blog, activate it, etc.
2. Try to add a comment
3. See the interface is garbled

This is a critical issue for RTL users because the plugin is unusable that way.

My solution:
Adding this line:
document.getElementById('recaptcha_widget_div').style.direction = 'ltr';
after line 54 of recaptcha.php.

A more generic solution would be to make that DIV, that is
script-generated, LTR by default. If I understand correctly, that would fix
all reCAPTCHA installations on all systems, since this script is generated
by api.recaptcha.net and not locally.

Attached is my modified code, but as I said, a generic solution is possible
(And recommended, IMHO).

I will attach screen captures if necessary.

Keep up the good work. :)

Original issue reported on code.google.com by plast...@gmail.com on 19 Nov 2007 at 4:01

Attachments:

• recaptcha.php

[GoogleCodeExporter]

Argh! Typo in the title, and it's uneditable. Oh, the shame. :)

Original comment by plast...@gmail.com on 19 Nov 2007 at 4:03

[GoogleCodeExporter]

Update: I found that it's better to apply the ltr direction to recaptcha_table
instead of recaptcha_widget_div, that way, it doesn't affect the whole box's
alignment (left or right).

Attached is the updated PHP file. You can see it in action in my blog:
http://eesh.net/blog/?p=204 (Just a random post).

Original comment by plast...@gmail.com on 24 Nov 2007 at 12:27

Attachments:

• recaptcha.php

[GoogleCodeExporter]

Still relevant to version 2.7.

Original comment by plast...@gmail.com on 2 Jan 2008 at 12:10

[GoogleCodeExporter]

Hi,

Could you please post a sample HTML page where applying the tag on the div vs.
applying it on the table makes a difference? I'm going to look into applying 
this fix
to the reCAPTCHA javascript, but I need to understand exactly what will work 
best.

Original comment by ben.maurer on 2 Jan 2008 at 4:23

[GoogleCodeExporter]

Here are two static pages I made from my blog. You will see that in the first 
one,
the div is set to LTR, and the whole box is moved to the left instead of being
right-aligned like the rest of the interface. In the second page, the table is 
set to
LTR, so the left/right alignment is inherited from the page and the box is 
aligned to
the right.

http://eesh.net/blog/rc_div.html
http://eesh.net/blog/rc_table.html

IMO, the alignment should be inherited from the page, because that's what the 
user
expects, so LTRing the table is better.

Of course, if you ever plan to add localizations for RTL languages (I would 
gladly
help with Hebrew), this needs to be a per-language parameter in your code, so 
an RTL
language interface won't get an LTR table.

Original comment by plast...@gmail.com on 2 Jan 2008 at 4:47

[GoogleCodeExporter]

Hi,

Thanks for the example. I'll look into making the change on the reCAPTCHA side. 
It is
probably going to take a bit because we're in the middle of deploying some major
upgrades.

re: localizing for RTL: I think it's going to be pretty hard to do that with our
current theme. What I'd suggest doing is to use the custom theme. That will 
allow you
to choose the localization and also make a more RTL friendly layout.

Original comment by ben.maurer on 2 Jan 2008 at 5:38

[GoogleCodeExporter]

Thank you!

When I have some free time, I'll look into making a Hebrew custom theme. Is 
there any
way to submit such a thing to you to be included among the standard options?

Original comment by plast...@gmail.com on 2 Jan 2008 at 6:23

[GoogleCodeExporter]

In the meantime, the only fix we could apply to the WordPress plugin is the:

document.getElementById('recaptcha_widget_div').style.direction = 'ltr';

addition. Am I correct? In that case I will include that in the Work-In-Progress
version unless/until otherwise told to (In case it is incorporated into the 
reCAPTCHA
side).

Original comment by jorgepbl...@gmail.com on 23 Feb 2008 at 8:13

[GoogleCodeExporter]

It is better to apply the direcrionality to the table, like so:
document.getElementById('recaptcha_widget_table').style.direction = 'ltr';

But except for that detail, yes, that is the only fix possible through the WP 
plugin.

Thank you!

Original comment by plast...@gmail.com on 23 Feb 2008 at 8:18

[GoogleCodeExporter]

Sorry for the late response but, I implemented the 'fix' in comment #9 but 
FireBug
claims there is no such element with id 'recaptcha_widget_table'. It doesn't,
however, complain when I use 'recaptcha_widget_div'.

Original comment by jorgepbl...@gmail.com on 3 May 2008 at 4:33

[GoogleCodeExporter]

I copied the name wrong, it's supposed to be:
document.getElementById('recaptcha_table').style.direction = 'ltr';

You can see it in action on my blog on any random post (like
http://eesh.net/blog/?p=242) or on the demonstration pages I mentioned on 
comment 5:
http://eesh.net/blog/rc_div.html
http://eesh.net/blog/rc_table.html

You'll notice the rc_table page looks better, because the whole recaptcha frame 
is on
the right (With the textbox and the button, as expected).

Original comment by plast...@gmail.com on 6 May 2008 at 12:56

[GoogleCodeExporter]

Alright, thanks for the fix :)

Original comment by jorgepbl...@gmail.com on 6 May 2008 at 1:20

[GoogleCodeExporter]

Glad to have helped!

Original comment by plast...@gmail.com on 6 May 2008 at 1:26