Once
Go presentation elements are defined and
developed the task of presentation of any Go position can be easily
accomplished. It requires only a text editor (my long time preference is
QuickEdit), and a very basic understanding of HTML.
Go
position is a compound image that is combined using a set of 20 basic
medium size elements. (Both
small size and large
size elements can be used the same way the medium
size usage is described here.)
RTL
RT
ET
RTR
ETL
BS
ETR
EL
HS
RR
RL
EC
ER
EBL
WS
EBR
EB
RBL
RB
RBR
File Names of 20 Medium Elements (All Extensions Are JPG)
RTL
bordeR Top Left
RT
bordeR Top
RTR
bordeR Top Right
ETL
Empty Top Left
ET
Empty Top
ETR
Empty Top Right
EL
Empty Left
BS
Black Stone
HS
HoSi
RR
bordeR Right
RL
bordeR Left
EC
Empty Center
WS
White Stone
ER
Empty Right
EBL
Empty Bottom Left
EB
Empty Bottom
EBR
Empty Bottom Right
RBL
bordeR Bottom Left
RB
bordeR Bottom
RBR
bordeR Bottom Right
Compound
image of Go position gets presented as HTML table consisting of the cells
each of which contains an image of appropriate Go element (reference to
a *.JPG file from the table above). In order for the compound
image to be a contiguous one the table border display, padding of cells with
extra space, and inserting additional space between table cells should be
explicitly suppressed by setting the corresponding <TABLE>
parameters to zero.
It
is beneficial (though tedious) to specify the size of each cell (obviously
being equal to the size of the corresponding element image). Browser can
derive cell size from the image size, but this slows page loading.
There are only two linear dimension characteristics for the medium set shown
above — 33 and 8 pixels and it is pretty obvious what dimension is what in
an application to every individual element.
Most
elements are specified as table cell foregrounds. The only reason
for the preference over specifying them as backgrounds is the fact
that keyword SRC happens to be shorter than the keyword BACKGROUND;
otherwise the choice makes no difference at all in most cases. However,
if it is necessary to overlay a symbol over the image, the latter should go
into the background in order to leave foreground for the symbol
being overlaid. HTML code below presents Go position as a contiguous
table of Go elements.
The
HTML code above gets displayed by the browser as follows (presuming that
all images are in the same directory with the HTML text being browsed):
A
B
C
D
While
being simple and straightforward the direct HTML presentation of Go position
has an obvious drawback of being excessively bulky. This bulk of repetitive
HTML text complicates coding and results in long transfers.
In
order to have a fully functional Go board position description facility,
while avoiding massive HTML code repetitions, the POSITION
JavaScript was developed as a substitute for the corresponding HTML
(designed to work with the medium size elements
only). Script generates HTML text for the table that gets
displayed by the browser as a position of stones on a piece of Go board.
Position is described as a series of arguments each of which represents
a list of board rowelements (names of
corresponding *.JPG files). Each element might be accompanied
by a foreground text to be overlaid on it and optional alignment
attributes for this foreground. The order of elements is
straightforward: left to right and top to bottom — exactly the
way you see them when board position gets displayed. On the picture
below elements of the table that represents Go position are separated to make
that point clear.
A
B
C
D
File
with POSITION JavaScript function has to be included
into HTML text <HEAD> (normally at its end) using the following
operator (example below presumes that HTML text and POSITION.JS
are in the same directory; otherwise directory level should be adjusted
accordingly):
Included
function is used in the <BODY> of HTML to display Go board position
in a way shown below in this text. What follows here is the description
extract from POSITION JavaScript function definition
text.
Generates HTML table of Go board position presentation to be used
in texts that discuss those positions. Serves merely as a shorthand
to save typing as well as page loading time by eliminating massive
HTML repetitions.
The position description is a straightforward one - each argument
is a string corresponding to one row of Go board elements that are
listed from left to right (delimited by "_") being the data items
of the cells of a table representing required position.
Two types of items are possible:
1. Simple item: Image
Image is a Foreground occupying the entire cell
2. Complex item: Image-Foreground[-Alignment]
Image is a Background for the specified Foreground
(Used to mark board elements with symbols,
E.g.: mark stones with move numbers)
Where: Image - Name of JPG file representing required image
E.g.: ETL - Empty Top Left corner of Go board
Note: Though it is not a requirement, it makes
sense to have images in HTML text directory
to avoid specification of their paths.
Foreground - Specification of Foreground to be overlaid
on the Background Image
E.g.: <FONT COLOR=Red><B>5</B></FONT>
Alignment - Specification of horizontal and vertical alignments
of specified Foreground within Image background
(HTML defaults: ALIGN=Right VALIGN=Center)
E.g.: ALIGN=Center to achieve both horizontal and
vertical centering of specified
Foreground over Image background
Note: When both horizontal and vertical alignments
are specified they should be separated by " ".
Note: In a complex item alignment specification is optional,
while foreground should always be present.
E.g.: document.write(POSITION("EL_EC_EC_EC",
"BS_BS_BS_EC",
"WS_WS_BS_EC",
"EBL-<FONT COLOR=Red>A</FONT>-ALIGN=Center_WS_BS_EB",
"RB_RB_RB_RB"))
Notes:
- Each argument describes position row; it should be contained
within ONE line of HTML text.
- Symbols "_" and "-" are reserved as delimiters within an argument.
The
code below is functionally identical to the full HTML position description
(HTML table code), but it is substantially shorter (note, that each argument
should be contained within one line of text):
<CENTER>
<NOSCRIPT>Please enable JavaScript in your browser and reload this page</NOSCRIPT>
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(POSITION("RL_EL_EC_EC_EC_EC_EC_EC",
"RL_EL_BS_WS-<B>A</B>-ALIGN=Center_BS_EC_EC_EC",
"RL_EL_EC_BS_EC_EC_EC_EC",
"RL_BS_EC_EC_BS_BS_EC_EC",
"RL_WS-<B>B</B>-ALIGN=Center_EB_EB_WS-<B>C</B>-ALIGN=Center_WS-<B>D</B>-ALIGN=Center_BS_EB",
"RBL_RB_RB_RB_RB_RB_RB_RB"))
//-->
</SCRIPT>
</CENTER>
A
B
C
D
The
table of separated elements is placed right below their listing as POSITION
function arguments to make correlation between the two obvious. The
code above gets displayed by the browser in the form identical to
the full HTML presentation:
As
it can be seen from the above example, the POSITION
JavaScript provides a complete substitute for directly written HTML, and
permits to keep a fully functional Go board description within a reasonable
size, saving both coding and transfer time.
Diagram on the left shows various ways of marking stones
and empty board points. Letters C,
D and E
on that diagram appear to be too close to the lower edge points that
they mark. To avoid this it is possible either to mark such points
at the center (point X), or to decrease
the size of marking font from 3 (default) to 2 as shown
on the diagram on the right.
The
code below is used to generate the left diagram above. It is
shown here as a complete example of handling color and various types of alignment
for marking symbols that can be used in Go position description. Long
lines can't be split, since each JavaScript function argument should be contained
within one line, so horizontal scrolling is required to review this code.
To
summarize it all, in order to use Go content presentation tools available
from this site, it is necessary to have some (only basic) understanding of
HTML, be capable of using any
text editor (even dumb NotePad will do the job), and to do the following:
Download and extract Go presentation elements
(preferably into the directory where Go texts with illustrations would
be contained).
Save and activate (make executable) POSITION
function as described below.
Include POSITION function into your HTML text
<HEAD> as described above.
Use POSITION function to generate Go position
presentation tables as described above. Align generated tables
as necessary.
Technical
details of POSITION function code are presented in
the JavaScript section.
