Jump to content

Parsoid/Parser Unification/Cite CSS: Difference between revisions

From mediawiki.org
Content deleted Content added
breadcrumbs for backlinks and square brackets
Updating the timeline to the current state
 
(23 intermediate revisions by 8 users not shown)
Line 1: Line 1:
<languages />
<languages />
<translate>
<!--T:71-->
This page describes features being actively worked on by the [[<tvar name=1>m:Special:MyLanguage/WMDE Technical Wishes</tvar>|Wikimedia Germany Technical Wishes team]] as part of their ongoing focus area [[<tvar name=2>m:Special:MyLanguage/WMDE Technical Wishes/Reusing references</tvar>|reusing references]].


== <translate>Parsoid CSS for footnote numbering</translate> ==
== Parsoid CSS for footnote numbering == <!--T:42-->
</translate>
{{Tracked|T370027}}
{{Tracked|T370027}}


=== <translate>Background</translate> ===
<translate>
<translate>
=== Background === <!--T:43-->
Wikis that use localized numbering schemes for references (eg. [۶] on Persian Wikipedia) currently need to rely on specific CSS styling so that the Parsoid and VisualEditor output is the same as what’s currently visible to readers.

Some changes around the mechanics of how these numbers are rendered will allow us to get rid of that customized CSS styling. This will further align the output of the parser that’s currently in place with Parsoid and will also help us to improve the experience for VisualEditor users, especially in situations where custom group markers were used.
</translate>
</translate>
<translate><!--T:44--> Wikis that use localized numbering schemes for references (e.g. <tvar name=1><code>[۶]</code></tvar> on Persian Wikipedia) currently rely on CSS styling in <tvar name=2>{{ll|Parsoid}}</tvar> read mode and in <tvar name=3>{{ll|VisualEditor}}</tvar>.</translate>
<translate><!--T:72--> The original parser localizes the markers as plain HTML, and we will move towards rendering plain HTML from Parsoid as well.</translate>


=== <translate>What will change?</translate> ===
<translate>
<translate>
=== How can I help? === <!--T:52-->
The Parsoid CSS rules that made sure the correct numbering scheme is used are not needed anymore. The right numbers are part of the HTML output, same as it’s done in the legacy parser.


==== Current phase: on-wiki CSS cleanup for footnote markers ==== <!--T:73-->
On 20 January we will deploy changes that override the local global CSS styles responsible for the Parsoid numbering schemas and will de-facto disable them.

There should be no noticeable, user-facing differences.
</translate>
</translate>
{{Tracked|T377458}}
{{Note|type=info|text={{anchor|mw-Ref removal}}'''<translate><!--T:74--> Site interface admins</translate>''' - <translate><!--T:75--> You can help by removing all "<tvar name=1>mw-Ref</tvar>" rules on your site, if possible between {{date|2025|02|20}} and {{date|2025|03|20}}, otherwise the development team will assist your wiki in making these changes.</translate><br /><translate><!--T:76--> During and after this transition there should be no difference for readers, this is purely a cleanup.</translate>
}}


=== <translate>How can I help?</translate> ===
<translate>
<translate>
===== Example ===== <!--T:77-->
After this change is deployed there will be a waiting period of one month (from 20 January until 20 February) to be sure the change doesn't have unintended effects on the footnote numbers.  During this period, please check the appearance of footnote markers in Parsoid mode and in Visual Editor, to verify that they match the symbols that appear in regular output.  If you notice any undesirable changes please leave a comment on the discussion page.

<!--T:78-->
All of the examples below may be removed if they appear on your wiki.
</translate>
</translate>


<syntaxhighlight lang="css">
{{Notice|text=<translate>We ask you to not immediately delete the on-wiki customizations until 20 February, in case it becomes necessary to revert our Cite improvements.</translate>}}
/*.mw-ref > a::after {
content: '[' counter( mw-Ref, decimal ) ']';
}*/
.mw-ref > a[data-mw-group]::after {
content: '[' attr( data-mw-group ) ' ' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
content: '[' counter( mw-Ref, lower-alpha ) ']';
}
.mw-ref > a[data-mw-group=kurdish-alpha]::after {
content: '[' counter( mw-Ref, kurdish-alpha ) ']';
}
.mw-ref > a[data-mw-group=georgian]::after {
content: '[' counter( mw-Ref, custom-group-label-georgian ) ']';
/* <translate nowrap><!--T:93--> And if a custom @counter-style exists only to support this rule, it can be removed as well.</translate> */
}
</syntaxhighlight>


<translate>
<translate>
The visual diff checker is also being used to help verify that footnote markers are identical with normal output.


