CSS for the GameIn this section we will explain Palview3's CSS support for the actual game. We will be using the htmltype = normal page for this discussion, but the ideas developed here apply to the other page types in most instances. There are three general sections to the Html file of a game. These parts are the board, infobox, and the moves. We will tackle each of these in turn, but we will first examine the global CSS selector that influences the entire page. This is the BODY selector. The BODY selector allows you to set various style properties for the entire page. Typically this will be used to set a background image or color to the page, or to set left and right margins, etc. Palview3 does not actually write any BODY selector at all, this is up to you to include in your CSS file if you want to do so. For example, you could use the following to set the background color of your page to an off-white to reduce the glare from an all white page:
BODY {background-color:floralwhite;}
Alternatively, you could choose a background image for your page instead using this:
BODY {background-image: url(backgrnd.jpg);}
The reason why the BODY selector is being discussed here at all is to illustrate an important point about CSS and Html TABLEs. Essentially, all your TABLEs will have an invisible background unless you provide one. This means that you can see through your TABLE at whatever lies underneath it. In some cases this may be just what you want, but in most cases this is undesirable. For this reason, Palview3 inserts a CSS class name into the outer Html TABLE that contains the entire game, including the board, infobox, and the moves. This outer table CSS class is named pgob for Palview Game Outer Border. In the screen capture below the double green border that encloses the entire game, including the board, is the TABLE that contains the pgob class.  An example of the pgob class is:
.pgob {border-style:double; border-color:black; border-width:3px;}
The Html code that Palview3 produces for the pgob TABLE can change depending upon the values of padding, tablewidth, and pcsize, but it will generally look like the following. <CENTER> <TABLE class='pgob' CELLPADDING='10' WIDTH='90%'> <TR><TD WIDTH='290'><BR><CENTER> ... the board goes here ... </CENTER></TD><TD VALIGN='TOP'> ... the infobox and moves go here ... </TD></TR> </TABLE> </CENTER> The important point of the pgob class is to provide the ability to set a background color and border for each game. In this following example, we have set the background color to floralwhite with a single thin line border:
.pgob {border-style:solid; border-color:darkgreen; border-width:1px;
background-color:floralwhite;}
There are a few peculiarities in dealing with the Netscape 4 browser and its CSS support. Please see the section below on Palview3's CSS and Netscape 4. The Board and CSSThe next section of the game CSS that we want to discuss is the board, including the board caption. The two classes that are of interest to us here are the pgbb, which controls the border around the actual chess board, and the pt, which controls the caption line under the board. The pgbb class, short for Palview Game Board Border, allows us to place a variety of borders around our chess board. Here is the CSS that was used for the above chess board:
.pgbb {border-style:double; border-color:black; border-width:3px;}
A number of interesting border effects can be achieved using the pgbb class. For example, you can add a bit of space between the board and the border itself by adding a padding declaration to the class. You can also experiment with the width of the border to achieve some surprising results. Below is an example pgbb class and the resulting border as rendered by IE5 and NS6.
.pgbb {border-style:double; border-color:black; border-width:4px;
padding:3;}
There are a number of border styles defined by CSS1 that you can use with the pgbb class. Please see the Cascading Style Sheets, level 1 (CSS1) for more information on those styles. Also note that there are a few peculiarities in dealing with the Netscape 4 browser and its CSS support, especially in regard to borders. Please see the section below on Palview3's CSS and Netscape 4. The next CSS class that we want to examine is the pt class. It is used to provide the formatting of the caption line under the board itself. In our very first picture, you can see that the caption line under the board shows the last move played in the game, namely, 17. Rxe6! Palview3 writes the following Html under the chess board's TABLE to create the caption: <P class='pt' ID='it0'> </P> In our first example we used the following pt class:
.pt {text-align:center; font-family:Arial,Verdana,serif; font-size:12pt;
font-weight:bold; color:black; white-space:pre;}
Most of the declarations above are common sense choices, such as bold, color, font-size, etc. And of course we have centered the text in the caption with the text-align:center; declaration. The most interesting declaration above is the white-space:pre;. If this is not included in the pt class, the board caption will 'collapse' whenever you write an empty line, which is exactly what happens at the start of the game (since no move has been played yet.) While it is not a disaster if this does happen, it is somewhat undesirable. Because of this, you should always include this in the pt class. You should note that Netscape 4 cannot write the moves of the game into the board caption. While this does not affect the ability of any of your NS4 visitors from being able to play out the moves of the game, the page that NS4 renders does not look very nice. (Users with IE or NS6 will not be affected at all.) You may want to use the ns4comp INI option to get Palview3 to create pages that are as compatible with NS4 as we can make them. If you use ns4comp, Palview3 will replace the Html for the board caption with an Html FORM textbox instead. See the ns4comp INI option for more information. The Infobox and CSSThe next section of the game CSS that we want to discuss is the Infobox. This uses a number of CSS classes to display all the relevant game information in a nice tidy box while giving you as much control over the actual formatting as possible. The game information itself is taken from the PGN Tags associated with each individual game. Here is an example of an infobox:  The first thing to note about the game infobox section is that it is all contained in a named Html division: <DIV class='pgi'> ... </DIV> This is done to allow us to alter the padding of the entire division to 'squeeze' all the game information into a tighter box. This is done using the following CSS class:
DIV.pgi P {margin: 0px; padding:1pt;}
The very first class that we will discuss is the pgib or Palview Game Infobox Border. This class is just like the other border classes we have discussed above, except that it provides a separate border for the infobox itself. Here is an example of the CSS class:
.pgib {border-style:ridge; border-color:green; border-width:2px;
background-color:white;}
One of the more useful features of the pgib class is the ability to provide a background color for just the infobox itself. This allows you to use an off-white background color for the entire game TABLE, using the pgob class, and then set the infobox background to white as shown above. The first line in our infobox example above shows the Opening name and the ECO code of the game. These values are either taken from the PGN Tags Opening, Variation, Subvariation, and ECO, or may be supplied by the p3eco program if used. Sometimes the line just doesn't exist at all because no values for the information exists at all. But if the values are present, Palview3 will use the two classes, popen and peco when writing them into the Html file. Here is an example of the Html itself: <TABLE WIDTH='100%' BORDER=0 CELLPADDING=0><TR><TD ALIGN='left'> <SPAN class='popen' TITLE="Taimanov : American Attack">Sicilian</SPAN> </TD><TD ALIGN='right'><SPAN class='peco'>B45</SPAN></TD></TR></TABLE> In the example above we have SPANed the two classes themselves. You can also see that we have used the INI option tooltipopening to reduce the size of the infobox. Users can hover over the Opening name itself, Sicilian, and they will be shown the Variation and Subvariation of the line in a tooltip. (This is highly recommended!) Our CSS classes for the above Opening and ECO Tag values are:
.popen {font-family:Verdana,sans-serif; font-size:10pt; font-style:italic;
text-align:left; font-weight:bold;}
.peco {font-family:Verdana,sans-serif; font-size:10pt; font-style:italic;
text-align:right; font-weight:bold;}
The next section of the infobox lists the player's themselves along with their Country, Title, and Elo. The names themselves are taken from the PGN Tags, White and Black, while the other information is provided by the PGN Tags WhiteCountry, WhiteTitle, WhiteElo, BlackCountry, BlackTItle, and BlackElo. (This information can also be provided through the use of the INI option player.) Here is an example of the Html for this section of the infobox: <P class='pplay'> <IMG SRC='../flag/ind.gif' Border='1' TITLE="India"> Anand V. <SPAN class='ptitle'> GM</SPAN> <SPAN class='pelo'> (2771)</SPAN> <BR> <IMG SRC='../flag/hun.gif' Border='1' TITLE="Hungary"> Leko P. <SPAN class='ptitle'> GM</SPAN> <SPAN class='pelo'> (2701)</SPAN> </P> As you can clearly see above, the player's names use the CSS class pplay, the Titles use the class ptitle, and the Elo ratings use pelo. Here are the CSS classes themselves:
.pplay {font-family:Verdana,Arial,sans-serif; font-size:11pt; font-weight:bold;
color:black; font-style:italic;}
.ptitle {font-family:Verdana,Arial,sans-serif; font-size:12pt; font-style:italic;
font-weight:normal; color:black;}
.pelo {font-family:Verdana,Arial,sans-serif; font-size:10pt; color:black;}
The last piece of information displayed in the infobox is the name of the event itself and where it was played and on what date. All this information is pieced together from the three PGN Tags: Event, Site, and Date. You will also notice that the round the game was played in will be written in round brackets if the round is provided in the Round Tag. Here is the Html: <P class='pevent'>Dortmund (4) <BR> Germany, 1999</P> All the above information about where the game was played is displayed using the single CSS class pevent:
.pevent {text-align:center; font-family:Verdana,Arial,sans-serif; font-size:11pt;
font-style:italic;}
The Moves and CSSThe next section to deal with is the game moves. The first thing to note about the game moves section is that it is all contained in a named Html division: <DIV class='pgm'> ... </DIV> This is done for two reasons. The first is to isolate our control over the appearance of links, the actual moves, to this section of the document alone so that we don't alter the way links outside of the move section appear. The second reason is to allow us to alter the padding of the entire division to 'squeeze' more of the moves onto the screen. This is done using the following CSS class:
DIV.pgm P {margin: 0px; padding:1pt;}
Note that this does not have much of an affect unless you are using the linebreaks = on INI option setting. The entire point of the above CSS class is to be able to reduce the spacing between lines, or Html paragraphs in our case. You can see the difference in the line spacing below.
In the above two examples, you will notice that the very first paragraph appears before any of the moves in the game and is all in italics. Any PGN comment that appears before the first move in a game is treated as a special introduction comment and is given its own CSS class pintro. This allows you to provide special formatting to your game's introduction to set it apart from the rest of the game commentary. In our example above we chose to go with italic, a common introduction format. The pintro class is:
.pintro {text-indent:1em; text-align:justify; font-family:Verdana,Arial,sans-serif;
font-size:10pt; font-style:italic; font-weight:normal;}
The introduction comments themselves will be written to the Html file as: <P class='pintro'>The following game and annotations is from the book, 'Great Short Games of the Chessmasters', by Fred Reinfeld.</P> After any introductory comments, we arrive at the first actual move of the game. All the game moves are placed in an Html paragraph using the pm class, short for Palview Moves. Here is an example of the pm class:
.pm {text-indent:0em; text-align:justify; font-family:Verdana,Arial,sans-serif;
font-size:10pt; font-weight:bold; color:black;}
The moves themselves will be written to the Html file as: <P class='pm'>1. e4 e5 2. Nf3 Nf6 ... </P> The next part of the moves section to examine is the comments and variations. Palview3 writes comments into the pc and pc2 classes, depending upon the depth of any variation moves within the comment. We will leave the discussion about variation depth for later, at the moment we want to discuss comments themselves. Here is the actual pc and pc2 classes:
.pc, .pc2 {text-indent:1em; text-align:justify; font-family:Verdana,Arial,sans-serif;
font-size:10pt; font-weight:normal; color:black;}
The classes are actually combined by separating their names with a comma. We want the actual text of the comments to appear to be the same regardless of variation depth, but we could just have easily separated the two classes so that we could apply a different style to each. These comments will be written to the Html as a P paragraph if linebreaks = on is used, or they will be written as a SPAN if linebreaks = off. Here is the Html: linebreaks = on <P class='pc'>Black meets the threat but weakens his K-side.</P> linebreaks = off <SPAN class='pc'>Black meets the threat but weakens his K-side.</SPAN> Our next class is used specifically for figurines. This is the class pf, short for Palview Figurine. The use of this class is dependant upon a number of factors. First, you must set the INI option figurines = on. The next step is to insure that your stylesheet contains a pf class that uses at least one of the Alpine Figurine fonts. Here is an example of just such a class:
.pf {font-family:LinaresFigurine,ZurichFigurine,HastingsFigurine,Verdana;
font-style:normal;}
While the use of the Alpine family of Figurine fonts is quite easy, there are a few technical points that need to be understood by webmasters who wish to use them in conjunction with Palview3. We have written a separate section to deal specifically with the Alpine Figurine fonts called: Palview3 and Figurines. Please see that section for a more detailed discussion of this topic. Most webmasters will want to use a pf class that does not contain any reference to a Figurine font. In that case, you would certainly want to set the figurines = off. Then the pf class itself can be removed from the CSS file since it will never be used. The next CSS class that we want to discuss is called panno for Palview Annotator. If an annotator's name is provided in the PGN Annotator Tag, his name will be formatted and displayed within square brackets at the end of the game. This can be seen below:  The panno CSS class will be used by Palview3 for the annotator's name. Here is an example of the Html and the CSS class itself: <SPAN class='panno'>[Reinfeld]</SPAN>
.panno {font-family:Verdana,Arial,sans-serif; font-size:12pt; font-style:italic;
font-weight:bold; color:black;}
If you take another look at the above diagram, you will notice a pair of clock times: (1:25:32 / 1:12:46). These refer to the clock times for White and Black during a Live game broadcast. Sometimes this time is an Estimated Game Time, i.e. the amount of time taken by each player for all their moves, or it may refer to the Digital Clock Time, i.e. the actual times on the digital clock. This clock time is given the CSS class pclock. Here is an example of the Html and the CSS class itself: <SPAN class='pclock' TITLE='Digital Clock Time'>(1:25:32 / 1:12:46) </SPAN>
.pclock {font-family:Verdana,Arial,sans-serif; font-size:10pt; color:black;}
Naturally, the pclock class will only be used for Live broadcast games, so you can safely delete the class from your stylesheet if you are not going to be using Palview3 for Live games. For more information on this topic, please see the section Palview3 and Live Game Broadcasts. The most challenging aspect of Palview3's CSS support deals with the actual linked moves of the game itself. In order to replay the moves, Palview3 places them inside a special hypertext link that contains a JavaScript function call. Here is an example of the Html of the first few moves in a typical game: <P class='pm'> 1. <A HREF='javascript:Mv(0,1)'>d4</A> <A HREF='javascript:Mv(0,2)'>d5</A> 2. <A HREF='javascript:Mv(0,3)'>Nf3</A> <A HREF='javascript:Mv(0,4)'>Nf6</A> Now, because these are links, your browser would try to display them just like any other link, usually using either blue or purple and underlining. Clearly this is undesirable. But we can control the way the browser displays these special move links using a CSS class or two. We could write specific class names directly into each move's link to control them, but this would ultimately make for a larger Html file. So what we do is take advantage of the fact that all our moves appear only in the pgm division. This means that we can prefix our CSS class to specify that only links within the pgm DIV are to be affected by the class. We can also take advantage of the fact that all our moves appear in one of the classes pm, pc, or pc2. The moves that appear in the pm class are always our actual game moves - not variations. So we use the following classes to control the game moves themselves:
DIV.pgm A {color:black; text-decoration:none;}
DIV.pgm A:hover {color:red;}
In both classes the prefix DIV.pgm is used to isolate the scope to the pgm division only. The A that follows is used in CSS to indicate an anchor or link. Essentially, the first class says, "All the anchors (moves) in the pgm division should be displayed in black with no underline". The second class says, "Whenever the mouse hovers over an anchor (move) in the pgm division, make it red". Note that only the color and text-decoration needs to be supplied for the normal game moves. All the other properties will be inherited from the pm class, since this is where the moves appear. So the type of font, the font-size, text-align, indent, etc. are all taken from that class. Now we have to deal with linked variation moves. These too appear only in the pgm division and only in the comment classes pc or pc2. But sometimes these two classes can be written to the Html as P paragraphs, or as SPANs. This depends upon the setting of the linebreaks INI option. If we choose linebreaks = on, then Separate P paragraphs are written for the pc class. In this case we need the following CSS classes to control the variation move links:
DIV.pgm .pc A {color:green;}
DIV.pgm .pc A:hover {color:red;}
DIV.pgm SPAN.pc2 A {font-style:italic;}
Notice that we don't need to specify text-decoration:none; in any of the above classes since they will all inherit that property from the above DIV.pgm A class. Also note that we have placed a SPAN in front of the pc2 class. The pc2 class is always SPANed in the Html file and represents variation moves at a depth of two which we are using italic for in our example. If you are going to use linebreaks = off, then all the pc classes (comments) will be SPANed in the Html file, so you will need to use the following classes instead:
DIV.pgm SPAN.pc A {color:green;}
DIV.pgm SPAN.pc A:hover {color:red;}
DIV.pgm SPAN.pc2 A {font-style:italic;}
Rather than have to deal with this decision, you could decide to use the following classes that will combine both eventualities together so that it won't matter whether you choose to use linebreaks on or off:
DIV.pgm .pc A, DIV.pgm SPAN.pc A {color:green;}
DIV.pgm .pc A:hover, DIV.pgm SPAN.pc A:hover {color:red;}
DIV.pgm SPAN.pc2 A {font-style:italic;}
Using the above three lines you can avoid any worries about the linebreaks setting. The only other housekeeping that remains to be taken care of deals with the display of variation moves when using the htmltype = static page type. Here Palview3 uses the following two classes:
DIV.pgm .pc EM {color:green; font-style:normal;}
DIV.pgm .pc2 EM {font-style:italic;}
Palview3's CSS and Netscape 4Because Netscape 4 cannot understand CSS border declarations, we created the ns4comp INI option to allow you to create pages that will have a basic border inserted directly into the Html. But this has consequences in regard to the game Html and CSS. When ns4comp is set, Palview3 will insert Html BORDER attributes directly into the outer Html TABLE and the Html TABLE that surrounds the board itself. These TABLEs have the CSS class names pgob and pgbb. What you will see is something like this: <TABLE class='pgob' CELLSPACING='0' BORDER BORDERCOLOR='green'> <TR><TD> ... </TD></TR></TABLE> We insert the BORDER attributes directly into the TABLEs themseleves. You can see that we have set the BORDERCOLOR to 'green'. You can set this color yourself using the bordercolor INI option. The single BORDER attribute simply directs the browser to create a single border. What you must keep in mind if you use the ns4comp = on setting, is that all the border declarations must be removed from the CSS file you use with your page. Because Netscape 4 does not understand these border declarations it will ignore them, but other browsers, such as Internet Explorer and Netscape 6, do understand them so those browsers will actually draw two borders -- the border defined by the CSS and the border that is written directly into the TABLEs above. For the game CSS, these border declarations will be located in the pgob and pgbb classes:
.pgob {border-style:solid; border-color:green; border-width:2px;
background-color:white;}
.pgbb {border-style:double; border-color:darkgreen; border-width:3px;}
You must remove all the border-xxx declarations, border-style:solid; border-color:green; border-width:2px;, from the above classes when using ns4comp = on. |
