VisualEditor: CSS munging causing absolutely-positioned chess diagrams(?) to break
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	jayvdb
	Jul 24 2013, 8:41 AM

Description

A very common chess template on many Wikipedias recommends using '|=' , and most instances of chess boards use this syntax
https://en.wikipedia.org/wiki/Template:Chess_diagram#Standard_diagram
https://de.wikipedia.org/wiki/Vorlage:Schachbrett#Standarddiagramm

On German Wikipedia, editing the template strips the '=' signs. This article is on the parsoid topfails
https://de.wikipedia.org/wiki/Edward_Lasker?veaction=edit
http://parsoid.wmflabs.org:8001/topfails/1

There are 900 uses of these chess templates on German Wikipedia.
https://de.wikipedia.org/w/index.php?title=Spezial:Linkliste/Vorlage:Schachbrett&limit=750
https://de.wikipedia.org/w/index.php?title=Spezial:Linkliste/Vorlage:Schachbrett-klein&limit=115
A few more of
https://de.wikipedia.org/wiki/Vorlage:Schachbrett-10x10
https://de.wikipedia.org/wiki/Vorlage:Schachbrett-8x10
https://de.wikipedia.org/wiki/Vorlage:Schachbrett-Chaturanga

The syntax is used on many other WPs, incl. eswp, frwp, plwp and ruwp
https://es.wikipedia.org/wiki/Plantilla:Diagrama_de_ajedrez#Diagrama_est.C3.A1ndar
https://fr.wikipedia.org/wiki/Mod%C3%A8le:Diagramme_d%27%C3%A9checs
https://fr.wikipedia.org/wiki/Alexandre_Alekhine
https://pl.wikipedia.org/wiki/Szablon:SzachyDiagram
https://ru.wikipedia.org/wiki/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD:%D0%A8%D0%B0%D1%85%D0%BC%D0%B0%D1%82%D0%BD%D0%B0%D1%8F_%D0%B4%D0%B8%D0%B0%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0

On English, the VE UI can go into massive layout problems, but the UI issues may all be due to the Parsoid issue.
https://en.wikipedia.org/wiki/French_Defence?veaction=edit
The number of uses on enwp appears to be in the same ballpark as dewp
https://en.wikipedia.org/w/index.php?title=Special:WhatLinksHere/Template:Chess_diagram&limit=900

Version: unspecified
Severity: minor
See Also:
T55226: VisualEditor: CSS munging causing absolutely-positioned <div>s used to create pie charts(!) to break
T53166: VisualEditor: CSS munging causing CSS image cropping template {{Css Image Crop}} to display wrong portion of image
T73404: VisualEditor: Letters getting added and duplicated on pages featuring chess templates

Details

Reference: bz51932

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		None	T53932 VisualEditor: CSS munging causing absolutely-positioned chess diagrams(?) to break
		Resolved		Esanders	T52577 VisualEditor: Reconsider CSS content munging

Event Timeline

• bzimport raised the priority of this task from to Low.Nov 22 2014, 2:07 AM

• bzimport added a project: VisualEditor-ContentEditable.

• bzimport set Reference to bz51932.

jayvdb created this task.Jul 24 2013, 8:41 AM

An alternative 'pretty' syntax that doesnt cause breakages is:

https://de.wikipedia.org/w/index.php?title=Edward_Lasker&diff=120835751&oldid=120194113

The html comments are visible in the parameters of the template dialog, but it stops the dirty diffs if this |= syntax is not desirable.

Hmm .. strange. When I copied both forms of the syntax into a file and parse it with Parsoid, the html renders just fine. Curious why it breaks in VE however.

Verifiable here: http://parsoid.wmflabs.org/_wikitext/

Paste this there and scroll down past the literal html and you'll see this rendered correctly there.

{{Infobox chess opening

openingname = French Defence
image = {{Chess diagram	=
=
rd	nd	bd	qd	kd	bd	nd	rd	=
pd	pd	pd	pd		pd	pd	pd	=
				pd	__	__	__	=
		__		__	__	__	__	=
		__		pl	__	__	__	=
		__	__	__	__	__	__	=
pl	pl	pl	pl	__	pl	pl	pl	=
rl	nl	bl	ql	kl	bl	nl	rl	=

}}

moves=1.e4 e6

ECO=C00–C19

birth =

nameorigin = London vs. Paris correspondence match (1834–36)

parentopening = [[King's Pawn Game]]

AKA =

chessgid=39913&move=2&moves=e4.e6&nodes=21720.39913

}}

Moving to visual editor in case there is something about the Parsoid output that is causing broken layout in the "|=" form of chess-board syntax. Please assign to Parsoid if there is a bug here in our output.

Also at https://fr.wikipedia.org/w/index.php?title=Tour_(%C3%A9checs)&diff=96381943&oldid=95391142 .

Jdforrester-WMF added a project: VisualEditor.Nov 24 2014, 4:04 PM

Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.Nov 24 2014, 4:24 PM

There are no screenshots here to show how it used to be broken, but it seems to behave correctly now.

matmarex closed this task as Resolved.Apr 19 2015, 9:05 PM

matmarex set Security to None.

matmarex mentioned this in T53166: VisualEditor: CSS munging causing CSS image cropping template {{Css Image Crop}} to display wrong portion of image.Apr 19 2015, 9:07 PM

matmarex updated the task description. (Show Details)

matmarex mentioned this in T55226: VisualEditor: CSS munging causing absolutely-positioned <div>s used to create pie charts(!) to break.

matmarex closed subtask T52577: VisualEditor: Reconsider CSS content munging as Resolved.Apr 21 2015, 11:28 AM

Jdforrester-WMF added a project: VisualEditor pre-2015 work.Aug 5 2015, 12:28 AM