简体   繁体   中英

Client-side XSLT rendering misery

I have an XML document format which, over time, has morphed into little more than a thin wrapper around HTML. In order to aid in editing (ultimately with Coda's "Preview" feature) I'm trying to make an XSLT translation.

Sample document:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="x.xsl" type="text/xsl" ?>
<htmldocument>
  <title>Document Title</title>
  <section>
    <sectiontitle>Section Title</sectiontitle>
    <div>
        <p>First Paragraph</p>
        <p><b>Second Paragraph</b></p>      
    </div>
  </section>
</htmldocument>

My XSL:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

  <xsl:output method="xml" indent="yes" encoding="UTF-8"/>
  <xsl:template match="/htmldocument">
      <html>
          <head>
              <style type="text/css">
                  body
                  {
                      font-size: 15px;
                      font-family: Helvetica;
                  }
              </style>
          </head>
          <body>
              <xsl:apply-templates />
          </body>
      </html>
  </xsl:template>

  <xsl:template match="//title">
          <h1>
            <xsl:apply-templates />
          </h1>
  </xsl:template>   

  <xsl:template match="/htmldocument/section">
      <div>
        <xsl:apply-templates />
      </div>
  </xsl:template>

  <xsl:template match="/htmldocument/section/div">
      <xsl:copy-of select="." />
  </xsl:template>

  <xsl:template match="/htmldocument/section/sectiontitle">
      <h2>
        <xsl:apply-templates />
      </h2>
  </xsl:template>

</xsl:stylesheet>

If I use xsltproc to process the XML into an HTML file, everything works as expected:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
                                  body
                                  {
                                          font-size: 15px;
                                          font-family: Helvetica;
                                  }
                          </style>
  </head>
  <body>
  <h1>Document Title</h1>
  <div>
    <h2>Section Title</h2>
    <div xmlns="">
            <p>First Paragraph</p>
            <p><b>Second Paragraph</b></p>
    </div>
  </div>
</body>
</html>

However, if I open the XML file in a browser, although the transform clearly happens its display of the rendered HTML is largely lacking any style information. In particular, the <div> and <p> seem to have display:inline and the <b> element has no effect on the font weight.

I can add extra styling via the <style> element, but I don't really want to have to reinvent the wheel.

Am I missing something here, or am I just expecting too much from client-side XSLT rendering?

You need to decide whether you want to create HTML output in no namespace where you could copy your no-namespaced XML elements of the same name as HTML elements through or whether you want XHTML output where you would need to make sure your input elements in no namespace are transformed to the XHTML namespace.

So either remove the XHTML namespace and use xsl:output method="html"/> or make sure you transform an elements in the XML to XHTML elements eg (assuming you keep the xmlns="http://www.w3.org/1999/xhtml" )

<xsl:template match="*">
  <xsl:element name="{local-name()}">
    <xsl:apply-templates select="@* | node()/">
  </xsl:element>
</xsl:template>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM