Page MenuHomePhabricator

MediaWiki should not generate ids that are hard to select
Open, LowPublic

Description

If a page has a section such as[1]

= Português =

or[2]

== mediaWiki.loader ==

then the ids generated by MediaWiki are "Portugu.C3.AAs" and "mediaWiki.loader" respectively. This makes it impossible to select those specific sections by using

jQuery( '#Portugu.C3.AAs' );

or

jQuery( '#mediaWiki.loader' );

or equivalently in CSS,

#Portugu.C3.AAs {
    color: red;
}

since the dot "." is interpreted as a class selector.

  • Why does MW adds those dots in the first example?
  • Would it be possible to fix this?

[1] http://pt.wiktionary.org/w/index.php?title=escudismo&oldid=278201&uselang=en
[2] [[mw:RL/DM#mediaWiki.loader]]


Version: 1.20.x
Severity: enhancement

Details

Reference
bz30471

Related Objects

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:47 PM
bzimport set Reference to bz30471.
bzimport added a subscriber: Unknown Object (MLST).

(In reply to comment #0)

If a page has a section such as[1]

= Português =

or[2]

== mediaWiki.loader ==

then the ids generated by MediaWiki are "Portugu.C3.AAs" and "mediaWiki.loader"
respectively. This makes it impossible to select those specific sections by
using

jQuery( '#Portugu.C3.AAs' );

or

jQuery( '#mediaWiki.loader' );

or equivalently in CSS,

#Portugu.C3.AAs {
    color: red;
}

since the dot "." is interpreted as a class selector.

You can escape dots in ID selectors. In CSS:
#mediaWiki\.loader { color: red; }

in jQuery:
$( '#mediaWiki\\.loader ); // double \ needed to produce one \ in the string

(In reply to comment #1)

You can escape dots in ID selectors. In CSS:
#mediaWiki\.loader { color: red; }

in jQuery:
$( '#mediaWiki\\.loader ); // double \ needed to produce one \ in the string

I agree it is indeed not impossible. But looking at the wider picture: MediaWIki sanitizes the textual content of the heading and creates an ID that doesn't contain illegal characters. But since it is somewhat sanitized already (just like we do for class names, though we do a better job there) I think it is perfectly reasonable to make this sanitize dots and other charaters as well.

It doesn't have to be impossible, but making it convenient and optimized for usage in CSS is just as important. Since the only reason we output them is for usage in CSS (and by JavaScript, and for anchor-jumping), it makes perfect sense to optimize for that usage and not require escaping in 2/3 use cases.

[[Sandbox.js]]

Sanitizer::escapeClass( 'page-' . $title->getPrefixedText() )
<body class=" .... page-Sandbox_js ..">

Looks nice.

Sandbox.js {foo[test]}

.. class="mw-headline" id="Sandbox.js_.7Bfoo.5Btest.5D.7D"> Sandbox.js {foo[test]} ..

That's pretty horrible and not justifiable in my opinion.

.. class="mw-headline" id="Sandbox_js_foo_test_"> Sandbox.js {foo[test]} ..

The above would be much better (stripping unwanted characters, non-repeating, uniqueness would be enforced with incrementing numbers appended, like we do already for similar headings).

Aklapper lowered the priority of this task from Medium to Low.Mar 25 2015, 4:07 PM