=== Project timeline === <!--T:79-->
Starting from 20 February, the deprecated CSS rules can be removed from the project's MediaWiki:Common.css file. Wikis that prefer to make that change on their own can do so, otherwise we’ll clean it up for you. There’s a list of changes showing where and when these CSS rules were added that you can use as a reference: [[Parsoid/Parser Unification/Cite CSS/Change Log|Cite_CSS/Change_Log]]

The migration concludes with the removal of the setting that overrules the deprecated CSS rules, and removing all supporting code from Cite.
</translate>
</translate>
* {{date|2024|11|05}} {{done}} <translate><!--T:49--> The localized footnote numbers are included in Parsoid HTML, same as is done in the legacy parser.</translate> {{phabricator|T377454}}
* {{date|2025|01|20}} {{done}} <translate><!--T:50--> Override the local and global CSS styles responsible for the Parsoid footnote markers and de-facto disable them so that only the HTML is visible.</translate> {{phabricator|T382310}}
* {{date|2025|02|20}} {{done}} <translate><!--T:48--> Remove on-wiki Parsoid CSS rules to localize footnote marker numbering.</translate> {{phabricator|T377458}}
* {{date|2025|03|20}} {{done}} <translate><!--T:80--> Development team removes any remaining on-wiki "mw-Ref" rules.</translate>
* {{date|2025|03|27}} {{done}} <translate><!--T:81--> Final cleanup of Cite code to support footnote numbering CSS.</translate> {{phabricator|T386184}}
* <translate><!--T:82--> TBD: Make backlink numbering explicit.</translate> {{phabricator|T384948}}
* <translate><!--T:83--> TBD: Make reference list numbering explicit (both parsers).</translate> {{phabricator|T378570}}


<translate>
== <translate>Parsoid CSS elsewhere in Cite</translate> ==
<!--T:55-->
If you notice any undesirable changes to references, please leave a comment on the discussion page.


== Parsoid CSS elsewhere in Cite == <!--T:61-->
=== <translate>Backlink markers for reused refs</translate> ===

{{Tracked|T383036}}
=== Reference list numbering === <!--T:62-->
</translate>
{{Tracked|T378570}}

<translate><!--T:63--> Reference lists are still rendered using browser counter styling on the &lt;li> tag, which is error-prone and doesn't support all languages.</translate>
<translate><!--T:64--> This may as well be rewritten to use explicit numbering instead.</translate>


<translate>
<translate>
=== Backlink markers for reused refs === <!--T:65-->
The backlink markers ("1.0, 1.1" or "a, b, c") on reused references in the reference list will also be changed but in a later phase of work. We plan to entirely get rid of the numbered markers, and default to alphabetic symbols localized to the wiki's content language. These will still be customizable but through a simpler mechanism than the [[Help:Cite#Set_references_to_use_^_and_letters|system messages]].
</translate>
</translate>
{{Tracked|T383036}}


