W3C home > Mailing lists > Public > public-mobileok-checker@w3.org > May 2007

RE: Found a solution for CSS -> XML mapping: JXCSS

From: Jo Rabin <jrabin@mtld.mobi>
Date: Fri, 11 May 2007 10:09:51 +0100
Message-ID: <C8FFD98530207F40BD8D2CAD608B50B42B3D98@mtldsvr01.DotMobi.local>
To: <public-mobileok-checker@w3.org>

Good find.

+1 to James on elegance and conciseness.

Some thoughts:

1. It looks as though this has not been touched since Jan 2006?

2. "The generated XML conforms with JXCSS's own DTD (XCSS), which models
stylesheets in accordance to the W3C Level-2 DOM. An alternative,
compact syntax is also available."

It looks from the compact-css style sheet as though this is not really
an xml serialisation ... so is probably not suitable for us.

3. I couldn't find a DTD or schema for either xcss or compact xcss, I
couldn't see in the compact-xcss any hint of at-rule processing, so how
complete do we think it is?

4. Do we think that the Apache license is compatible with whatever
license we will apply to our work (and what is that license?)

5. Don't see any sign of widespread adoption, so it probably wouldn't
break too much to refine it?

I take it that as it is SAX based it would be relatively trivial to plug
in an alternative renderer (replacement for XCSSSerializer?), in which
case one could fix up the format to be a little more elegant and concise
and complete, without too much pain?

6. As a slightly whimsical aside, all the efforts I have seen model the
structure of CSS in that they output the selectors then list the
properties that apply to the selectors. I wonder if in creating an XML
model for this it would be worthwhile to reconsider this approach.

I don't actually know how CSS processing is usually done, but I assume
that the style sheet is parsed into a structure that allows easy
determination of which properties apply to the element in question by
listing the selectors in order of specificity.

And further, given the desire to use the format in an XSLT like way, it
would be useful to have the selectors translated into XPath expressions.

Another thought is that perhaps it would be more convenient for our
purposes to have the selectors as children of the properties, rather
than the properties as children of the selectors. i.e. invert the

The bottom line is, how far do we want to go and why?

7. There have been a lot of false starts in this area, and I am reminded
of the saying "fools step in where angels fear to tread". I think we
should check with the CSS folks before committing and/or proceeding.


