Format italic/bold with XSLT to HTML - html

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.

Related

How to match tag two times in template?

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).

How to make a different font in a tag inside another tag in XSL style sheet?

How can I apply a different font in an XSL for the XML looking like this
<text> sometext <citation> somecitation </citation> sometext </text>
so the citation content should be in a different font as just text.
so this is the part of my XML
<text>She flipped her bed over and found invisible alligators all over her room. <citation> What's going on here? <citation> she demanded. </text>
I wrote a code <xsl:template match="text">
<p>
<xsl:value-of select="text()"/>
<q>
<xsl:value-of select="citation/text()"/>
</q>
</p>
(q stands for italic in CSS)
What I want to get :
She flipped her bed over and found invisible alligators all over her room.
"What's going on here?" she demanded.
What I get for now : She flipped her bed over and found invisible alligators all over her room.she demanded. "What's going on here?"
how can I proceed to get correct result?
Thank you!
First, the default styling applied by the browser should be quite sufficient - provided you use the correct HTML tags.
Given the following input:
XML
<text>She flipped her bed over and found invisible alligators all over her room. <citation> What's going on here? </citation> she demanded. </text>
the following stylesheet:
XSLT 1.0
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<html>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="text">
<p>
<xsl:apply-templates/>
</p>
</xsl:template>
<xsl:template match="citation">
<cite>
<xsl:apply-templates/>
</cite>
</xsl:template>
</xsl:stylesheet>
will return:
<html>
<body>
<p>She flipped her bed over and found invisible alligators all over her room. <cite> What's going on here? </cite> she demanded.
</p>
</body>
</html>
which most any browser will render as:
If you don't like or don't trust the browser defaults, you can specify your own style, for example:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<html>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="text">
<p>
<xsl:apply-templates/>
</p>
</xsl:template>
<xsl:template match="citation">
<span style="font-style: italic;">
<xsl:apply-templates/>
</span>
</xsl:template>
</xsl:stylesheet>
Or:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<html>
<head>
<style>
q {
font-style: italic;;
}
</style>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="text">
<p>
<xsl:apply-templates/>
</p>
</xsl:template>
<xsl:template match="citation">
<q>
<xsl:apply-templates/>
</q>
</xsl:template>
</xsl:stylesheet>

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 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>

Using CSS and XSL in XML

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>

XSL transform HTML inside XML using alternate namespace

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>