Right to Left (rtl) layout for JComments - All browsers compatible

[hostkaran]

Hello,

I our testings using Jcomments we noticed that included RTL style in Jcomments isn't completely as how Right to Left language people (Farsi, Arabic, Hebrew) align and expect to be, So we made a New Special RTL layout for Right to Left websites  . You can download here:

Tested browsers: IE6, IE7, Firefox, Chrome
Time to Complete: 1 day
Version: 1.0

[smart]

Thank you for your work! But you need change only style_rtl.css not style.css... I've merged default JComments' style_rtl.css with yours one and attached here.

[hostkaran]

No, Since some minor changes are required to be applied to tpl_form.php file changing just css doesn't work, and so I have made a new layout for that:

To be more specific these are the details that are necessary if you want to integrate layout (ex. for multilingual websites):

Changes:
1- tpl_form.php  is changed according to RTL ( Also to make it compatible with all browsers)
2- style.css is changed

So to integrate it with Jcomments "default" layout:

1- it is necessary to rename provided "default_rtl" layout's tpl_form.php to tpl_form_rtl.php and put it inside Jcomments "default" layout.
2- Detect joomla language direction and include tpl_form_rtl.php instead of tpl_form.php. ( changing Jcomments code)

3- Compare provided "default_rtl " layout style.css to original style.css and write the differences inside Jcomments "default" layout style_rtl.css.

[smart]

In tpl_form you only replace <P> tags with table and change placement input and label elements (I don't think that this is nessesary). There is no compatibilty problems with paragraphs (<p>) tag in any browser. So I see no reason to use table here.

Regarding style_rtl.css - it contains ALL your changes for RTL except using Tahoma font. This file is included in JComments if current Joomla's language is marked as RTL. So styles defined in style_rtl.css will override styles from style.css

[hostkaran]

For tpl_form exactly as you said <P> tags are changed to <table>, <tr>, <td> due to some templates incompatibility I've seen in IE6 for RTL when <P> is used. ( and so using tables makes interface more backward compatible)

For style.css actually it's not just changing font, changes are listed below:

text-align: left and right change according to RTL
background-position: left -> right
padding: change according to RTL
floats changed according to RTL
margin-left and right changed according to RTL
Fix background images shown under text instead of beside text.

Live example with new default_rtl layout can be seen here ( compatibility with all browsers tested)
Demo of New RTL layout

[smart]

incompatibility I've seen in IE6 for RTL when <P> is used

Oh... I've no plans to continue IE6 support

For style.css actually it's not just changing font, changes are listed below:

text-align: left and right change according to RTL
background-position: left -> right
padding: change according to RTL
floats changed according to RTL
margin-left and right changed according to RTL
Fix background images shown under text instead of beside text.

yes and all these changes are applyed in style_rtl.css file I've attached here.

[hostkaran]

Tested the merged style_rtl file that you made out of default_rtl, seems to be okay there was just a background-image bug for IE that I fixed, So the new style_rtl.css can be downloaded here:

 
about IE6 compatibility: since Jcomments is the most popular joomla commenting component I think that would be a good feature to add, since this change ( changing <P> to <table>) don't have any performance impact and it makes about 25% of current internet visitors  to use commenting feature, however you are the developer and you decide 

[smart]

Tested the merged style_rtl file that you made out of default_rtl, seems to be okay there was just a background-image bug for IE that I fixed, So the new style_rtl.css can be downloaded here:

thank you very much, I'll include updated file in next release!

 

don't have any performance impact and it makes about 25% of current internet visitors  to use commenting feature, however you are the developer and you decide  

In my mind we (webmasters and developers) must make all to decrease IE6 usage because it buggly, unsafe and outdated. We must describe and help our site visitors that they are need to upgrade to the latest IE version. There are some usefull plugins that add warning message and provide link to update page to Miscrosoft site.

[hostkaran]

 like your idea too, this way we have more time to develop and waste less time on fixing IE6 bugs. 

[wael.salman]

I did that already - thank you :-) 

[gogetit]

Hi
To use rtl, so I need just to replace the content the default folder under tpl, re-zip, and install? [This is a fresh install]

Also is it compatible with the latest version of JComments?

Thanks!

[pop90]

Does this fix support  JComments 2.2.0.1. As I use it (Arabic Language) on my site ?

I see the the great efforts that hostkaran had made to make the RTL working fine in his demo link.