Jump to content

Parsoid/Parser Unification/Cite CSS: Difference between revisions

From mediawiki.org
Content deleted Content added
New project phase
Updating the timeline to the current state
 
(15 intermediate revisions by 7 users not shown)
Line 1: Line 1:
<languages />
<languages />
<translate>
<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]].
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>


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


<translate>
<translate>
=== Background === <!--T:43-->
=== Background === <!--T:43-->
</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>
<!--T:44-->
=== How can I help? === <!--T:52-->
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 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? ===


==== Current phase: on-wiki CSS cleanup for footnote markers ====
==== Current phase: on-wiki CSS cleanup for footnote markers ==== <!--T:73-->
</translate>

</translate>{{Tracked|T377458}}
{{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>

{{Note|type=info|text=<translate>
<b>Site interface admins</b>: 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.<br>During and after this transition there should be no difference for readers, this is purely a cleanup.</translate>
}}
}}


<translate>
<translate>
===== Example =====
===== Example ===== <!--T:77-->


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

</translate>
</translate>

<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
/*.mw-ref > a::after {
/*.mw-ref > a::after {
Line 44: Line 45:
.mw-ref > a[data-mw-group=georgian]::after {
.mw-ref > a[data-mw-group=georgian]::after {
content: '[' counter( mw-Ref, custom-group-label-georgian ) ']';
content: '[' counter( mw-Ref, custom-group-label-georgian ) ']';
/* <translate>And if a custom @counter-style exists only to support this rule, it can be removed as well.</translate> */
/* <translate nowrap><!--T:93--> And if a custom @counter-style exists only to support this rule, it can be removed as well.</translate> */
}
}
</syntaxhighlight>
</syntaxhighlight>


<translate>
<translate>

=== Project timeline ===
=== Project timeline === <!--T:79-->
</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>
* {{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> {{PhabT|377454}}
<!--T:55-->
* {{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> {{PhabT|382310}}
If you notice any undesirable changes to references, please leave a comment on the discussion page.
* {{date|2025|02|20}} {{in progress}} <translate><!--T:48--> Remove on-wiki Parsoid CSS rules to localize footnote marker numbering.</translate> {{PhabT|377458}}
* {{date|2025|03|20}} <translate>Development team removes any remaining on-wiki "mw-Ref" rules.</translate>
* <translate>TBD: Final cleanup of Cite code to support footnote numbering CSS.</translate> {{PhabT|386184}}
* <translate>TBD: Make backlink numbering explicit.</translate> {{PhabT|384948}}
* <translate>TBD: Make reference list numbering explicit (both parsers).</translate> {{PhabT|378570}}

<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-->
== Parsoid CSS elsewhere in Cite == <!--T:61-->
Line 69: Line 72:


<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: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 be rewritten to use explicit numbering instead.</translate>
<translate><!--T:64--> This may as well be rewritten to use explicit numbering instead.</translate>


<translate>
<translate>
Line 77: Line 80:


<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><!--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><!--T:67--> We plan to entirely get rid of the numbered markers, and default to alphabetic symbols localized to the wiki's content language.</translate>
<translate><!--T:67--> We plan to phase out numbered markers and default to alphabetic symbols localized to the wiki's content language.</translate>
These will still be customizable but through a simpler mechanism than the {{ll|Help:Cite#Set references to use ^ and letters|system messages}}.
<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>

=== Square brackets === <!--T:68-->
=== Square brackets === <!--T:68-->
</translate>
</translate>
{{Tracked|T376717}}
{{Tracked|T376717}}
<translate><!--T:69--> A new mechanism is available, which makes it possible to hide square brackets using CSS rather than by editing system messages.</translate>
<translate><!--T:84--> Some projects prefer to hide square brackets around the footnote markers.</translate>
<translate><!--T:70--> 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:</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>
Hiding the brackets entirely using "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".
<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.