Parsoid/Parser Unification/Media structure/FAQ/cs

This page is a translated version of the page Parsoid/Parser Unification/Media structure/FAQ and the translation is 53% complete.

Úvodem

Co si mohu představit pod pojmem strukturovaná média?

Je-li do kódu stránky vložen nějaký obrázek (kupř. takto: [[File:Foobar.jpg|thumb|caption|alt=alt]]), vygeneruje na jeho základě parser MediaWiki HTML kód, který popisuje, jakým způsobem má webový prohlížeč na stránku tenhle obrázek vykreslit, aby se zobrazoval na vašem monitoru či mobilním zařízení správně. Tato směs HTML značek a jejich atributů, která je součástí DOM modelu, představuje strukturu, o které se teď budeme bavit.

Co by se tedy dalo na současné struktuře vylepšit?

Současná struktura HTML kódu je složena z vnořených značek div s atributy tříd, které nemají v podstatě žádný velký význam. Ty značky nejsou stejné, což s sebou přináší problémy jak při práci s databází, tak při tvorbě stylů. A současný výstup vypadá jinak, než když je generován přes jiné produkty, například přes kombinaci VisualEditor / Parsoid. Podrobněji je to popsáno v RFC. Výstup výše uvedeného kódu vypadá v současné době takto:

<div class="thumb tright">
    <div class="thumbinner" style="width:242px;">
        <a href="/wiki/File:Foobar.jpg" class="image"><img alt="alt" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="thumbimage" /></a>
        <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Foobar.jpg" class="internal" title="Enlarge"></a></div>caption</div>
    </div>
</div>

Takže čím ji chcete nahradit?

Struktura, kterou bychom chtěli použít místo toho, se skládá ze sémantických značek, což přináší výhody z hlediska přístupnosti stránek zdravotně postiženým, například těm, co čtou wiki pomocí čteček obsahu obrazovky, kterým poskytují víc informací o tom, jaké obrázky, videa či jiné multimediální soubory jsou na stránce použity. Struktura značek tak bude jasná a přesně specifikovaná, což usnadní nejenom psaní dotazů na strukturu kódu, ale také jejich ostylování, takže nová struktura usnadní psaní CSS u všech projektů Wikimedia, kde se pracuje s obrázky. Aplikace stejné struktury, jaká byla odzkoušena pro Parsoid, tím navíc zajistí konzistenci mezi různými produkty a omezí některé duplicity, které se vyskytují ve stávajícím CSS kódu. Výstup výše uvedeného ukázkového kódu by pak vypadal asi takto:

<figure class="mw-default-size" typeof="mw:File/Thumb">
    <a href="/wiki/File:Foobar.jpg" class="mw-file-description">
        <img alt="alt" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" />
    </a>
    <figcaption>caption</figcaption>
</figure>

A proč to děláte zrovna teď?

Střednědobým cílem týmu pro transformaci obsahu WMF je nahradit původní parser MediaWiki novým, který již má podporu pro obousměrné zpracování wikitextu do HTML5. A proto je potřeba, aby oba, jak původní parser, tak Parsoid, generovaly kompatibilní HTML kód. Parsoid už tuhle novou strukturu generuje už delší dobu a s dobrým výsledkem. Aby výměna parseru nezpůsobila velké množství problémů najednou, zavádíme tyto změny postupně, aby bylo možné se zavčas připravit na změny s tím spojené, a také na směny, které v důsledku toho teprve nastanou.

A jak se to testuje?

Tahle nová struktura byla odzkoušena tam, který se již Parsoid používá, jako např. u wysiwyg editoru či v rámci mobilních aplikací. Redaktoři a čtenáři, kteří s těmito produkty pracovali, upozorňovali na rozdíly ve vykreslování ve staré struktuře a na problémy, které jsme tak díky nim v průběhu let odstranili.
Kromě toho jsme opakovaně provedli několik testů vizuálních rozdílů, při kterých byly tisíce stránek vygenerovány jak starou, tak novou metodou strukturování kódu, a výsledek jejich zpracování porovnáván až na úrovni pixelů.
Ke změně už také došlo u několika wiki, včetně mediawiki.org, wikitech, it.wikipedia.org, cs.wikipedia.org, vi.wikipedia.org, en.wikivoyage.org a všech skupin 0 wiki.

Co tedy ještě zbývá dodělat?

