Modified DNN with RTL support release

As promised here the release of DNN version 5.02.01 modified to support RTL languages as a proof of concept of my suggestions. Here is a summary of modifications that are explained more in Part 1 & Part 2 for proposal to support RTL in DNN (without messing up the LTR layout). You can download this release from here.

Release Notes

1. API Changes

1. Added read only property IsRightToLeft in Localization class to determine if the current culture is right to left.
2. Added an extension method GetLabelModeString to LabelMode enumeration. When LabelMode is left and text direction is rtl the method returns right instead of left and when right the method returns left. If the text direction is left it has no effect when direction. This method should be used instead of ToString for supporting both LTR and RTL directions. This method returns string in lower case.
3. Changed the PropertyGrid class to use the method described in point 2 above instead of using ToString method.
4. Changed the behavior of AddStyleSheet in CDefault class to check the existance of RTL files and inculde them along side the normal CSS file in case of RTL culture. For example if AddStyleSheet is called to add file x.css, it will check for existance of x.rtl.css and include it if exists and RTL culture.
5. Added dnn.direction() method in dnn.js. It returns rtl in case direction is RTL.

2. Changes in WebSite

1. Added RTL CSS files according to point 4 above.
2. Fixed calculations for Menu absolute positioning in dnn.controls.dnnmenu.js
3. Fixed layout of Search controls in Search.js file. (background-image is always aligned left in CSS. In case of RTL direction, it needs to aligned right using background-position.
4. Numerous fixes in the website to support both RTL and LTR layout. You can find them by searching through the solution for Modified By Michael Fayez in the code.
5. Added the changes suggested here for adding rtl/ltr plugin to FCK editor (with slight modifications).
6. I didn’t use CSS flipping as it didn’t work on Opera. I used flipped images from the original ones when needed.

3. Notes

1. The attached file is only a proof of concept and is not supported by any means.
2. I don’t claim any copyright for these modifications. (Thanking me would be nice). 
3. The RTL modification of default skin could be better by flipping images of borders to have the shadows mirrored. Though the current solution passes.
4. Only default skin and default menu are fixed.
5. In some places like breadcrumb, the layout looks not mirrored in RTL mode this is because of flow direction of English in an RTL language the layout would be mirrored automatically. So this is not an issue at all.
6. I didn't make any modifications to the core modules of DNN. They need to be checked one by one to fix them. I know that there are problems in forum module in RTL. The repository module layout engine uses a single template from html file per module which may not be adequate in case of supporting both direction LTR and RTL and so on.
7. I don’t guarantee nor know if the DNN team would embrace these changes or supporting RTL layout. (Currently they fix RTL issues one by one without resolving to the root cause of the problem).
8. This release is not thoroughly tested. My changes may cause bugs in some scenarios unknown to me.
9. I only changed the pages and controls that made the layout wrong in the pages i visited while testing. I didn’t fix ALL DNN user controls with hardcoded alignments.
10. This code is not upgradable. When I started working on modifying DNN for RTL, latest DNN version was 5.02.01. Version 5.02.02 was released during my work. Copying the changes to the new version was too much to do.
11. The RTL style is having some problems in IE 7 (and I assume IE 6 too), while working fine on other browsers. I don’t think this is a major issue for a proof of concept.
12. The default theme for FCK editor has curved dotted end in its toolbars. They look ugly in RTL mode. They should be flipped but I didn’t try to find a solution for this. As a workaround you can use the sliver theme which has a straight dotted vertical line at the end of toolbars.

4. Installation

1. Set up DNN using the normal method.
2. Copy the file portal.rtl.css from _default portal file to the folder of your created portals. (I didn’t find a way for the automatic copy of this file every time a new portal is created and didn’t want to spend more time in this point). This is VERY important as without it the page won’t have direction:rtl style and all JavaScript calculations that depends on dnn.direction() will not work.
3. Add an RTL culture in languages page and compare the layouts of both RTL and LTR layouts by switching cultures using the flags in the top.

5. Things to consider

I suggested that RTL CSS is loaded along the normal css. But this duplicates the number of CSS files loaded and download by browser in RTL layout as almost no CSS file is suitable for both LTR and RTL directions so it duplicates the overhead of downloading. The other solution would be that RTL CSS file is loaded instead of the normal CSS file and duplicate the normal CSS file styles while modifying it for RTL layout. Maybe this is a better solution and easily doable by modifying the attached code.