mw-content-{ltr,rtl} initially was helping users having e.g. English language as their interface, to surf in sites with content RTL content sites such as Persian Wikipedia, but now with the presence of CSS Logical https://drafts.csswg.org/css-logical/ and https://developer.mozilla.org/en-US/docs/Web/CSS/:dir it's almost provides no value.

Primarily use was bullets of one text direction to be shown in the opposite direction which is taken care in T369475 using CSS Logical

So now it's time to get rid of it altogether and as it's deprecation in T287701, starting with this https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1057857 which removes most of the uses.

And the next step, in mid ranged future, will be to use CSS Logical all around and remove CSS Janus from MediaWiki eventually but that needs edits in template styles which will take years.

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
gallery: Remove specificity <ul> selector hacks	mediawiki/core	master	+3 -6
Add mixins for margin-block and padding-block	mediawiki/core	master	+26 -0
Use text-align: start to simplify direction specific styles	mediawiki/services/mobileapps	master	+1 -12
Simplify direction specific styles using margin-inline	mediawiki/extensions/DiscussionTools	master	+9 -24
Use text-align: start to simplify direction targeted logic	mediawiki/extensions/WikimediaMessages	master	+1 -12
Use margin-inline mixin to simplify direction specific styles	mediawiki/extensions/CategoryTree	master	+5 -36
Form a padding-inline to simplify tocnumber styles	mediawiki/core	master	+16 -16
Use CSS Logical with fallback to simplify redirectPage styles	mediawiki/core	master	+4 -8
Use margin-inline mixin to simplify thumbnails magnify spacing	mediawiki/core	master	+1 -9
Use margin-inline mixin to simplify figurecaption spacings	mediawiki/core	master	+3 -5
Use margin-inline mixin to simplify table of contents styles	mediawiki/core	master	+3 -13
Form a margin-inline Less mixin	mediawiki/core	master	+22 -18
Simplify ToC's alignment using text-align: start	mediawiki/core	master	+1 -12
Use text-align: start in content.thumbnails	mediawiki/core	master	+1 -11
Use text-align: start in content.media-common	mediawiki/core	master	+1 -16
Define editsection spacing in a direction aware way	mediawiki/core	master	+5 -21
Getting rid more of mw-content-{ltr,rtl} specific styles	mediawiki/core	master	+65 -203
Remove mw-content-{ltr,rtl}	mediawiki/skins/MonoBook	master	+0 -15
Use CSS Logical instead to remove uses of mw-content-{ltr,rtl}	mediawiki/skins/MinervaNeue	master	+3 -27
Remove mw-content-{ltr,rtl}	mediawiki/skins/Vector	master	+0 -15

Related Objects

Mentioned In: T266415: RTL ref are not shown in RTL when <references/> is wrapped in an object with LTR directionality
T371804: MWExceptionRenderer's error box is supposed to be LTR in RTL user interface but isn't
Mentioned Here: T304017: docs: Consider whether and when to start using CSS logical properties in Codex
T322482: TemplateStyles does not allow logical CSS properties
T371082: MinervaNeue has broken mixed direction lists
T326017: Wrong padding for galleries
T287701: Review usages of `.mw-content-ltr` and `.mw-content-rtl`
T369475: Make ul and ol margin values direction aware

Event Timeline

Ebrahim created this task.Jul 29 2024, 2:43 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 29 2024, 2:43 PM

Ebrahim updated the task description. (Show Details)Jul 29 2024, 2:43 PM

Ebrahim updated the task description. (Show Details)Jul 29 2024, 2:47 PM

Ebrahim added subscribers: Jdlrobson, matmarex, TheDJ.

Change #1057857 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Getting rid more of mw-content-{ltr,rtl} specific styles

https://gerrit.wikimedia.org/r/1057857

gerritbot added a project: Patch-For-Review.Jul 29 2024, 2:49 PM

Ebrahim renamed this task from Deprecate and getting rid of mw-content-{ltr,rtl} to Getting rid of mw-content-{ltr,rtl}.Jul 29 2024, 2:52 PM

