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: Solar Panel


Once you accept the univese as matter expanding into nothing that is something, wearing stripes with plaid comes easy.
- Albert Einstein

6/6/22Solar Panel Page
12/18/21Solar Panel Efficiency
11/27/21Bug Fix 1
11/15/21Inhuman Humanism 1
8/16/21Jerry De Pyper is NOT on Facebook 1
4/30/21Data Rings  2
3/3/21Improbable Chess Graphics
1/30/21Solar Panel 2
11/24/20Ode to Sudoku
10/7/20Version 3
8/23/20Successful Challenger 2
7/30/20Amateur Priests 1
7/23/20Doctrines, Canons, Buildings 1
7/6/204 Sudoku Challenges
6/19/20Unavoidable Rectangle
6/1/20Sudoku Challenge (2) 1
4/7/20Fear of Death 3
2/14/20Heads Up
1/11/20Billionth Birthsecond 1
12/31/19Versus-2 1
12/3/19Copyright/left 2
10/24/19DePyper 1
7/19/19Schizophrenia 4
7/11/19New Math 1
6/2/19Times and Seasons 4
11/29/18Data Security 1
10/2/18Until 7
9/15/18Empty Chair 11
8/28/18Riddle me this 6
8/1/18Sudoku Challenge Answered 3
7/4/18Unrest in Nicaragua 7
5/9/18Some Specifics
4/20/18Crisis of Authority 4
3/17/18Theocracy 2
3/1/18Self abnegation 1
12/14/17Sudoku Challenge
12/2/17Blog End
11/16/17Meta Blog 6
Copyright (c) 2017-2023 Gerald DePyper - Jinotega, Nicaragua, C.A.
rev. 2022.01.26