Parsoid/Parser Unification/Media structure/FAQ/cs

Ú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:  ), 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ě. Tahle 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ž 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:



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 jednak 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 také jejich ostylování, takže nová struktura usnadní psaní CSS u všech projektů Wikimedie, 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:



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ěnou parseru nezpůsobila velké množství problémů najednou, zavádíme tyhle 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?

 * 1) 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.
 * 2) 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ů.
 * 3) 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?

 * 1) 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ě.
 * 2) 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.
 * 3) 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?
Prozadí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,, which currently defaults to. Site operators are encouraged to disable it and test for possible breakage. Skins that use  configured with   will receive styles targeting the new structure. In future versions of MediaWiki,  will default to   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 , 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.

The "image" class is no longer present on file description links
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

The media option is now applied to the wrapper
Previously, the class media option (e.g. ) would be applied to the media element.

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

The media option is now applied to the wrapper and the class emitted has been renamed
Previously, the border media option (e.g. ) would result in the  class being applied to the media element.

For consistency, the class has been moved to the outer wrapper and renamed to <bdi lang="zxx" dir="ltr"> to prevent conflicts.

Horizontal and vertical alignment options now place classes on the wrapper
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.

This now results in the <bdi lang="zxx" dir="ltr"> class being applied to the wrapper.