Jump to content

Parsoid/Parser Unification/Cite CSS: Difference between revisions

From mediawiki.org
Content deleted Content added
mark for transl; reduce image size for mobile-friendly; add intro sentence (copy from tech news); split out sub-list so that editing it doesn't break translations here
Updating the timeline to the current state
 
(45 intermediate revisions by 13 users not shown)
Line 1: Line 1:
<languages/>
<languages />
<translate>
<translate>
<!--T:71-->
Wikis that use localized numbering schemes for references need to add new CSS. This will help to show citation numbers the same way in all reading and editing modes. If your wiki would prefer to do it yourselves, please see the [[<tvar name=1>#Steps to implement this on your own</tvar>|details and example CSS to copy from]], and also add your wiki to the list. Otherwise, the developers will directly help out starting the week of February 5.
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]].


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


<translate>
Like all extensions, the Cite extension has localized messages. However, a significant portion of the localized messages are for formatting and for localizing the numbering scheme.
=== 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>
Parsoid uses CSS to do the number-format-specific localization of the Cite extension. This approach ensures a good editing experience in editing clients like VisualEditor. When citations are modified (added / removed), using CSS ensures that the numbers adjust automatically and consistently. Otherwise, VE (and other clients) would have to make a server request to re-render all citations each time one is added or removed which can make for a poor and inefficient experience.
=== How can I help? === <!--T:52-->


==== Current phase: on-wiki CSS cleanup for footnote markers ==== <!--T:73-->
Wikis should add appropriate CSS rules to their <code>MediaWiki:Common.css</code> file to ensure proper localization of citations in Visual Editor, given this difference in how citation number localization is done. This will become even more important as we start to migrate toward the use of Parsoid HTML for readers, not just for editing.
</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>
== Which wikis are impacted? ==
===== Example ===== <!--T:77-->


<!--T:78-->
Pretty much any wiki that uses localized numbering schemes for references is impacted. See [[<tvar name=1>Parsoid/Parser Unification/Cite CSS/Technical details</tvar>|Technical details]] for more details.
All of the examples below may be removed if they appear on your wiki.
</translate>