Change #1057897 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/skins/Vector@master] Remove mw-content-{ltr,rtl}

https://gerrit.wikimedia.org/r/1057897

Change #1057898 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/skins/MinervaNeue@master] Use CSS Logical instead to remove uses of mw-content-{ltr,rtl}

https://gerrit.wikimedia.org/r/1057898

Thanks for filing this, I was going to do it too as a follow-up to the work you did on T369475: Make ul and ol margin values direction aware.

Some more code to review and potentially remove can be found here: https://codesearch.wmcloud.org/search/?q=\.mw-content-(ltr|rtl)+\.mw-content-(ltr|rtl) – nested selectors like .mw-content-rtl .mw-content-ltr are problematic, because they have high specificity, and sometimes cause the wrong margins to be applied to some elements (e.g. T326017).

I wouldn't rush to remove every use of .mw-content-rtl and .mw-content-ltr though, there is still a good number of browsers and users that don't support the new properties (https://caniuse.com/css-logical-props). I wouldn't want to break the reading experience for people. I think we should make these changes case-by-case, depending on how bad the rendering on these browsers would be, and how commonly the affected elements are used.

Change #1057910 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/skins/MonoBook@master] Remove mw-content-{ltr,rtl}

https://gerrit.wikimedia.org/r/1057910

Amire80 added projects: RTL, MediaWiki-Internationalization.Jul 29 2024, 4:06 PM

Restricted Application added a project: I18n. · View Herald TranscriptJul 29 2024, 4:06 PM

I wouldn't want to break the reading experience for people.

That's for sure but let's see if we can agree on some point I'm think about, the uses usually aren't by regular anonymous readers who are the main target of the wikis, but whose are more advanced users, surfing e.g. Persian Wikipedia but in English interface, or very niche cases with mixed direction [aside ol/ul/dd which is taken care of]. Considering the small fraction of the uses and the availability of users with updated browsers, and the fact we are providing baseline fallback anyway, I think we can assume this isn't that noticeable change. For example T371082 was broken for years and we just've fixed it. Our changes here aren't worse than that at least I believe.

I think we should make these changes case-by-case, depending on how bad the rendering on these browsers would be, and how commonly the affected elements are used.

Understandable, so let's stop https://gerrit.wikimedia.org/r/1057857 but see if we can proceed the others

nested selectors like .mw-content-rtl .mw-content-ltr are problematic, because they have high specificity

Makes sense, to deal with them first or only them if we can't agree to go more than that.

Jack_who_built_the_house subscribed.Jul 29 2024, 4:20 PM

Ebrahim updated the task description. (Show Details)Jul 29 2024, 4:24 PM

Restricted Application added a subscriber: Huji. · View Herald TranscriptJul 29 2024, 4:24 PM

Change #1057897 abandoned by Ebrahim:

[mediawiki/skins/Vector@master] Remove mw-content-{ltr,rtl}

https://gerrit.wikimedia.org/r/1057897

In T371265#10023756, @Ebrahim wrote:

That's for sure but let's see if we can agree on some point I'm think about, the uses usually aren't by regular anonymous readers who are the main target of the wikis, but whose are more advanced users, surfing e.g. Persian Wikipedia but in English interface

In multilingual wikis like Meta and Commons, mixed directionality is the rule, not the exception made by “more advanced users”. On Commons, there’s even a gadget that allows anonymous users to set their user interface language.

the availability of users with updated browsers

People may not be able to update: for example, because they use computers where they don’t have the necessary permissions or because they use old operating systems (Debian Wheezy, OS X El Capitan, iOS 11 etc.), which in turn may be because of old hardware they can’t afford upgrading.

margin-inline-{start,end} isn’t even supported by all Grade A browsers: Grade A for Safari is 11.1+, but margin-inline-start and margin-inline-end are supported only in Safari 12.1+. (Let alone Grade C browsers: there, even Chrome lags behind by two years.)

In multilingual wikis like Meta and Commons, mixed directionality is the rule, not the exception made by “more advanced users”. On Commons, there’s even a gadget that allows anonymous users to set their user interface language.

Sure, even I needed this for Commons after all which has broken cases with the current approach. Lack of proper use of mw-content-{ltr,rtl} use, more than three layers and so.

People may not be able to update: for example, because they use computers where they don’t have the necessary permissions or because they use old operating systems (Debian Wheezy, OS X El Capitan, iOS 11 etc.), which in turn may be because of old hardware they can’t afford upgrading.

There were breakages like this T371082 that not only those outdated browsers users, even mainstream browsers users didn't bring it to our attention and these changes impact is really not more than that, though, we aren't going to break those anyway.

margin-inline-{start,end} isn’t even supported by all Grade A browsers: Grade A for Safari is 11.1+, but margin-inline-start and margin-inline-end are supported only in Safari 12.1+. (Let alone Grade C browsers: there, even Chrome lags behind by two years.)

It's even possible to polyfill it with -webkit-margin-start if is there any interest.

Change #1057898 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use CSS Logical instead to remove uses of mw-content-{ltr,rtl}

https://gerrit.wikimedia.org/r/1057898

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.17; 2024-08-06).Jul 31 2024, 11:00 PM

