Wikimedia Bugzilla is closed!

CC Krinkle

We would need this kind of feature to make pages with mixed directionality play
nice (i.e. pages where the page as a whole is RTL but some things are inside a
<div dir="ltr"> or vice versa).

Sounds like a plausible situation.

Do we haved such a scenario currently somewhere and/or is it blocking near development that needs this ? (trying to determine a priority)

Note that this will most likely mess with the cascading part of "CSS" as those rules will override things since they are more specific and thus are given more points by the style parser of the browser.

ie. 


.foo { float: none; margin: 0 auto; width: 500px;  }

/* @doubleflip */
div { float: left; margin: 0; }

normally <div class="foo"> will be centered because .foo is more specific (more points). but with @doubleflip adding some kind of directionality (ie. [dir=rtl] and [dir=ltr]) it could end up more specific.

It would be useful for e.g. the Translate extension where the direction depends on the language of the interface message (see e.g. r91881 where I added classes named *-ltr, *-rtl added by Language->getDir() in PHP.

However, overall I don't think @doubleflip would be needed, Translate is more an exceptional extension in terms of directionality.
Core MW is OK without it: I added sitedir-ltr/rtl (on body) for the site content language, and mw-content-ltr/rtl classes for the page content language, and that seems to be enough for most things. (I also had to add rules like .mw-content-ltr .mw-content-rtl { ... } to circumvent the CSS priority system, for cases where there was different directionality within the content.)

I think it would be more useful if there was something like
/* @flipclasses */ .class-ltr { margin-left:1em; }
that would generate
.class-ltr { margin-left:1em; }
and
.class-rtl { margin-right:1em; }

I'm leaning to WONTFIX, it doesn't seem to be as useful as I originally thought.

Yes, however, thinking about it, what I wrote above would be quite useful (imho):

/* @flipclasses */ .class-ltr { margin-left:1em; }
->
.class-ltr { margin-left:1em; }
+
.class-rtl { margin-right:1em; }

 I still don't understand why one must introduce new classes related to directionality, this makes styling a page a lot harder. When styling one should not be aware of directionality.

If it's possible to override a class in PHP from "foo" to "foo-ltr" or "foo-rtl", isn't it just as easy to let PHP output '<div class="foo" dir="rtl">' or '<div class="foo" dir="ltr">' ?

Heard in the i18n talk: (text) directionality should be in html.

Anyway, due how css is, one needs to be aware of the directionality.

I agree it should be in the HTML, in the (semantic) attribute for "dir".

So there'd be <foo class="bar" dir="ltr"> and/or <foo class="bar" dir="rtl"> on a page.

Styling could be done now as:

.bar { font-size: 85%; background: #f2f2f2; }

/* @noflip */ .bar[dir=rtl] { margin-right: 1em; }
/* @noflip */ .bar[dir=ltr] { margin-left: 1em; }

One extra gain is that later overrides will always work in LTR and in RTL.
For example, if someone wants to change some of these stylings, ".bar { margin-left: 2em; }" will not work (even if it's after the above), because ".bar[dir=...]" is more specific and thus still overrides that later rules. 
The override would have to include the "dir" parts.

This could be automated with:

/* @addflipped */ .bar[dir=ltr] { margin-left: 1em; }

The only downside in comment 9 is that it messes with the CSS cascading rules. Not caused by "@addflipped" but caused by the fact that it uses an additional directionality selector.

Perhaps a cleaner solution would be to use both.

--

HTML:

<foo class="bar bar-ltr" dir="ltr"> + <foo class="bar bar-rtl" dir="rtl">
* The "dir"-attribute for semantics and other power rules
* The "bar"-class for general application of the design independent from directionality
* The  "bar-xxx"-class for direction specific rules

CSS:

.bar { font-size: 85%; background: #f2f2f2; }

/* @noflip */ .bar-ltr { margin-right: 1em; }
/* @noflip */ .bar-rtl { margin-left: 1em; }

CSS (proposed syntax after this bug is fixed?)

.bar { font-size: 85%; background: #f2f2f2; }
.bar-ltr { margin-right: 1em; }

--

This would work similar to the way it replaces -ltr in background images ( "background-image: url(foo-ltr.png)" ). Except that it would add that selector group, rather than replacing it.

The main advantage here is that it doesn't mess with the cascading of the CSS (both are class-level selectors). And doesn't make it harder to style them since "bar" is still there.

Unassigning default assignments. http://article.gmane.org/gmane.science.linguistics.wikipedia.technical/54734

Is there enough code that would benefit to justify implementing this?