Page MenuHomePhabricator
Create Task
Maniphest T283210

Support :dir() for better RTL language support in template styles
Open, Needs TriagePublicFeature
Actions

Description

Now :dir() pseudo-class CSS selector is quite well supported through browsers, we should allow its use in templateStyles, safelisting it in CSS-Sanitizer.

Previous report

Currently:

  • TemplateStyles prefixes all CSS selectors with .mw-parser-output , so .mw-content-rtl is not usable (because it is applied on a ancestor).
  • There is no way to pass variables to styles with some kind of `<templatestyles src="file.css" vars="{lang: {{PAGELANGUAGE}} }" />
  • CodeMirror refuses to save text with non-standard :dir(rtl) CSS pseudo-class or float: inline-end rule.

We should have a way to customize CSS rules depending on element language direction. The best would be to support :dir(rtl|ltr), but since only Firefox currently works with it, we would better make .mw-content-rtl / .mw-content-ltr accessible from template style sheets.

Related

  • T322482: for support of float:inline-end / inline-start in templateStyles
  • T270116: for support of inline-end / inline-start image thumbs in wikitext

Related Objects

Event Timeline

Pols12 created this task.May 19 2021, 11:20 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 19 2021, 11:20 PM
Izno subscribed.EditedMay 20 2021, 1:38 AM

Can you target body.ltr or body.sitedir-ltr for your use case? These are supported directly. (I am not sure but targeting html[dir="ltr"] may also be.)

LTR/RTL alignments are generally supported natively with either @noflip or lack thereof. Consider whether that works too.

If you have a specific element inside .mw-parser-output, you can also use an attribute selector as with html above e.g. .my-class[dir="ltr"].

As for not supporting :dir, yes, it's not defined on the CSS standard side, so likely declined for implementation here anyway.

Izno added a comment.May 20 2021, 5:00 AM

Also, https://www.mediawiki.org/wiki/Template:Wikimedia_engineering_project_information implements support for rtl/ltr in TemplateStyles. Please take a look.

Tgr subscribed.May 20 2021, 11:17 AM

html[dir="ltr"] works (any simple CSS selectors can be applied to html or body, so things like html.no-js[dir="ltr"]:lang("en") body.skin-minerva .foo are valid). IIRC TemplateStyles does not do flipping.

Izno added a comment.May 20 2021, 2:06 PM
In T283210#7100439, @Tgr wrote:

IIRC TemplateStyles does not do flipping.

It does; Anomie said once that it respects noflip.

Pols12 added a subscriber: Krinkle.May 24 2021, 11:21 PM

I forgot we can target body and html element classes, however they can’t be used to solve this issue because they depends on site language (uselang), not on page content language. Besides, @Krinkle wrote in 2015 .ltr and .rtl are deprecated.

I was not aware of amazing Flipping feature, this fully solves my use case. With this feature, I don’t see any case where we would want to target a specific direction for content, so this task may be declined.

In T283210#7099927, @Izno wrote:

Also, https://www.mediawiki.org/wiki/Template:Wikimedia_engineering_project_information implements support for rtl/ltr in TemplateStyles. Please take a look.

This calls {{dir}} templates which contains data matching language code with language direction. Useful workaround (I currently use it), but this is not a full-CSS solution.

Izno closed this task as Invalid.May 25 2021, 2:15 AM

Probably better as invalid since it's already supported.

Pols12 reopened this task as Open.Jan 31 2024, 10:28 PM
In T283210#7109876, @Pols12 wrote:

I don’t see any case where we would want to target a specific direction for content

I finally came across a use case: in meta:Template:Grants:Project/Rapid, we aim to change an icon depending on language direction:

.ltr h2::after { content: url('ltr-icon.svg'); }
.rtl h2::after { content: url('rtl-icon.svg'); }

Blink does now support :dir().

Izno added a project: css-sanitizer.Jan 31 2024, 10:46 PM
Izno moved this task from Unsorted to W3C Working Draft (or earlier) on the css-sanitizer board.
Izno changed the subtype of this task from "Task" to "Feature Request".Feb 1 2024, 2:33 AM
Tgr added a comment.Feb 1 2024, 3:50 AM

Flipping applies to the icon name so I don't think you need :dir() for that. css-sanitizer should generally support standard, widely accepted CSS selectors though, regardless of whether we have a specific use case for them, so the task is fine.

Pols12 renamed this task from Support a way to select RTL languages in template styles to Support :dir() for better RTL language support in template styles.Feb 14 2024, 2:46 PM
Pols12 updated the task description. (Show Details)
In T283210#9504791, @Tgr wrote:

Flipping applies to the icon name so I don't think you need :dir() for that. css-sanitizer should generally support standard, widely accepted CSS selectors though, regardless of whether we have a specific use case for them, so the task is fine.

CSSJanus is amazing!
I have retargeted the task to :dir() support.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL