/    Sign up×
Community /Pin to ProfileBookmark

CSS compatible with right-to-left and left-to-right rendering

Copy linkTweet thisAlerts:
Jan 22.2010

Hi everyone!

I’m curious if CSS (and DOM/Javascript) supports any kind of unified approach to developing UI which is invariant to the rendering style, whether it right-to-left or left-to-right. For instance, a property like, m-m-m, virtual-left which is left in normal case and right in right-to-left case. A kind of relative coordinate system.

In other words, I need a way to build the AJAX UI so that it’s not required to develop special CSS and other code to support right-to-left separately. I know CSS converters exist but they are no good when the UI is very complex, and this does not help with DOM/Javascript.

Thank you in advance.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebnerdJan 24.2010 — Don't you plan to pre-determine your CSS? If so then I am not sure what the issue is. Just create the CSS so that all styles are inherited from the parent container that has a class for "ltr" or "rtl"


<div class="ltr">

ajax content comes in here

</div>

Obviously, the class="ltr" would change for "rtl" as needed.

I do several multi-lingual websites and setup them up with:

global css

ltr.css

rtl.css

Each directional CSS file gets imported based on language selection and the global is always included. The directional files contain only relevant margins, paddings, floats and positions. Now, if you are letting some sort of WYSIWYG editor generate content, that is probably bad to begin with. If the goal is to allows for some sort of user contributed content, you will need some level of "checks and balances" to ensure that the content doesn't break the layout. In that case, the data entry for the content should be text only.

Not sure if any of that answers your questions but hope I could help.
Copy linkTweet thisAlerts:
@idhunterauthorJan 24.2010 — Thank you for reply.

Each directional CSS file gets imported based on language selection and the global is always included. The directional files contain only relevant margins, paddings, floats and positions.[/QUOTE]
But there are lots of all this stuff. So I'll have to anyway declare it separately? I can't go on with just a single css, correct? Using global, ltr and rls css files will reduce the amount of direction-dependent work but won't eliminate it completely, right?
Copy linkTweet thisAlerts:
@WebnerdJan 24.2010 — They don't eliminate it but do make it easier to maintain. You could use a single CSS file but I wouldn't since that would require a global Cascade from the body tag that has a class of "rtl" ot "ltr". This method allows for a cleaner "separation of concerns".
Copy linkTweet thisAlerts:
@idhunterauthorJan 25.2010 — Thanks. Still, this is CSS-only side of things. Don't you know if there is anything on DOM/Javascript side for the same purpose? Consider an application like a calendar. For instance, you have arbitrary number of columns in a day (48 - per 30 mins, 24 - per an hour, 8 - only business hours, also 5 or 7 day weeks, etc), and these columns are set dynamically in JS. Having 48+24+8+16+.... CSS classes specifying margins for rtl and ltr would be a bit strange, so I don't think it's easily possible to specify this via CSS.
Copy linkTweet thisAlerts:
@WebnerdJan 25.2010 — Are you familiar with how :

<i>
</i>direction:rtl


actually functions? It not only renders the text from right to left but also right aligns the text to the container. Your Javascript inserted elements will inherit styles once inserted so you just need to make sure your styles cascade correctly.

If you are trying to accomplish an automatic "rtl" conversion without having to specify an CSS, I don't think there is a "rock solid" approach that will produce exactly what you are looking for. There is a project called CSSJanus:

http://code.google.com/p/cssjanus/

You can test it here http://cssjanus.commoner.com/

That may point you in the right direction.
Copy linkTweet thisAlerts:
@idhunterauthorJan 27.2010 — Thanks again. I think I got the idea now.
×

Success!

Help @idhunter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...