Module talk:Chessboard

Bug

Making the icons use position:absolute (i.e. inside a div instead of a table) caused an obscure and probably coincidental css rule for nested elements to give each of them a white background, effectively negating the svg/png transparency, to wit:

div.thumb div a img {
    background-color: #FFFFFF;
}

I tracked this down in Firebug as having originated from the following url:

http://bits.wikimedia.org/en.wikipedia.org/load.php?debug=false&lang=en&modules=site&only=styles&skin=monobook&*

My edit to this module fixed the visual problem immediately by conveniently removing element "a" from the hierarchy and dodging the above css rule (see before & after screen-shot taken from Template:Chess diagram/doc) but I'm amazed nobody else had complained about it. If we really do want each chess-piece icon to link to the image page as they did before my edit, we will need some superseding CSS rule to work around this bug. ―cobaltcigs 09:20, 9 June 2013 (UTC)[reply]

thank you. it's possible that this was recently-introduced. I have made a corresponding change to Module:Chessboard mxn, which probably wasn't necessary, since that template doesn't use transparent backgrounds, but it will make lack-of-link consistent. Frietjes (talk) 16:02, 9 June 2013 (UTC)[reply]

thank you for reporting the problem. however, your solution caused collateral damage: when removing the "a" from the hierarchy (by adding link="), we lose the tooltip, which, for each piece, gave the square algebraic notation ("e6" etc.), the color and the piece name. i am undoing it, and instead will try something else (i think i'll just pack the image in some surreptitious element, maybe another "div" or "span" or something). i have no idea why monobook has this rule - i does not make too much sense: if such a rule is really needed, why just monobook? "div, thumb div a img" is clearly something to do with content and not interface, and i can't think of a good reason why same content with monobook should have white background to images while other skins leave the img background untouched. the correct solution, IMO, would be to remove this rule (unless someone can explain why monobook should have it). peace - קיפודנחש (aka kipod) (talk) 00:39, 10 June 2013 (UTC)[reply]

Sorry, I didn't notice we had customized/meaningful tool-tips until you told me so. My subsequent edit appears to keep them appearing by moving the title attribute (a.k.a. tool-tip) to the outer "span" element. This is the string which is normally forwarded to an "a" element from the final parameter of the [[Image:...]] syntax when parsing wikitext. A CSS rule has the same effect regardless of what elements are nested between those named in the rule. ―cobaltcigs 04:16, 10 June 2013 (UTC)[reply]

yes, i found that out... i made some experiments, such as replacing the "div" element with some other element, but didn't get anything that actually worked, and i had to get away from keyboard. one thing i did do is to leave a message to the gentleman who created this css rule (back in 2005): User talk:Omegatron#request to undo ancient edit. the reason nobody noticed until now, is that it seem that few enough people use monobook, and of those, few enough people look at chess articles... well, thatks for solving it. peace - קיפודנחש (aka kipod) (talk) 06:08, 10 June 2013 (UTC)[reply]

thanks for making the edit request. it appears this rule has now been removed, so we can go back to what we had before? Frietjes (talk) 19:39, 12 June 2013 (UTC)[reply]

Okay I've reverted it. This is not as an affirmation that linking to the svg description pages several times from every chessboard on the page is terribly important (wikibooks' boards, see e.g. QGA, have neither links nor tool-tips), only that doing so no longer obscures the square color. ―cobaltcigs 02:43, 13 June 2013 (UTC)[reply]

Bug In The Mobile Version

The styling of the chessboard breaks when using the mobile version of Wikipedia. It's really bad on Webkit, with both desktop and mobile versions of the browser (when viewing the mobile version of Wikipedia). Other browsers show somewhat broken (but still usable) layout.

To replicate

1. Go to http://en.m.wikipedia.org/wiki/Fool%27s_Mate using any Webkit-based browser, either on a desktop computer, or on a mobile device

2. Note the broken display of chessboard, esp. in the "Details" section. Example screenshot.

Explanation

The mobile version's CSS interferes with the styling of the chessboard, particularly with the padding and verical-align.

Fix

Each <td> tag's style attribute must also contain the following: padding: 0; vertical-align: inherit;. I don't know how to edit modules on Wikipedia, otherwise I might've fixed this myself.

Disclaimer

I've tested this solution on iOS Safari and Chrome, and on latest desktop Chrome, FF and IE. The fix worked in every case.

--Exizt (talk) 13:12, 11 August 2013 (UTC)[reply]

Repetitive style attributes for every single table cell would be more appropriately achieved through CSS rules. Let's say we assign some classname to the root table element in line 130, like <table class="chess-diagram" ...>. Then a CSS rule like table.chess-diagram td { padding: 0; vertical-align: inherit; etc; etc; }. The td height and width properties in place now could also be phased out by hard-coding only the total table dimensions (at 10×{{{size}}}) and employing table-layout:fixed. ―cobaltcigs 14:29, 11 August 2013 (UTC)[reply]

This is definitely preferrable, but can Wikipedia modules add their own styles? --Exizt (talk) 14:42, 11 August 2013 (UTC)[reply]

It would be great if they could. See previous thread for an example of non-coordination between template/skin maintainers. ―cobaltcigs 15:32, 11 August 2013 (UTC)[reply]

Meanwhile, could we change how the current module works? I can't find any mention of how to do so. --Exizt (talk) 15:34, 11 August 2013 (UTC)[reply]

I could try. Do you mean only the 36 border cells containing the coordinates (with 4 empty corners), or should the 8×8-spanning middle cell containing the board also have the above style properties? ―cobaltcigs 15:41, 11 August 2013 (UTC)[reply]