Kód, který komunikuje se stránkou, jako např. JavaScript používaný u některých rozšíření, uživatelské skripty a drobné miniaplikace (gadgets) používané na stránkách, které je potřeba přizpůsobit nové struktuře, tak aby vše zůstalo (jak doufáme) kompatibilním nejenom do budoucna, ale i zpětně.
Také vzhledy (skiny) budou muset začít pracovat s metodou "content-media" nebo dát k dispozici své vlastní používané styly, protože třídy, které byly určeny pro práci se starou strukturu se již nebudou používat.
Některé wiki používají CSS styly, které mají umístěny na stránce MediaWiki:Commons.css, a ty bude nejspíš potřeba nějakým způsobem integrovat i do nové struktury.

A od kdy se to zavede?

Jak bylo uvedeno výše, na několika wiki se to již používá. Nebudeme však v integraci pokračovat, dokud nebudou vyřešeny všechny známé problémy a dokud neprovedeme určitou úroveň auditu uživatelských skriptů a miniaplikací, abychom se ujistili, že čtenářům a editorům způsobí co nejméně problémů.

A jak je to bude s obrazovými mapami a galeriemi?

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.

A co šablony napodobující výstup parseru?

Prozatím budou soubory stylů dodávané MediaWiki i nadále obsahovat pravidla zaměřená na výstup ze starého parseru. Proto by šablony, které ho napodobují, měly fungovat beze změn. Jak bylo uvedeno výše, udělali jsme rozsáhlé testování vizuálních rozdílů, abychom se ujistili, že se stránky budou po změně vykreslovat stejně jako před ní. V dlouhodobém horizontu uvažujeme o zavedení nových tříd, do kterých bychom tyto šablony převedli. Více k tomu na stránce T318433.

What about site owners operating their own instances of MediaWiki?

A MediaWiki config exists, $wgParserEnableLegacyMediaDOM , which currently defaults to true. Site operators are encouraged to disable it and test for possible breakage. Skins that use ResourceLoaderSkinModule configured with "features": { "content-media": true } will receive styles targeting the new structure. In future versions of MediaWiki, $wgParserEnableLegacyMediaDOM will default to false and, eventually, be removed entirely.

Mohu s tím nějak pomoci?

Otestujte svůj kód na wiki, na které jsme to již nasadili. A pokud zjistíte nějaké problémy, které nejsou popsány níže, založte prosím nový úkol s tagem Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure), nebo se podívejte na seznam aktuálně řešených úkolů, jestli tam už náhodou něco podobného v řešení není.

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.

What should editors look out for?

The "image" class is no longer present on file description links

By default, a file (e.g. [[File:Foobar.jpg]]) will link to its description page and would previously be given a class named image.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" /></a>

In contrast, an explicit link (e.g. [[File:Foobar.jpg|link=Hello]]) would not result in that class being applied.

<a href="/wiki/Hello" title="Hello"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" /></a>

In the new structure, the class serving the same purpose has been renamed to mw-file-description.

<span class="mw-default-size" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>

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

The `|class=` media option is now applied to the wrapper

Previously, the class media option (e.g. [[File:Foobar.jpg|class=my_special_class]]) would be applied to the media element.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="my_special_class" /></a>

The class has been moved to the outer wrapper, in order to allow the most flexibility when selecting within the structure.

<span class="mw-default-size my_special_class" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>

The `|border` media option is now applied to the wrapper and the class emitted has been renamed

Previously, the border media option (e.g. [[File:Foobar.jpg|border]]) would result in the thumbborder class being applied to the media element.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="thumbborder" /></a>

For consistency, the class has been moved to the outer wrapper and renamed to mw-image-border to prevent conflicts.

<span class="mw-default-size mw-image-border" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>

Horizontal and vertical alignment options now place classes on the wrapper

The horizontal alignment options include left, right, center, and none. The vertical alignment options include baseline, sub, super, top, text-top, middle, bottom, and text-bottom.

For example, previously, the center media option (e.g. [[File:Foobar.jpg|center]]) would result in the center class being applied to a wrapping div.

<div class="center"><div class="floatnone"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" /></a></div></div>

This now results in a figure with the mw-halign-center class.

<figure class="mw-default-size mw-halign-center" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a><figcaption></figcaption></figure>

Similarly, the top media option (e.g. [[File:Foobar.jpg|top]]) would previously result a style attribute being applied to the media element.

<a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" style="vertical-align: top" /></a>

This now results in the mw-valign-top class being applied to the wrapper.

<span class="mw-default-size mw-valign-top" typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg" decoding="async" width="240" height="28" class="mw-file-element" /></a></span>