Parsoid/Parser Unification/Media structure/FAQ/fr

Présentation


Qu'entend-on par structure de média ?
When files are included in a page (example:  ), MediaWiki's parser outputs some HTML that represents that media for your browser to render – the instructions for the browser so that it is correctly shown on your screen. The choice of HTML tags and attributes, and how they are arranged to form a DOM tree, are the structure we're considering.



Que peut-on améliorer dans la structure actuelle ?
The current structure is composed of nested div tags and class attributes, which don't convey much meaning. The markup is irregular, making it harder to query and style. And the current output differs from that of other products, like the VisualEditor / Parsoid combo. See the RFC for the finer details. The output for the example above looks like this currently:



Par quoi remplacer ?
The structure we're replacing it with is composed of semantic markup, which will provide accessibility benefits, such as giving those who read the wikis using screenreaders more information about how images, videos and other media are used within the content. The markup will be more regular and specified, making it easier and more efficient to query and style, meaning that the new structure will make it easier for anyone writing CSS related to media on the Wikimedia wikis. Moreover, using the same structure that has been piloted in Parsoid will provide consistency between products and reduce some CSS redundancy. The output for the example above will look like this:



Pourquoi le faire maintenant ?
A medium term goal of the Content Transform Team at the WMF is to replace MediaWiki's legacy parser with Parsoid, a bidirectional wikitext to HTML5 parser. In order to get there, the legacy parser and Parsoid need to produce compatible HTML. Parsoid has been generating this new media structure for quite some time, to good effect. In order to lessen the disruption of changing parsers all at once, we're rolling out an isolated piece in preparation for further changes to come.



Comment cela a-t-il été testé ?

 * 1) The new structure has been piloted in Parsoid which is used in several active products like Visual Editor and the mobile apps. As editors and readers used these products, they flagged rendering differences with the old structure and problems with the new structure, which we've fixed over the years.
 * 2) In addition, we've done several rounds of visual difference testing where thousands of pages are rendered with the old and new structure and the rendering compared at a pixel level.
 * 3) We've also already deployed this change to several wikis, including mediawiki.org, wikitech, it.wikipedia.org, cs.wikipedia.org, vi.wikipedia.org, en.wikivoyage.org, and all the group 0 wikis.

Que reste-t-il à faire ?

 * 1) Code that interacts with the page, like JavaScript for extensions, user scripts and gadgets will need to be adjusted to the new structure, hopefully in a forwards and backwards compatible way.
 * 2) Skins will need to ask for the "content-media" feature or provide their own styling, since classes targeting the old structure won't apply.
 * 3) Some wikis have CSS in MediaWiki:Commons.css that will need to be ported to the new structure.

Quand allez-vous déployer cela ?
As above, it's already live on several wikis. However, we won't continue to push forward until the known issues are addressed and we've done some level of auditing of user scripts and gadgets to ensure we're causing as little disruption to readers and editors as possible.

What about imagemaps and galleries?
The output for these extension tags builds on the media structure outlined above. They are specified at, respectively, ImageMap and Gallery. Note that further refining of the gallery output may happen in T268250.

What about templates that mimic the parser output?
For now, the stylesheets shipped by MediaWiki will continue to contain the rules that target the old parser output. Therefore templates that mimic it should continue to work unchanged. As mentioned above, we've done extensive visual difference testing to ensure that pages continue to render the same before and after these changes. In the longer term, we are discussing introducing new classes for these templates to migrate towards. See T318433 for details.



Comment aider
Test your code on the wikis we've deployed to. If you find any problems that are not covered below, please file tasks with the tag , or see the list of open tasks.

Copy known fixes to gadgets enabled on your wikis
A number of gadgets were identified as needing to be updated to support the new media structure. Fixes were applied to the source of the gadgets but the changes still need to propagate out to all the wikis that have duplicated the gadgets locally. See the task description of T297447 for the list of gadgets and wikis where the gadgets are enabled. If yours haven't been updated, please do so.

Copy known fixes to MediaWiki:Common.(css|js) to your wikis
A number of issues with site specific css and js were identified as needing to be updated to support the new media structure. See the task description of T271114 for the list of known issues common to multiple wikis and the wikis that may need to be updated. If yours haven't been updated, please do so.



Ce que les contributeurs doivent rechercher


La classe image n'apparaît plus dans les liens de description des fichiers
By default, a file (e.g. ) will link to its description page and would previously be given a class named .

In contrast, an explicit link (e.g. ) would not result in that class being applied.

In the new structure, the class serving the same purpose has been renamed to .

Selectors should target the new class, where appropriate. For example, see https://www.mediawiki.org/w/index.php?title=Snippets%2FDirect_imagelinks_to_Commons&type=revision&diff=5451422&oldid=3976429



L'option de média est maintenant appliquée au conteneur
Previously, the class media option (e.g. ) would be applied to the media element.

La classe a été déplacée vers le conteneur (wrapper) le plus externe afin de permettre le plus de flexibilité possible lors de la sélection à l'intérieur de la structure.

<span id="The_|border_media_option_is_now_applied_to_the_wrapper_and_the_class_emitted_has_been_renamed">

L'option de média est maintenant appliquée au conteneur et la classe émise a été renommée
Previously, the border media option (e.g. ) would result in the <bdi lang="zxx" dir="ltr"> class being applied to the media element.

Par cohérence, la classe a été déplacée vers le conteneur le plus externe et a été renommée en <bdi lang="zxx" dir="ltr"> pour éviter les conflits.

<span id="Horizontal_and_vertical_alignment_options_now_place_classes_on_the_wrapper">

Les options d'alignement horizontal et vertical placent maintenant les classes sur le conteneur
The horizontal alignment options include. The vertical alignment options include.

For example, previously, the center media option (e.g. ) would result in the <bdi lang="zxx" dir="ltr"> class being applied to a wrapping div.

This now results in a figure with the <bdi lang="zxx" dir="ltr"> class.

Similarly, the top media option (e.g. ) would previously result a style attribute being applied to the media element.

Il en résulte que la classe <bdi lang="zxx" dir="ltr"> est maintenant appliquée au conteneur.