Jdlrobson unsubscribed.Jul 31 2024, 11:01 PM

Change #1057910 abandoned by Ebrahim:

[mediawiki/skins/MonoBook@master] Remove mw-content-{ltr,rtl}

https://gerrit.wikimedia.org/r/1057910

Related logical properties tickets: T322482, T304017

Next to browser support, things to particularly look out for are elements with uneven offsets on visual properties like box shadow and background.

Change #1059186 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use text-align: start in content.media-common

https://gerrit.wikimedia.org/r/1059186

Change #1059187 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use text-align: start in content.thumbnails

https://gerrit.wikimedia.org/r/1059187

Change #1059188 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Remove specificity <ul> selector hacks

https://gerrit.wikimedia.org/r/1059188

Change #1057857 abandoned by Ebrahim:

[mediawiki/core@master] Getting rid more of mw-content-{ltr,rtl} specific styles

Reason:

Let's split the changes as suggested

https://gerrit.wikimedia.org/r/1057857

Change #1059247 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Define editsection spacing in a direction aware way

https://gerrit.wikimedia.org/r/1059247

Izno subscribed.Aug 2 2024, 8:36 AM

Change #1059247 merged by jenkins-bot:

[mediawiki/core@master] Define editsection spacing in a direction aware way

https://gerrit.wikimedia.org/r/1059247

Ebrahim updated the task description. (Show Details)Aug 2 2024, 12:31 PM

Change #1059348 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use CSS Logical to simplify table of contents styles

https://gerrit.wikimedia.org/r/1059348

Change #1059372 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use CSS Logical to simplify tocnumber style

https://gerrit.wikimedia.org/r/1059372

In T371265#10033253, @Ebrahim wrote:

People may not be able to update: for example, because they use computers where they don’t have the necessary permissions or because they use old operating systems (Debian Wheezy, OS X El Capitan, iOS 11 etc.), which in turn may be because of old hardware they can’t afford upgrading.

There were breakages like this T371082 that not only those outdated browsers users, even mainstream browsers users didn't bring it to our attention and these changes impact is really not more than that, though, we aren't going to break those anyway.

There’s a huge difference in terms of mentality between unintentionally, unknowingly breaking things, and knowingly breaking things.

margin-inline-{start,end} isn’t even supported by all Grade A browsers: Grade A for Safari is 11.1+, but margin-inline-start and margin-inline-end are supported only in Safari 12.1+. (Let alone Grade C browsers: there, even Chrome lags behind by two years.)

It's even possible to polyfill it with -webkit-margin-start if is there any interest.

This should be the bare minimum. Grade A browsers are Grade A because we promise to fully support them.

Change #1059186 merged by jenkins-bot:

