xsl-list
[Top] [All Lists]

Re: [xsl] question on line breaks / chess

2009-07-17 19:47:55
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
Geschäftsführung: Erich Baier
Sitz der Gesellschaft: Böblingen
Registergericht: Amtsgericht Stuttgart, HRB 243294


                                                                       
             Martin Honnen                                             
             <Martin(_dot_)Honnen(_at_)gm                                       
  
             x.de>                                                      To
                                       
xsl-list(_at_)lists(_dot_)mulberrytech(_dot_)com 
             07/17/2009 01:34                                           cc
             PM                                                        
                                                                   Subject
                                       Re: [xsl] question on line breaks /
             Please respond to         chess                           
             xsl-list(_at_)lists(_dot_)mu                                       
  
              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/

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--




--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--

<Prev in Thread] Current Thread [Next in Thread>