Subject: Re: [xsl] question on line breaks / chess From: Hermann Stamm-Wilbrandt <STAMMW@xxxxxxxxxx> Date: Sat, 18 Jul 2009 01:46:55 +0200 |
Martin, Ken, thanks for all the tooling information. > I think with IE the transformation result looks as you want is, the same > as the static HTML document you have. > > With Firefox > https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps > explains why you get the gaps. The problem is that Firefox always > displays the result of an XSLT transformation in strict mode (also > called standards mode) so the doctype sniffing that happens for static > text/html documents does not happen for XSLT result documents. That way > your transformation result in Firefox is rendered in strict mode and has > those gaps. That way some of the workarounds like triggering quirks mode > or almost standards mode are not possible. I think you will need to > change the table you have and put each img into a td cell of its own, > probably together with a CSS rule > td img { display: block; } Martin, thanks identifying the problem! "display:block" and having to place each single field image into a separate <td> was nearly sufficient to make this work -- the only addition I had to figure out was to set cellspacing and cellpadding to 0 in the (inner) table, here is the result which looks nice on all browsers: http://www.stamm-wilbrandt.de/en/xsl-list/chess/p2n.xml Because I already did chess animations in the past with other tools now I thought on how to do "pure XSLT chess animations", and it turned out to be really easy -- generating <meta http-equiv="refresh" ...> works great! Here is how a board file looks like: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="boardAN.xsl"?>...> <board> <content>2; URL=board2b.xml</content> <notation>1. b3 e5 2. d3</notation> <row> <f>br</f><f>bn</f><f>bb</f><f>bq</f><f>bk</f><f>bb</f><f>bn</f><f>br</f> </row> <row>> <f>bp</f><f>bp</f><f>bp</f><f>bp</f><f> </f><f>bp</f><f>bp</f><f>bp</f> </row> ... ... <row>> <f>wr</f><f>wn</f><f>wb</f><f>wq</f><f>wk</f><f>wb</f><f>wn</f><f>wr</f> </row> </board> If present <content> element defines the number of seconds before jumping to the next board, and to which board. If present <notation> will be printed below the board. Here you may see the animation in action, it is the game "black mates white on move 5 by promoting a pawn into a knight": http://www.stamm-wilbrandt.de/en/xsl-list/chess/board0.xml Thanks to Ken I got rid of the modes and used parameters for apply-templates. Listing (http://www.stamm-wilbrandt.de/en/xsl-list/chess/boardAN.xsl): <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="html"/> <!-- draw outer border -->> <xsl:template match="/"> <html> <xsl:element name="head"> <xsl:apply-templates select="board/content"/> </xsl:element> <body><table border="1"><tr><td> <xsl:apply-templates select="board"/> </td></tr></table> <p/><xsl:value-of select="board/notation"/> </body></html> </xsl:template>> <!-- this is for refresh/animation --> <xsl:template match="content"> <xsl:element name="meta"> <xsl:attribute name="http-equiv">refresh</xsl:attribute> <xsl:attribute name="content"> <xsl:value-of select="."/> </xsl:attribute> </xsl:element> </xsl:template>> <!-- draw board of fields without spacing --> <xsl:template match="board"> <table cellpadding="0" cellspacing="0"> <xsl:apply-templates select="row"/> </table> </xsl:template> <!-- row --> <xsl:template match="row"> <tr> <xsl:apply-templates select="f"> <xsl:with-param name="row" select="position()"/> </xsl:apply-templates> </tr>: </xsl:template> <!-- field -->> <xsl:template match="f"> <xsl:param name="row"/> <td>: <xsl:call-template name="img"> <xsl:with-param name="col" select="substring('wb',1+((position()+$row) mod 2),1)"/>. </xsl:call-template> </td>: </xsl:template> <!-- image based on figure name "." and field color $col --> <xsl:template name="img"> <xsl:param name="col"/> <xsl:element name="img"> <xsl:attribute name="style">display:block</xsl:attribute>>. <xsl:attribute name="src"> gif/<xsl:value-of select="normalize-space(.)"/><xsl:value-of select="$col"/>.gif </xsl:attribute>>. </xsl:element> </xsl:template>> </xsl:stylesheet>> Mit besten Gr|_en / Best wishes, Hermann Stamm-Wilbrandt Developer, XML Compiler WebSphere DataPower SOA Appliances ---------------------------------------------------------------------- IBM Deutschland Research & Development GmbH Vorsitzender des Aufsichtsrats: Martin Jetter Geschdftsf|hrung: Erich Baier Sitz der Gesellschaft: Bvblingen Registergericht: Amtsgericht Stuttgart, HRB 243294 Martin Honnen <Martin.Honnen@gm x.de> To xsl-list@xxxxxxxxxxxxxxxxxxxxxx 07/17/2009 01:34 cc PM Subject Re: [xsl] question on line breaks / Please respond to chess xsl-list@xxxxxxxx lberrytech.com Hermann Stamm-Wilbrandt wrote: > The display of board.xml is not nice because of additional vertical > spacing, but running "xsltproc board.xsl board.xml >board.html" and > viewing board.html all is fine: > http://www.stamm-wilbrandt.de/en/xsl-list/chess/board.xml > http://www.stamm-wilbrandt.de/en/xsl-list/chess/board.html > > > Now I have three questions: > 1) How can I inspect the output of the transformation in the browser? > "View source" does not help since it shows the XML input. With Firefox you should be able to use Firebug to see the DOM tree of the transformation result. You should also be able to select the complete contents of the browser window with select all (ctrl-a) and use the context menu (right click) and "view selection source". With IE 8 you should also be able to use developer tools (F12) to inspect the DOM tree of the transformation result. With other browsers there might be similar options or you could try a JavaScript bookmarklet that does javascript:alert(document.documentElement.outerHTML) > 2) How can I make the output of the browser transformation similar to > that of xsltproc? > > board.html looks like this, all in a single line (split into many > lines here for readybility, only): > <html><table border="1"><tr><td><img src="gif/brw.gif"><img src="gif/ > bnb.gif"><img src="gif/bbw.gif"><img src="gif/bqb.gif"><img src="gif/ > bkw.gif"><img src="gif/bbb.gif"><img src="gif/bnw.gif"><img src="gif/ > brb.gif"><br><img src="gif/bpb.gif">... > ...<img src="gif/wrw.gif"><br></td></tr></table></html> I think with IE the transformation result looks as you want is, the same as the static HTML document you have. With Firefox https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps explains why you get the gaps. The problem is that Firefox always displays the result of an XSLT transformation in strict mode (also called standards mode) so the doctype sniffing that happens for static text/html documents does not happen for XSLT result documents. That way your transformation result in Firefox is rendered in strict mode and has those gaps. That way some of the workarounds like triggering quirks mode or almost standards mode are not possible. I think you will need to change the table you have and put each img into a td cell of its own, probably together with a CSS rule td img { display: block; } -- Martin Honnen http://msmvps.com/blogs/martin_honnen/
Current Thread |
---|
|
<- Previous | Index | Next -> |
---|---|---|
Re: [xsl] question on line breaks /, Michael Ludwig | Thread | Re: [xsl] question on line breaks /, G. Ken Holman |
Re: [xsl] Next node outside of axis, Spencer Tickner | Date | Re: [xsl] xslt and xslfo, G. Ken Holman |
Month |