Re: [xsl] question on line breaks / chess

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/
<- 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
<-prev [Thread] next->	<-prev [Date] next->
Month Index \| List Home