> -----Original Message-----
> From: public-mobileok-checker-request@w3.org [mailto:public-mobileok-
> checker-request@w3.org] On Behalf Of James Pearce
> Sent: 11 May 2007 08:18
> To: public-mobileok-checker@w3.org
> Subject: RE: Found a solution for CSS -> XML mapping: JXCSS
> Concise it ain't ;-) but complete.
> Although if the namespace was implicit on all the descendant nodes it
> wouldn't actually be too bad.
> (Ditto for all the namespace-uri="" attributes if these could be
> defaulted in the schema)
> JP
> -----Original Message-----
> From: public-mobileok-checker-request@w3.org
> [mailto:public-mobileok-checker-request@w3.org] On Behalf Of Sean Owen
> Sent: 11 May 2007 00:43
> To: public-mobileok-checker@w3.org
> Subject: Found a solution for CSS -> XML mapping: JXCSS
> https://jxcss.dev.java.net/
> I found this gem on the internet. I've included a sample stylesheet
> what it spits out. Looks pretty good to me -- as decent as the
> "css:chunk" business suggested by that W3C technical note of 1998. Any
> objections to sticking this into the code as the default means of
> generating a DOM from the CSS?
> a, a:visited {color: green}
> body, td, th {font-family: Verdana,sans-serif} td, th {text-align:
> vertical-align: top; padding: 0.1cm 0.3cm 0.1cm 0.3cm} th
> {vertical-align: bottom; font-weight: bold;} pre {color: #003300;
> border: 1px solid black; padding: 0.1cm;
> background-color: #DDDDDD}
> code {color: #003300}
> img {border: 0}
> h2, h3 {padding-top: 0.1cm}
> .verylarge {font-size: 400%}
> .halfwidth {width: 50%}
> .centertext {text-align: center}
> <?xml version="1.0" encoding="UTF-8"?>
> <xcss:css-stylesheet xmlns:xcss="xcss/1.0"> <xcss:style>
> <xcss:element-node-selector local-name="a" namespace-uri=""/>
> <xcss:conditional-selector> <xcss:selector>
> local-name="a" namespace-uri=""/> </xcss:selector>
> <xcss:pseudo-class-condition local-name="" namespace-uri=""
> specified="false">visited</xcss:pseudo-class-condition>
> </xcss:conditional-selector>
> <xcss:property name="color">
> <xcss:value type="string">green</xcss:value> </xcss:property>
> </xcss:style> <xcss:style> <xcss:element-node-selector
> namespace-uri=""/> <xcss:element-node-selector local-name="td"
> namespace-uri=""/> <xcss:element-node-selector local-name="th"
> namespace-uri=""/> <xcss:property name="font-family"> <xcss:value
> type="string">Verdana</xcss:value>
> <xcss:value type="string">sans-serif</xcss:value>
> </xcss:property>
> </xcss:style>
> <xcss:style>
> <xcss:element-node-selector local-name="td" namespace-uri=""/>
> <xcss:element-node-selector local-name="th" namespace-uri=""/>
> <xcss:property name="text-align"> <xcss:value
> type="string">left</xcss:value> </xcss:property> <xcss:property
> name="vertical-align"> <xcss:value type="string">top</xcss:value>
> </xcss:property> <xcss:property name="padding"> <xcss:value
> unit="cm">0.1</xcss:value> <xcss:value type="float"
> unit="cm">0.3</xcss:value> <xcss:value type="float"
> unit="cm">0.1</xcss:value> <xcss:value type="float"
> unit="cm">0.3</xcss:value> </xcss:property> </xcss:style> <xcss:style>
> <xcss:element-node-selector local-name="th" namespace-uri=""/>
> <xcss:property name="vertical-align"> <xcss:value
> type="string">bottom</xcss:value> </xcss:property> <xcss:property
> name="font-weight"> <xcss:value type="string">bold</xcss:value>
> </xcss:property> </xcss:style> <xcss:style>
> local-name="pre" namespace-uri=""/> <xcss:property name="color">
> <xcss:function name="rgb"> <xcss:value type="integer">0</xcss:value>
> <xcss:value type="integer">51</xcss:value> <xcss:value
> type="integer">0</xcss:value> </xcss:function> </xcss:property>
> <xcss:property name="border"> <xcss:value type="float"
> unit="px">1.0</xcss:value> <xcss:value
> <xcss:value type="string">black</xcss:value> </xcss:property>
> <xcss:property name="padding"> <xcss:value type="float"
> unit="cm">0.1</xcss:value> </xcss:property> <xcss:property
> name="background-color"> <xcss:function name="rgb"> <xcss:value
> type="integer">221</xcss:value> <xcss:value
> type="integer">221</xcss:value> <xcss:value
> type="integer">221</xcss:value> </xcss:function> </xcss:property>
> </xcss:style> <xcss:style> <xcss:element-node-selector
> namespace-uri=""/> <xcss:property name="color"> <xcss:function
> name="rgb"> <xcss:value type="integer">0</xcss:value> <xcss:value
> type="integer">51</xcss:value> <xcss:value
> </xcss:function> </xcss:property> </xcss:style> <xcss:style>
> <xcss:element-node-selector local-name="img" namespace-uri=""/>
> <xcss:property name="border"> <xcss:value
> </xcss:property> </xcss:style> <xcss:style>
> local-name="h2" namespace-uri=""/> <xcss:element-node-selector
> local-name="h3" namespace-uri=""/> <xcss:property name="padding-top">
> <xcss:value type="float" unit="cm">0.1</xcss:value> </xcss:property>
> </xcss:style> <xcss:style> <xcss:conditional-selector> <xcss:selector>
> <xcss:element-node-selector local-name="" namespace-uri=""/>
> </xcss:selector> <xcss:class-condition local-name="class"
> namespace-uri=""
> specified="true">verylarge</xcss:class-condition>
> </xcss:conditional-selector>
> <xcss:property name="font-size">
> <xcss:value type="float" unit="%">400.0</xcss:value> </xcss:property>
> </xcss:style> <xcss:style> <xcss:conditional-selector> <xcss:selector>
> <xcss:element-node-selector local-name="" namespace-uri=""/>
> </xcss:selector> <xcss:class-condition local-name="class"
> namespace-uri=""
> specified="true">halfwidth</xcss:class-condition>
> </xcss:conditional-selector>
> <xcss:property name="width">
> <xcss:value type="float" unit="%">50.0</xcss:value> </xcss:property>
> </xcss:style> <xcss:style> <xcss:conditional-selector> <xcss:selector>
> <xcss:element-node-selector local-name="" namespace-uri=""/>
> </xcss:selector> <xcss:class-condition local-name="class"
> namespace-uri=""
> specified="true">centertext</xcss:class-condition>
> </xcss:conditional-selector>
> <xcss:property name="text-align">
> <xcss:value type="string">center</xcss:value> </xcss:property>
> </xcss:style> </xcss:css-stylesheet>
Received on Friday, 11 May 2007 09:10:25 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 8 January 2008 14:13:03 GMT