Forum Moderators: open

Message Too Old, No Replies

Newbie and XML Font Styles?

         

tonynoriega

4:56 pm on Sep 11, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



can you stylize fonts in XML as you can with CSS?

If so, can someone provide more info...

cmarshall

5:11 pm on Sep 11, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not directly, but some browsers may allow XSLT to specify styles (I don't know. I never use browser-side XSLT, although I hear that There [there.com] is browser-side XSLT-based.

httpwebwitch

1:45 am on Sep 26, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



terse answer: no. XML does not have fonts. Kind of like... the English language doesn't have fonts.

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]

httpwebwitch

2:53 am on Sep 27, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



a tutorial using real examples

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

cmarshall

3:10 am on Sep 27, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's another quickie.

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>

httpwebwitch

3:59 pm on Sep 27, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



yo cm, what is the advantage of generating your CSS via an XML->XSLT transformation? I'd only want to tread that path if my CSS was in vaguespace, i.e. it's data-generated or changed dynamically by a user or server process.

Does this wiki allow users to build their own skins?

cmarshall

4:08 pm on Sep 27, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, FO doesn't use CSS. It takes XML, so we have a base XML definition of the style that turns into XML when headed for FO, and CSS when headed for Web deployment.

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.

httpwebwitch

12:39 pm on May 11, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



8 months later, I keep searching for and returning to this thread. I'm going to pop it into the Forum Library.