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 e.g. (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>
Related
I have xml code:
<presentation>
<slide type="title-slide" poradie="1">
<title>Here is title.</title>
<autor>Name of autor.</autor>
</slide>
</presentation>
And here is my xslt:
<xsl:template match="/presentation/slide">
<xsl:variable name="filename" select="concat('output_new/',#poradie,'.xhtml')"/>
<xsl:value-of select="$filename" />
<xsl:result-document href="{$filename}" format="xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
&css;
</style>
</head>
<body>
<div class="slide">
<xsl:apply-templates/>
</div>
</body>
</html>
</xsl:result-document>
</xsl:template>
<xsl:template match="slide[#type = 'title-slide']">
<div class="container_title_slide">
<h1><xsl:value-of select="title"/></h1>
<h3><xsl:value-of select="autor"/></h3>
</div>
</xsl:template>
So I want to create XHTML file for each slide. I need to match slide tag two times. Can you help me?
At the moment, both your templates match with the same priority, which is considered an error
What you can do is firstly give the first template a higher-priority
<xsl:template match="/presentation/slide" priority="2">
Then, in your template body, use <xsl:next-match /> instead of <xsl:apply-templates/> which would then apply the template with the lower priorty (Note that <xsl:apply-templates/> would be looking for templates that match child nodes, so was not right to use in this case anyway).
Try this XSLT
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml" version="2.0">
<xsl:output method="html" indent="yes" />
<xsl:template match="/presentation/slide" priority="2">
<xsl:variable name="filename" select="concat('output_new/',#poradie,'.xhtml')"/>
<xsl:value-of select="$filename" />
<xsl:result-document href="{$filename}" format="xhtml">
<html>
<head>
<style>
&css;
</style>
</head>
<body>
<div class="slide">
<xsl:next-match />
</div>
</body>
</html>
</xsl:result-document>
</xsl:template>
<xsl:template match="slide[#type = 'title-slide']">
<div class="container_title_slide">
<h1><xsl:value-of select="title"/></h1>
<h3><xsl:value-of select="autor"/></h3>
</div>
</xsl:template>
</xsl:stylesheet>
(Note that I replace &css; with &css; as &css; is not a valid XML entity).
I have an XSLT file that works with an XML to process a HTML (currently using X-trans & Notepad++). What I want to do is split it into 3 files, The Header, the body and the footer.
So far I have tried to use xsl:import & xsl:include but whenever I try to process it says the file is not valid. I'm clearly missing something can anyone help?
Header XSLT:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html lang="en-GB">
<body style="font-family:'Praxis Com Light'; color:#632423; width:100%; font-size:14px !important;">
<xsl:variable>variable1</xsl:variable>
<xsl:variable>variable2</xsl:variable>
<xsl:variable>variable3</xsl:variable>
<div>Header</div>
</body>
</html>
</xsl:template>
Body XSLT:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html lang="en-GB">
<body style="font-family:'Praxis Com Light'; color:#632423; width:100%; font-size:14px !important;">
<xsl:include href="Header.xsl"/>
<xsl:variable>variable1</xsl:variable>
<xsl:variable>variable2</xsl:variable>
<xsl:variable>variable3</xsl:variable>
<table>Main XSL file</table>
<xsl:include href="Footer.xsl"/>
</body>
</html>
</xsl:template>
Footer XSLT:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html lang="en-GB">
<body style="font-family:'Praxis Com Light'; color:#632423; width:100%; font-size:14px !important;">
<xsl:variable>variable1</xsl:variable>
<xsl:variable>variable2</xsl:variable>
<xsl:variable>variable3</xsl:variable>
<p>Footer</p>
</body>
</html>
</xsl:template>
You can only use xsl:include or xsl:import as top level elements, i.e. as direct children of the xsl:stylesheet respectively xsl:transform element. Therefore a possible approach is
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="header>
<xsl:variable>variable1</xsl:variable>
<xsl:variable>variable2</xsl:variable>
<xsl:variable>variable3</xsl:variable>
<div>Header</div>
</xsl:template>
</xsl:stylesheet>
with
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="Header.xsl"/>
<xsl:include href="Footer.xsl"/>
<xsl:template match="/">
<html lang="en-GB">
<body style="font-family:'Praxis Com Light'; color:#632423; width:100%; font-size:14px !important;">
<xsl:call-template name="header"/>
<xsl:variable>variable1</xsl:variable>
<xsl:variable>variable2</xsl:variable>
<xsl:variable>variable3</xsl:variable>
<table>Main XSL file</table>
<xsl:call-template name="footer"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Instead of using named template it might be better to use template matching and perhaps modes but that depends on the structure of the XML to be processed.
I have a project where I need a to convert an xml to html using an XSLT and have a css for it as well. I just can't seem to get the CSS to affect the document, any help would be great!
The CSS is just align center because I can easily see if it's working or not, once I know it's working I can edit it so it's how i want it to be. But basically the XSL works fine but I can't get the CSS to affect the xml
XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="BookDescription.xsl" type="text/xsl"?>
<?xml-stylesheet type="text/css" href="book_details.css"?>
<!--ORACLE BOOK-->
<Book>
<bookID>0-07-882122-3</bookID>
<bookTitle>Oracle: A Beginner's Guide</bookTitle>
<bookCategory>database</bookCategory>
<bookDescription>A beginner's guide to the complex and powerful Oracle database management system. Teaches you how to set up, query and manage your database, including principles of database design, how to manage data, generate reports and tune the system for optimal performance.</bookDescription>
<bookPrice>30.00</bookPrice>
<bookAuthor>Michael Abbey</bookAuthor>
<bookImage>images/Oracle.JPG</bookImage>
<bookInfo>Oracle.xml</bookInfo>
</Book>
XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="Book">
<h3>
<xsl:value-of select="bookTitle"/>
</h3>
<img alt="">
<xsl:attribute name="src"><xsl:value-of select="bookImage"/></xsl:attribute>
</img>
<div>
<xsl:text>ISBN: </xsl:text>
<xsl:value-of select="bookID"/>
</div>
<div>
<xsl:text>Author: </xsl:text>
<xsl:value-of select="bookAuthor"/>
</div>
<div>
<xsl:text>Category: </xsl:text>
<xsl:value-of select="bookCategory"/>
</div>
<div>
<xsl:text>Description: </xsl:text>
<xsl:value-of select="bookDescription"/>
</div>
<div>
<xsl:text>Price: </xsl:text>
<xsl:value-of select="bookPrice"/>
</div>
</xsl:template>
<xsl:template match="/">
<html>
<body>
<xsl:apply-templates select="Book"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
CSS
div{
text-align: center;
}
bookID{
text-align: center;
}
You have to add a link to your CSS file:
<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" href="path/to/your/css/file.css">
</head>
<body>
<xsl:apply-templates select="Book"/>
</body>
</html>
</xsl:template>
Or:
<xsl:template match="/">
<html>
<head>
<style>
/* Your CSS here */
</style>
</head>
<body>
<xsl:apply-templates select="Book"/>
</body>
</html>
</xsl:template>
I have a XML Document like this:
<bibliography>
<element1>
<text>
Some text and <italic>italic Text</italic> and <bold>bold text</bold>
</text>
</element1>
<element2>
<text>
Some text and <italic>italic Text</italic> and <bold>bold text</bold>
</text>
</element2>
</bibliography>
This XSL works but does not format <italic> or <bold> tags.
<xsl:template match="/">
<html>
<head>
<title>Bibliographie</title>
<style type="text/css">
.entry {
font-family: Georgia
}
</style>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="/bibliography/*">
<p>
<div class="entry{#type}">
[<xsl:number count="*"/>]
<xsl:apply-templates/>
</div>
</p>
</xsl:template>
What do I have to add to let it format the <italic> and <bold> tags right for HTML?
I tried it with XSL-FO but it seems that I can't export the objects to HTML, just to PDF.
You've asked a similar question about outputting xsl-fo. The principal is the same for HTML, but just output HTML tags instead of xsl-fo ones.
The main issue why you XSLT doesn't work is because you haven't got templates matching either bold or italic
Try this XSLT
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="bibliography">
<html>
<head>
<title>Bibliographie</title>
<style type="text/css">
.entry {
font-family: Georgia
}
</style>
</head>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>
<xsl:template match="bibliography/*">
<div class="entry{#type}">
[<xsl:number count="*"/>]
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="bibliography/*/*" priority="0">
<p>
<xsl:apply-templates/>
</p>
</xsl:template>
<xsl:template match="text">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="bold">
<span style="font-weight:bold;">
<xsl:apply-templates/>
</span>
</xsl:template>
<xsl:template match="italic">
<span style="font-style:italic;">
<xsl:apply-templates />
</span>
</xsl:template>
</xsl:stylesheet>
Not the use of "priority" on one of the templates
<xsl:template match="bibliography/*/*" priority="0">
This acts as a sort-of "catch-all" template for matching elements where you don't have specific templates. The priority is needed to ensure it doesn't get applied ahead of the templates matching "italic" and "bold" for example. This was, if you have other elements you want to format in a specific way, such as "author", just add a specific template for them.
With a browser, I want to transform XML which may contain some HTML, with an XSL stylesheet.
In this article, user Mads Hansen wrote:
If your HTML is well-formed, then just embed the HTML tags without escaping or wrapping
in CDTATA. If at all possible, it helps to keep your content in XML. It gives you more
flexibility for transforming and manipulating the document.
You could set a namespace for the HTML, so that you could disambiguate your
HTML tags from the other XML wrapping it.
I like the proposed solution, but can't make it work. I used h as the namespace for html:
temp.xml
<?xml version='1.0' encoding='UTF-8' ?>
<?xml-stylesheet type='text/xsl' href='temp.xsl'?>
<root xmlns:h="http://www.w3.org/1999/xhtml">
<MYTAG title="thisnthat">
text before ol
<h:ol>
<h:li>item</h:li>
<h:li>item</h:li>
</h:ol>
text after ol
</MYTAG>
</root>
temp.xsl
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:h="http://www.w3.org/1999/xhtml">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/root">
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>
<xsl:template match="MYTAG">
<h3>
<xsl:value-of select="#title" />
</h3>
<xsl:apply-templates />
</xsl:template>
</xsl:stylesheet>
The output (from Firefox 18) is:
thisnthat
text before ol item item text after ol
Since you are generating the final HTML and are in control, I'm not sure why you want to use namespaces here. You'd need to do that only if there was a conflict between your custom tags and standard HTML -- i.e. if you had a custom <a...> tag that had different semantics from HTML. I got your transform to work by
a) Removing all HTML namespacing
b) Adding an identity transform
test.xml
<?xml version='1.0' encoding='UTF-8' ?>
<?xml-stylesheet type='text/xsl' href='test.xsl'?>
<root>
<MYTAG title="thisnthat">
text before ol
<ol>
<li>item</li>
<li>item</li>
</ol>
text after ol
</MYTAG>
</root>
test.xsl
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes"/>
<xsl:template match="#*|node()">
<xsl:copy>
<xsl:apply-templates select="#*|node()"/>
</xsl:copy>
</xsl:template>
<xsl:template match="/root">
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>
<xsl:template match="MYTAG">
<h3>
<xsl:value-of select="#title" />
</h3>
<xsl:apply-templates />
</xsl:template>
</xsl:stylesheet>