Page MenuHomePhabricator

Assign classes to wikilink anchors to facilitate styling
Open, LowestPublic

Description

It would be useful to be able to apply CSS styles to wikilinks according to their destinations.

This could simply be realised by assigning the A tag a HTML class indicating the interwiki prefix, or the namespace identifier, for example "iw-xxx" or "ns-xxx", so that a CSS style can be put in place based on the relevant selector:

a.iw-mw {   /* Links to mediawiki.org are orange. */
    color: orange;
}
a.ns-14 {    /* Links to categories are green. */
    color: green;
}

Event Timeline

ahmad renamed this task from Assign classes to interwiki link anchors to facilitate styling to Assign classes to wikilink anchors to facilitate styling.Mar 16 2020, 5:43 PM

Hi @ahmad, I assume this is about MediaWiki itself? Asking because this task does not have a code project tag associated.
You could do that via custom CSS yourself on e.g. https://www.mediawiki.org/wiki/Special:MyPage/common.js .

I don't think this should be the behavior of MediaWiki by default, as most users will never need that and would be confused what the colors mean?

Yes, it's about Mediawiki.

I can certainly add custom CSS, or in my own instances, alter Common.css, but there needs to be classes in the output HTML to be able to apply the CSS to, right?
Or are you saying that there are already classes or other usable selectors in place which I didn't find?

Moreover, I'd like to clarify that the specific coloration in the example was just an example. I'm not proposing any specific CSS styling at all. Just the mechanism for users of MW to style links.

MediaWiki generates a few classes like this, including .extiw (all interwiki links), .mw-redirect (links to redirects), .mw-disambig (links to disambiguation pages) and .new (links to non-existing pages).

However, I don't think new classes necessary for your use case. You can style those links using attribute selectors in CSS instead of class selectors. For example:

a[href^="https://www.mediawiki.org/"] {
    color: orange !important; /* !important to override styles for .extiw */
}

a[title^="Category:"] {
    color: green;
}
Aklapper triaged this task as Lowest priority.Mar 18 2020, 2:20 PM