<syntaxhighlight lang="css">
=== Is there a way to see if my wiki is impacted? ===
/*.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>
If you open a page that has citations in VisualEditor, and the citations on the page render differently from outside VE, then your wiki needs a fix. You either needs language-specific CSS rules (already addressed in [[<tvar name=1>phab:T156350</tvar>|T156350]]), or it needs CSS rules to be added to <code>MediaWiki:Common.css</code>.

Note that you this change may only be needed on pages with named references with multiple linkbacks, OR for pages that used reference groups (like lower-alpha, etc.).


=== Project timeline === <!--T:79-->
== Is there any help writing these CSS rules? ==

The [[<tvar name=1>Content Transform Team</tvar>|Content Transform Team]] has written scripts to process language localization messages to programmatically generate CSS rules for a wiki's Common.css file. As part of visual diff testing, we have tested these rules and tweaked them a bit - mostly where the script couldn't get the CSS right to the last detail. You can see '''[[<tvar name=1>gerrit:plugins/gitiles/integration/visualdiff/+/4864618d142551533f5b002c8d0b32217453428f/lib/parsoid.custom_styles.yaml</tvar>|these rules here]]'''. For most wikis, these rules should work out of the box.

=== Verifying changes ===

Open a page in VisualEditor (after ensuring caches are purged) to see if the CSS fixes have improved the rendering of citations. Here are screenshots of a page from Hindi wikipedia demonstrating this.
</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}}
[[File:Hiwiki refs rendering in VE (before CSS changes).png|thumb|alt=This image shows a snippet of a hiwiki page being edited in Visual Editor. The image shows refs and portion of a reference list.|<translate>'''Current rendering in VisualEditor'''</translate>|none]]
* {{date|2025|02|20}} {{done}} <translate><!--T:48--> Remove on-wiki Parsoid CSS rules to localize footnote marker numbering.</translate> {{phabricator|T377458}}
[[File:Hiwiki refs rendering in VE (after CSS changes).png|thumb|alt=This image shows a snippet of a hiwiki page being edited in Visual Editor. The image shows refs and portion of a reference list.|<translate>'''After applying custom CSS rules via browser console'''</translate>|none]]
* {{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>
<!--T:55-->
This example shows how applying hiwiki specific CSS rules changes the rendering to use latin numbers for refs and hindi alphabet instead of numbers for backlinks. This new rendering matches how hiwiki displays refs and references today.
If you notice any undesirable changes to references, please leave a comment on the discussion page.


== Parsoid CSS elsewhere in Cite == <!--T:61-->
When you update your wiki's CSS rules, you should similarly be able to see changes to how the page displays citations in VisualEditor.


=== Reference list numbering === <!--T:62-->
== How do we plan to roll out these changes? ==
</translate>

{{Tracked|T378570}}
We would ideally like to see these changes rolled out everywhere by February 28, 2023.

Since this is primarily a change in how Cite localization is configured on wikis, the Content Transform Team is proposing to take on the task of adding the CSS rules to <code>MediaWiki:Common.css</code> on your wiki and verifying the changes. This might be especially beneficial to wikis that may not have the volunteer / technical resources available to roll out, test, and tweak the changes.


<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>
We will make an announcement on Tech News (and possibly other available venues as appropriate) with a link to this page and specifically, this proposal. '''If your wiki does <u>not</u> require direct assistance from us in implementing the changes, please add it to the list below'''. For these wikis, we are still around to assist and help, and we will follow up as appropriate to ensure these changes are made in a timely manner.
<translate><!--T:64--> This may as well be rewritten to use explicit numbering instead.</translate>


<translate>
=== Steps to implement this on your own ===
=== Backlink markers for reused refs === <!--T:65-->
</translate>
</translate>
{{Tracked|T383036}}


# <translate>Check [[<tvar name=1>Parsoid/Parser Unification/Cite CSS/Technical details#Localized Cite messages on a wiki</tvar>|'''the table on this page''']] to see if your wikis might be affected.</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>If you don't see your wiki listed there, there is nothing to do for your wiki.</translate>
<translate><!--T:67--> We plan to phase out numbered markers and default to alphabetic symbols localized to the wiki's content language.</translate>
<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>You can independently verify this on your own by opening a page (preferable one with at least one reference having multiple back links) and comparing the display outside VisualEditor and within VisualEditor.</translate>
# <translate>Open '''[[<tvar name=1>gerrit:plugins/gitiles/integration/visualdiff/+/4864618d142551533f5b002c8d0b32217453428f/lib/parsoid.custom_styles.yaml</tvar>|this file with CSS rules for different wikis]].'''</translate>
# <translate>Search for your wiki (xx.wikipedia.org, xx.wikitionary.org, etc.) and copy the CSS rules listed there.</translate>
#* <translate>If you think your wiki is impacted but don't see CSS rules listed here, please get in touch with us.</translate>
# <translate>Open the <code>MediaWiki:Common.css</code> page on your wiki. Paste the CSS rules you copied in step 3 above and save.</translate>
# <translate>Purge the cache for your test page by appending <code>?action=purge</code> to the page url and accept.</translate>
# <translate>Open your test page in Visual Editor and verify that the citations now render identical to how they render outside VisualEditor.</translate>
#* <translate>If the display matches, you are done.</translate>
#* <translate>If the display does not match, you may have to make additional changes -- feel free to get in touch with us for assistance.</translate>


<translate>
<translate>
=== Wikis preferring to make changes on their own ===


=== Square brackets === <!--T:68-->
If your wiki prefers to roll out and test these changes by yourselves, please '''[[Parsoid/Parser Unification/Cite CSS/Wikis that will change it by themselves|add it to the list]]''' (transcluded below), along with your signature.
</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>
{{:Parsoid/Parser Unification/Cite CSS/Wikis that will change it by themselves}}
<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>
<translate>
== Reporting bugs ==


<syntaxhighlight lang="css">
You can report bugs on Phabricator - please use the <tvar name=1><code>Parsoid</code></tvar> or <tvar name=2><code>Parsoid-Read-Views</code></tvar> tag to report your bugs.
.reference .cite-bracket {
font-size: 0;
}
</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>
== Asking for help ==
<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>
You can reach out to the Content Transform Team by posting via the Talk page for this page. You may also be able to find us on IRC, but the talk page is probably the best place since the responses there might also help others.
</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.