<translate><!--T:66--> The backlink markers ("1.0, 1.1" or "a, b, c") on reused references in the reference list will also be changed but in a later phase of work.</translate>
=== <translate>Square brackets</translate> ===
<translate><!--T:67--> We plan to phase out numbered markers and default to alphabetic symbols localized to the wiki's content language.</translate>
{{Tracked|T376717}}
<translate><!--T:94--> These will still be customizable but through a simpler mechanism than the {{<tvar name=1>ll|Help:Cite#Set references to use ^ and letters</tvar>|system messages}}.</translate>


<translate>
<translate>

A new mechanism is available, which makes it possible to hide square brackets using CSS rather than by editing system messages. This can be accomplished using the following CSS in MediaWiki:Common.css or in your use stylesheet, and has the advantage of making the square brackets still show up when copy-pasting as unformatted text:
=== Square brackets === <!--T:68-->
</translate>
</translate>
{{Tracked|T376717}}
<translate><!--T:84--> Some projects prefer to hide square brackets around the footnote markers.</translate>
<translate><!--T:85--> Currently this is done by adding custom CSS classes around brackets in the local <tvar name=1>[[MediaWiki:Cite reference link]]</tvar> message and custom rules to <tvar name=2>[[MediaWiki:Common.css]]</tvar>.</translate>
<translate><!--T:86--> This is not supported by Parsoid and VisualEditor.</translate>

<translate><!--T:87--> Now there's a mechanism available that's compatible with Parsoid and VisualEditor which makes it possible to hide square brackets just using CSS rather than by editing system messages.</translate>
<translate><!--T:88--> It's also working with the legacy parsing and can be used there when <tvar name=1>[[MediaWiki:Cite reference link]]</tvar> is unchanged or changes in there reverted.</translate>

<translate><!--T:89--> Hiding the square brackets should now be done using the following CSS in <tvar name=1>MediaWiki:Common.css</tvar> or in [[<tvar name=2>Special:MyPage/common.css</tvar>|your user stylesheet]]:</translate>


<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
.mw-ref .cite-bracket {
.reference .cite-bracket {
font-size: 0;
font-size: 0;
}
}
</syntaxhighlight>
</syntaxhighlight>

<translate><!--T:90--> Using <tvar name=1><code>font-size: 0</code></tvar> has the advantage of making the square brackets still show up when copy-pasting as unformatted text.</translate>
<translate><!--T:91--> <tvar name=1><code>display: none</code></tvar> is not recommended because this will remove the brackets from the content in most browsers, leading to confusing copy-paste such as <tvar name=2><code>2025<sup>[1]</sup></code></tvar> turning to <tvar name=3><code>20251</code></tvar>.</translate>

<translate><!--T:92--> Ideally affected projects with <tvar name=1>[https://global-search.toolforge.org/?q=.&regex=1&namespaces=8&title=Cite+reference+link customized Cite_reference_link message]</tvar> could remove this message altogether when they tweaked their CSS rules.</translate>

Latest revision as of 12:46, 5 August 2026

This page describes features being actively worked on by the Wikimedia Germany Technical Wishes team as part of their ongoing focus area reusing references.

Parsoid CSS for footnote numbering

[edit | edit source]

Background

[edit | edit source]

Wikis that use localized numbering schemes for references (e.g. [۶] on Persian Wikipedia) currently rely on CSS styling in Parsoid read mode and in VisualEditor . The original parser localizes the markers as plain HTML, and we will move towards rendering plain HTML from Parsoid as well.

How can I help?

[edit | edit source]

Current phase: on-wiki CSS cleanup for footnote markers

[edit | edit source]
Site interface admins - You can help by removing all "mw-Ref" rules on your site, if possible between and , otherwise the development team will assist your wiki in making these changes.
During and after this transition there should be no difference for readers, this is purely a cleanup.
Example
[edit | edit source]

All of the examples below may be removed if they appear on your wiki.

/*.mw-ref > a::after {
    content: '[' counter( mw-Ref, decimal ) ']';
}*/
.mw-ref > a[data-mw-group]::after {
    content: '[' attr( data-mw-group ) ' ' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
    content: '[' counter( mw-Ref, lower-alpha ) ']';
}
.mw-ref > a[data-mw-group=kurdish-alpha]::after {
    content: '[' counter( mw-Ref, kurdish-alpha ) ']';
}
.mw-ref > a[data-mw-group=georgian]::after {
    content: '[' counter( mw-Ref, custom-group-label-georgian ) ']';
    /* And if a custom @counter-style exists only to support this rule, it can be removed as well. */
}


Project timeline

[edit | edit source]
  • Yes Done The localized footnote numbers are included in Parsoid HTML, same as is done in the legacy parser. T377454
  • Yes Done Override the local and global CSS styles responsible for the Parsoid footnote markers and de-facto disable them so that only the HTML is visible. T382310
  • Yes Done Remove on-wiki Parsoid CSS rules to localize footnote marker numbering. T377458
  • Yes Done Development team removes any remaining on-wiki "mw-Ref" rules.
  • Yes Done Final cleanup of Cite code to support footnote numbering CSS. T386184
  • TBD: Make backlink numbering explicit. T384948
  • TBD: Make reference list numbering explicit (both parsers). T378570

If you notice any undesirable changes to references, please leave a comment on the discussion page.

Parsoid CSS elsewhere in Cite

[edit | edit source]

Reference list numbering

[edit | edit source]

Reference lists are still rendered using browser counter styling on the <li> tag, which is error-prone and doesn't support all languages. This may as well be rewritten to use explicit numbering instead.

[edit | edit source]

The backlink markers ("1.0, 1.1" or "a, b, c") on reused references in the reference list will also be changed but in a later phase of work. We plan to phase out numbered markers and default to alphabetic symbols localized to the wiki's content language. These will still be customizable but through a simpler mechanism than the system messages .


Square brackets

[edit | edit source]

Some projects prefer to hide square brackets around the footnote markers. Currently this is done by adding custom CSS classes around brackets in the local MediaWiki:Cite reference link message and custom rules to MediaWiki:Common.css. This is not supported by Parsoid and VisualEditor.

Now there's a mechanism available that's compatible with Parsoid and VisualEditor which makes it possible to hide square brackets just using CSS rather than by editing system messages. It's also working with the legacy parsing and can be used there when MediaWiki:Cite reference link is unchanged or changes in there reverted.

Hiding the square brackets should now be done using the following CSS in MediaWiki:Common.css or in your user stylesheet:

.reference .cite-bracket {
  font-size: 0;
}

Using font-size: 0 has the advantage of making the square brackets still show up when copy-pasting as unformatted text. display: none is not recommended because this will remove the brackets from the content in most browsers, leading to confusing copy-paste such as 2025[1] turning to 20251.

Ideally affected projects with customized Cite_reference_link message could remove this message altogether when they tweaked their CSS rules.