Re: [xml-dev] CSS as XML

["bryan rasmussen" <rasmussen.bryan@gmail.com>]

 I use the following representation

<style xmlns="http://gta.org/cssxml";>
<selector class="fileheaderblock">
<s name="width">7.5in</s><s name="height">3in</s>
<s name="line-height">45pt</s>
<s name="color">black</s><s name="font-size">20pt</s><s
name="font-family">Courier</s></selector>
<selector class="regionbeforeblock">
<s name="font-weight">bold</s><s name="font-size">28pt</s><s
name="font-family">Courier</s>
<s name="text-align">center</s>
<s name="color">black</s>
</selector>


<selector  id="p1">
<s name="color">#ff0000</s>
<s name="font">11pt Times</s>
<s name="space-before.optimum">4pt</s>
</selector>


</style>

The above is used for providing a css like styling syntax for XSL-FO.

I also use it for generation of css stylesheets for html with the additions of

<selector list=".... a more advanced css expression transferred to output">


The main benefits are:

using the document function building up bits of css. I have decided
that in some future version however this will be done using XInclude

Using an embedded macro language for dynamically evaluating expressions:

for example

<s name="width"><f:multiply><arg><f:param
name="basewidth"/></arg><arg>2</arg></f:multiply>in</s>

This uses the syntax, basically a backwards XSL-T implemented in
XSL-T, defined here:

http://www.oio.dk/files/GTA_Specifications.pdf


There are other benefits, pedagogical, cross-platform
implementability, and so forth, but that is a long discussion.

My plan is to bring some releases out at the end of this year as part
of a site with some related projects, am somewhat behind due to having
switched jobs a few months back, and having suffered some data loss
catastrophes, but I can send you code etc. if you are interested in
the approach.

so if the css can be generated from the xml I would suppose if that
generation needs to be dynamic - which I resist preferring to batch
generate styles, then

<link rel="stylesheet" type="text/css" href="XMLCSS.py?style=3" />
then the script is interpreted, runs transformation, returns result as
text/css. I think that is better also because I doubt anyone is going
to convince browser manufacturers any time soon to support an XML
syntax.

Cheers,
Bryan Rasmussen

On 9/5/07, Fraser Hore <fraserhore@hotmail.com> wrote:
>
>
>
>
> People have suggested that CSS could be more useful in XML form.  One big
> advantage would be styling CSS using xforms.
>
>
>
> I decided to try representing CSS styles as XML and then use XSLT to
> transform it back into CSS format.  This approach works well if the page to
> be presented is included in the XSLT.  It would be ideal if we could add a
> <link> element to an (X)HTML document which refers to an XML document
> containing the style information, which in turn calls an XSLT file to
> transform it into the CSS format that the browser can handle.
>
>
>
> I would appreciate any thoughts on whether this approach is possible, and if
> so how. Details on my work in progress is below.
>
>
>
> Thanks!
>
>
>
> Fraser
>
>
>
> CSS as XML
>
> Firstly, xpath is used to select nodes instead of css selectors.  A good
> xpath to CSS mapping is here.   Next, I simply used the inherent logic and
> hierarchical structure of CSS.  See the W3C CSS Reference page.  The XML
> document is as follows:
>
>
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <?xml-stylesheet type="text/xsl" href="CSSTransform.xsl"?>
>
>
>
> <styles>
>
>     <style nodeset="//div" pseudo-class="hover">
>
> /* xpath expression to define the element or elements to be styled (using
> the "|" separator, xpath allows the identification of multiple nodesets or
> elements)*/
>
>         <text>
>
>             <color unit="hex">#000000</color>
>
>             <direction/>
>
>             <line-height/>
>
>             <letter-spacing/>
>
>             <align/>
>
>             <decoration/>
>
>             <indent/>
>
>             <shadow/>
>
>             <transform/>
>
>             <unicode-bidi/>
>
>             <white-space/>
>
>             <word-spacing/>
>
>         </text>
>
>
>
>         <font>
>
>             <family/>
>
>             <size unit="px">40</size>
>
>             <size-adjust/>
>
>             <stretch/>
>
>             <letter-style/> /* font-style in CSS2 i.e. normal, italic,
> oblique */
>
>             <variant/>
>
>             <weight/>
>
>         </font>
>
>
>
>     </style>
>
> </styles>
>
>
>
> XSLT to Transform the XML to CSS
>
> The following illustrates the use of the transform to put the appropriate
> CSS in the <style> tag of an (X)HTML document.  The HTML elements and
> content would be removed if you wanted to create a generic transform that
> could be called by any XML document containing CSS information.  Not that I
> haven't yet figured out the conversion of xpath expressions to CSS selectors
> but it should be doable.
>
>
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <xsl:stylesheet
> xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
> version="2.0">
>
>     <xsl:template match="/">
>
>         <html>
>
>             <head>
>
>                 <style type="text/css">
>
>
>
>                         <xsl:for-each select="/styles/style">
>
>                             <xsl:value-of select="@nodeset"/> {
>
>
>
>                             <xsl:for-each select="./text/color |
> /text/direction | ./text/line-height | ./text/letter-spacing |
> /text/white-space | ./text/word-spacing">
>
>                                 <xsl:value-of select="name(.)"/>:
> <xsl:value-of select="."/>;
>
>                             </xsl:for-each>
>
>                             <xsl:for-each select="./text/align |
> /text/decoration | ./text/indent | ./text/shadow | /text/transform">
>
>                                 <xsl:value-of
> select="name(..)"/>-<xsl:value-of select="name(.)"/>: <xsl:value-of
> select="."/>;
>
>                             </xsl:for-each>
>
>
>
>                             <xsl:for-each select="./font/*">
>
>                                 <xsl:value-of
> select="name(..)"/>-<xsl:value-of select="name(.)"/>: <xsl:value-of
> select="."/>;
>
>                             </xsl:for-each>
>
>                             }
>
>                         </xsl:for-each>
>
>
>
>                 </style>
>
>             </head>
>
>             <body>
>
>                 <h2>CSS Transformation Test</h2>
>
>                 <div>This is a div.</div>
>
>             </body>
>
>         </html>
>
>     </xsl:template>
>
>
>
> </xsl:stylesheet>
>
>
>
> Linking to the XML Document from an (X)HTML Document
>
>
>
> <!DOCTYPE html SYSTEM
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>
> <html xmlns="http://www.w3.org/1999/xhtml";>
>
>     <head>
>
>         <title>XML CSS Test</title>
>
>         <link rel="stylesheet" type="text/css" href="XMLCSS.xml" />
>
>     </head>
>
>
>
>     <body>
>
>         <div>This is a div</div>
>
>     </body>
>
> </html>
>
>