Forum Moderators: open
but a rendering of XML can be styled, much like a printed page can.
if you specify an XSLT in your XML, then your XSLT renders HTML that in turn has a CSS stylesheet, then you'll have and XML file rendered in the face you enjoy
[edited by: jatar_k at 1:51 pm (utc) on Sep. 26, 2007]
[edit reason] no urls thanks [/edit]
XML - haiku.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="/xslt/haiku.xslt"?>
<!DOCTYPE poem SYSTEM "http://www.---oops---.com/dtd/haiku.dtd">
<poem>
<line>into the sugar,</line>
<line>Mexico and Cuba play.</line>
<line>Paris starts basking.</line>
</poem>
there on line 2 is the reference to an XSLT file, which instructs the browser to display an HTML rendering of the XML as HTML. really all it does it change <poem> into <div>, <line> into <p>, and wrap the page with a <head> and <body>.
XSLT - haiku.xslt
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/haiku.css" />
</head>
<body>
<xsl:apply-templates select="poem" />
</body>
</html>
</xsl:template>
<xsl:template match="poem">
<div class="poem">
<xsl:apply-templates select="line"></xsl:apply-templates>
</div>
</xsl:template>
<xsl:template match="line">
<P>
<xsl:value-of select="."/>
</P>
</xsl:template>
</xsl:stylesheet>
pay attention to the <head> - it contains a link to a CSS file. That's what will make your fonts show up.
the output of that transformation looks like:
HTML - output from the xslt transformation
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="/css/haiku.css"></link>
</head>
<body>
<div class="poem">
<p>into the sugar,</p>
<p>Mexico and Cuba play.</p>
<p>Paris starts basking.</p>
</div>
</body>
</html>
even though the user is requesting an XML file, it is presented as HTML, styled with CSS. I'll finish this expo by showing the CSS:
CSS - haiku.css
p{font-family:verdana;}
body{text-align:center;}
.poem{
border:1px dotted #666;
width:500px;
padding:30px;
margin:auto;
margin-top:30px;
}
the last ingredient is the DTD, mentioned in the DOCTYPE of the XML:
DTD - haiku.dtd
<!ELEMENT poem (line+)>
<!ELEMENT line (#PCDATA)>
if you wanted to use a schema instead of a DTD, it would look like this:
SCHEMA - haiku.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ns1="http://www.---oops---.com" targetNamespace="http://www.---oops---.com" elementFormDefault="qualified" attributeFormDefault="unqualified">
<xs:element name="poem">
<xs:annotation>
<xs:documentation>Comment describing your root element</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:sequence>
<xs:element name="line" type="xs:string" minOccurs="3" maxOccurs="3" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
those are good illustrative (and thankfully short) examples of how to dress up an XML file with a custom layout and pretty fonts. enjoy ~ hww
We do this kind of thing in our wiki for FO processing:
XML:
<?xml version="1.0" encoding="UTF-8"?>
<styledef name=".className">
<font>
<size>small</size>
<weight>bold</weight>
<style>italic</style>
</font>
</styledef> XSLT:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="styledef">
<xsl:value-of select="@name"/>
<xsl:text>{</xsl:text>
<xsl:for-each select="font">
<xsl:if test="size">
<xsl:value-of select="concat('font-size:', size, ';')"/>
</xsl:if>
<xsl:if test="weight">
<xsl:value-of select="concat('font-weight:', weight, ';')"/>
</xsl:if>
<xsl:if test="style">
<xsl:value-of select="concat('font-style:', style, ';')"/>
</xsl:if>
</xsl:for-each>
<xsl:text>}</xsl:text>
</xsl:template>
</xsl:stylesheet>
It is not perfect, as the CSS needs to be transformed before you can see it on the Web page. However, it is impossible to parse CSS, so this is an adequate solution.