[mediawiki/core@master] Use text-align: start in content.media-common

https://gerrit.wikimedia.org/r/1059186

Change #1059406 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use CSS Logical with fallback to simplify redirectPage styles

https://gerrit.wikimedia.org/r/1059406

Change #1059187 merged by jenkins-bot:

[mediawiki/core@master] Use text-align: start in content.thumbnails

https://gerrit.wikimedia.org/r/1059187

Change #1059410 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Form a margin-inline LESS mixin

https://gerrit.wikimedia.org/r/1059410

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1059410 perhaps can be considered overkill but this way there won't be much concern regard lints or fallbacks as @Tacsipacsi had the following concern,

margin-inline-{start,end} isn’t even supported by all Grade A browsers: Grade A for Safari is 11.1+, but margin-inline-start and margin-inline-end are supported only in Safari 12.1+. (Let alone Grade C browsers: there, even Chrome lags behind by two years.)

So I've formed a mixin https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1059410 that also uses -webkit-margin-start which is just archaic, it was there at least since 2011 in WebKit https://github.com/WebKit/WebKit/commit/379b774804b5737750235154892637b36ceea449 before Chrome's Blink fork so exists in Chrome, Opera, Safari and so.

I'm not even sure if it worths to keep margin-left having such that as Firefox also supported -webkit- prefixes since some old version I remember.

Change #1059448 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Simplify ToC's alignment using text-align: start

https://gerrit.wikimedia.org/r/1059448

Change #1059348 abandoned by Ebrahim:

[mediawiki/core@master] Use CSS Logical to simplify table of contents styles

Reason:

Till we decide about mixin

https://gerrit.wikimedia.org/r/1059348

Change #1059348 restored by Ebrahim:

[mediawiki/core@master] Use CSS Logical to simplify table of contents styles

https://gerrit.wikimedia.org/r/1059348

Change #1059448 merged by jenkins-bot:

[mediawiki/core@master] Simplify ToC's alignment using text-align: start

https://gerrit.wikimedia.org/r/1059448

Ebrahim mentioned this in T371804: MWExceptionRenderer's error box is supposed to be LTR in RTL user interface but isn't.Aug 5 2024, 12:38 PM

You might also want to update the advice in https://www.mediawiki.org/wiki/Directionality_support. For now I just removed a fragment that isn't true any more: https://www.mediawiki.org/w/index.php?title=Directionality_support&diff=prev&oldid=6688338

@matmarex I think what it should be written is an advice to only use dir attribute, neither the class nor even the browser style, I came at that conclusion when I saw this,

data:text/html,<style>div{background:red;padding-inline-start:2em}div:dir(rtl){background:blue}</style><div>a</div><div style="direction:rtl">a</div><span style="direction:rtl"><div>a</div></span><div dir=rtl>a</div><span dir=rtl><div>a</div></span>

Opening the following in a browser results in,

which was a bit was surprising (but now I think I know why) to me but shows :dir(rtl) only works if direction is set via attribute and apparently that's what browsers like and we should also do (but fortunately CSS Logical is indifferent about it and works even if direction is set via style). I liked to even explain this finding and suggestion in Tech News or somewhere so Commons template editors go for them while replacing {{dir}} with {{#dir}} in the hackathon explained at https://meta.wikimedia.org/wiki/Tech/News/2024/32 as {{dir}} templates in Commons were used with the class or either of the style or attribute and now we only need that attribute.

Change #1059410 merged by jenkins-bot:

[mediawiki/core@master] Form a margin-inline Less mixin

https://gerrit.wikimedia.org/r/1059410

ReleaseTaggerBot edited projects, added: MW-1.43-notes (1.43.0-wmf.18; 2024-08-13); removed: MW-1.43-notes (1.43.0-wmf.17; 2024-08-06).Aug 9 2024, 11:00 AM

Change #1061080 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use margin-inline mixin to simplify thumnails spacing

https://gerrit.wikimedia.org/r/1061080