I went ahead and did both. How's it look? ―cobaltcigs 15:52, 11 August 2013 (UTC)[reply]

It seems we should add a "max-width: none !important" to the style of all <img>s (all pieces and chessboard itself). -Exizt (talk) 18:13, 11 August 2013 (UTC)[reply]

is there a similar problem with module:Chessboard mxn? or does the fact that that template is using a different method avoid the issue? thank you. Frietjes (talk) 18:37, 11 August 2013 (UTC)[reply]

Can you provide an example of an article that uses this module? -Exizt (talk) 19:35, 11 August 2013 (UTC)[reply]

http://en.m.wikipedia.org/wiki/Capablanca_chess ―cobaltcigs 02:00, 12 August 2013 (UTC)[reply]

http://i.imgur.com/tGSGV6z.png -- it's broken, too, but not as broken.

Editing protected css pages is in fact the only way to set style properties directly on an img tag. If you get the attention of somebody willing to do that, be sure to mention those other changes (in the interest of html reduction). ―cobaltcigs 01:57, 12 August 2013 (UTC)[reply]

You forgot to add a "vertical-align: inherit; padding: 0" to the right "8" cell (it's the last <td> in the second <tr> (the <tr> that contains the chessboard image)), and also to the empty corner <td>s (they don't have a "style" attribute specified yet). Fixing this seems to fix the layout.

However, the SVGs are still resized to become too big. To fix this, their parent <div>'s width and height must be set explicitly. So this should be added to their style attribute: "width: 23px; height: 23px;" -Exizt (talk) 09:38, 12 August 2013 (UTC)[reply]

Fixed?

So, I went ahead and changed the module myself. I've tested the fix on Chrome, mobile Chrome for iOS, and the following desktop browsers: latest Chrome, latest FF, IE7+. —Exizt (talk) 09:06, 13 August 2013 (UTC)[reply]

Highlighted pieces with red frame are not supported

Hello,

Highlighted black King on light square e8

	a	b	c	d	e	f	g	h
8	e8 k D								8
7									7
6									6
5									5
4									4
3									3
2									2
1									1
	a	b	c	d	e	f	g	h

LUA issue with uppercase color of piece kD

{{Chess diagram|=
| tright
| Highlighted black King on light square e8
|=
|rd|nd|bd|qd|kD|bd|nd|rd|=
|pd|pd|pd|pd|ua|pd|pd|pd|=
|  |  |  |  |  |  |  |  |=
|  |  |  |  |  |  |  |  |=
|  |  |  |  |  |  |  |  |=
|  |  |  |  |  |  |  |  |=
|pl|pl|pl|pl|pl|pl|pl|pl|=
|rl|nl|bl|ql|kl|bl|nl|rl|= 
| LUA issue with uppercase color of piece '''kD'''
}}

The LUA script, used in the en:WP chess diagram template, needs the transplant version of the highlighted black King Chess_kDt45.svg, which does not exist.

There are only:

the transplant version without the red frame or
the non transplant version on light and dark squares: , .

Could you fix the LUA script in order to use Chess_kDl45.svg on light square or Chess_kDd45.svg on dark square instead of the missing transplant version? Otherwise, if it is simpler, could you create the transplant highlighted pieces with red frame?

' color of piece in uppercase (D)ark or (L)ight for highlighted piece with red frame
If color of piece = "D" or "L" Then
    Use the image of the highlighted piece with red frame on a dark or light square.
    Do not use the (t)ransplant version 
    because the transplant highlighted piece with red frame does not exist.
End If

The following fully featured example can be copied and pasted in WP:SB for test (see Template:Fr 2.1 The Immortal Game diagram):

{{Chess diagram|=
| tright 
| [[Immortal Game]] (1851)
|=
 8 |rd|nd|bd|la|kD|xx|nd|rd|=
 7 |pd|  |xx|pd|ur|pd|pD|pd|=
 6 |xo|  |  |bl|  |oo|  |  |=
 5 |  |pd|bd|nl|ua|nl|  |pl|=
 4 |  |  |  |dr|pl|ua|pl|  |=
 3 |  |  |  |pl|dr|ql|  |  |=
 2 |pl|qd|pl|  |ul|dr|  |  |=
 1 |rL|ra|ra|ra|ra|kl|rL|  |=
    a  b  c  d  e  f  g  h
| Anderssen 18.Bf4-d6 versus Kieseritzky 18... Bc5xRg1 19.e4e5 {cut the long diagonal} Qb2xRa1+ 20.Kf1e2 Na6? 21.Nf5xg7+ Ke8d8 22.Qf3f6+! {Queen sacrifice} Ng8xQf6 23.Bd6e7# 1-0
}}

Nimmzo (talk) 20:15, 14 September 2013 (UTC)[reply]

Module:Chessboard mxn

Hi! I'm going to copy this module to Ukrainian Wikipedia, but I want to know one thing first before transition. Why do we need both Module:Chessboard and Module:Chessboard mxn, but not a single, general template which Module:Chessboard mxn seems to be from the first look? --DixonD (talk) 13:48, 24 September 2013 (UTC)[reply]

the Module:Chessboard uses a different method for generating the board which uses transparent image overlays, rather than generating every single square. since we have the light/dark background images for all the squares, Module:Chessboard mxn should work for everything. it may be a bit slower on boards with very few pieces, since more images need to be loaded, and the generated HTML may be a bit bigger, but it should work in all cases (as far as I can tell). Frietjes (talk) 14:37, 24 September 2013 (UTC)[reply]