Jerry's Blog  1.4.310
mi propio
next article: Data Rings
Improbable Chess Graphics
html graphics without normal image rendering
Wed March 3 2021  7:31pmComputer

The highly unlikely chess scenario pictured has a couple of interesting aspects:


At first glance, black might seem to be winning. He has all 16 of his pieces (six are still in their original position), while white has lost four of his pawns and three of his power pieces, including the queen. But a closer look shows white to be in control. In fact, he can checkmate in one move (Rf8# 1-0). That is, if it's white's turn. A third look reveals a different twist: Black is so boxed in that, if it's his turn, he has no legal move, and the match ends in a stalemate.

Fine. A pretty cool, if improbable chess situation. But this blog article is categorized under 'Computer' for a different reason: The usual method for drawing the chess pieces would be to create 11 small image files for each of the chess pieces (white queen not needed here), then include them on the grid using the html <img> tag. Another method, not available on many browsers, would be to insert raw image data bits within html elements. In either case, a browser set to not display images would render no pieces on an empty chess board. Modern browsers could use the new html5 <canvas> element in conjunction with javascript, or SVG vector graphics. But such methods are even less widely available. I want my website to work on as wide a variety of browsers as possible, including old browsers, and browsers with image rendering turned off. I think the chess game pictured here should display correctly in any such browser.

For each chess piece, pixels and groups of pixels are individually drawn using html relative positioning of <div> elements whose background color is the color of the pixel(s). So, for example, the following draws 10 black pixels starting at the top of the container html element, 17 pixels from its left side:

<div style="position:relative; top:0px; left:17px; width:10px; height:1px; background:#000;"></div>

There are, of course, a great many such <div> tags for just a single chess piece image, and I certainly didn't type each one in manually, but used server-side php scripting to generate the html code for each chess piece. Can share this php code with anyone interested; just ask. You can also do 'View Source' in your browser to see the actual html code thus generated here.

Am not real sure what practical value lies in either the chess game or the non-standard method of rendering graphics. There may yet be a practical benefit to the latter. Meanwhile, my brain and possibly yours have been occupied with some harmless noodling.

previous article: Billionth Birthsecond


- Hello, is this the Secret Service?
- I'm sorry, I can't divulge that information.

8/16/21Jerry De Pyper is NOT on Facebook 1
4/30/21Data Rings  2
3/3/21Improbable Chess Graphics
1/11/20Billionth Birthsecond 1
12/3/19Copyright/left 2
7/11/19New Math 1
11/29/18Data Security 1
12/2/17Blog End
11/16/17Meta Blog 6
Copyright (c) 2017-2022 Gerald DePyper - Jinotega, Nicaragua, C.A.
rev. 2022.01.26