Change #1061081 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Use margin-inline mixin to simplify figurecaption spacings

https://gerrit.wikimedia.org/r/1061081

Change #1059348 merged by jenkins-bot:

[mediawiki/core@master] Use margin-inline mixin to simplify table of contents styles

https://gerrit.wikimedia.org/r/1059348

Change #1061080 merged by jenkins-bot:

[mediawiki/core@master] Use margin-inline mixin to simplify thumbnails magnify spacing

https://gerrit.wikimedia.org/r/1061080

Change #1061081 merged by jenkins-bot:

[mediawiki/core@master] Use margin-inline mixin to simplify figurecaption spacings

https://gerrit.wikimedia.org/r/1061081

Change #1059372 merged by jenkins-bot:

[mediawiki/core@master] Form a padding-inline to simplify tocnumber styles

https://gerrit.wikimedia.org/r/1059372

Change #1059406 merged by jenkins-bot:

[mediawiki/core@master] Use CSS Logical with fallback to simplify redirectPage styles

https://gerrit.wikimedia.org/r/1059406

TheDJ mentioned this in T266415: RTL ref are not shown in RTL when <references/> is wrapped in an object with LTR directionality.Aug 21 2024, 10:02 AM

Change #1078069 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/CategoryTree@master] Use margin-inline mixing to simplify direction specific styles

https://gerrit.wikimedia.org/r/1078069

Change #1078069 merged by jenkins-bot:

[mediawiki/extensions/CategoryTree@master] Use margin-inline mixin to simplify direction specific styles

https://gerrit.wikimedia.org/r/1078069

ReleaseTaggerBot edited projects, added: MW-1.43-notes (1.43.0-wmf.26; 2024-10-08); removed: MW-1.43-notes (1.43.0-wmf.18; 2024-08-13).Oct 6 2024, 10:00 AM

Change #1078102 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/WikimediaMessages@master] Use text-align: start to simplify direction targeted logic

https://gerrit.wikimedia.org/r/1078102

Change #1078104 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/DiscussionTools@master] Simplify direction specific styles using margin-inline

https://gerrit.wikimedia.org/r/1078104

Change #1078102 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] Use text-align: start to simplify direction targeted logic

https://gerrit.wikimedia.org/r/1078102

Change #1078344 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/services/mobileapps@master] Use text-align: start to simplify direction specific styles

https://gerrit.wikimedia.org/r/1078344

Change #1078104 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Simplify direction specific styles using margin-inline

https://gerrit.wikimedia.org/r/1078104

The post https://www.alwaystwisted.com/articles/css-logical-properties-and-sass that I just saw has something related, it differs from our approach though

Change #1078344 merged by jenkins-bot:

[mediawiki/services/mobileapps@master] Use text-align: start to simplify direction specific styles

https://gerrit.wikimedia.org/r/1078344

Change #1105751 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/core@master] Add mixins for margin-block and padding-block

https://gerrit.wikimedia.org/r/1105751

jhsoby subscribed.Dec 19 2024, 4:17 PM

Change #1105751 merged by jenkins-bot:

[mediawiki/core@master] Add mixins for margin-block and padding-block

https://gerrit.wikimedia.org/r/1105751

ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.12; 2025-01-14).Dec 23 2024, 8:00 PM

Change #1059188 abandoned by Hashar:

[mediawiki/core@master] gallery: Remove specificity <ul> selector hacks

https://gerrit.wikimedia.org/r/1059188

Change #1059188 restored by Thcipriani:

[mediawiki/core@master] gallery: Remove specificity <ul> selector hacks

https://gerrit.wikimedia.org/r/1059188

Pppery edited projects, added: Patch-Needs-Improvement; removed: Patch-For-Review.Mar 31 2026, 12:41 AM

Getting rid of mw-content-{ltr,rtl}Open, Needs TriagePublicActions

Description

Details

Related Objects

Event Timeline

Getting rid of mw-content-{ltr,rtl}
Open, Needs TriagePublic
Actions