Jump to content

CSS in XSL

dooberry

By dooberry
in CSS

 Share

Recommended Posts

dooberry Member

dooberry

Posted
Posted

Right then, I'm a complete noob on CSS and I get the whole inline, internal, external hierarchy thing.I'm planning to use CSS combined with XSL and XML to load up some data in a nice format so that it can be printed from the page.What I'm wondering is if I use the xsl:template element with it's own inline style, can I have multiple definitions for the same type of tag?I'm looking at using different font sizes, section widths and colors depending on the type of information (name of the XML element) that I'm looking at.Has anyone done this before and can you give me any pointers?Dooberry

I had a small problem, I thought 'I know how to fix that!' - then I had a big problem
:)
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

I'm having this "theory" which treats XSLT as a dynamic language... you seem to be getting the scripting part of that theory, so here is a pointer on it's structural part.How about a style tag in the "main" XSLT in which there is only <xsl:call-template select="style"/> and the template style is actually included in another XSLT file which contains the desired "dynamical CSS settings". What would you say of this approach?Or if I get you wrong, you are actually thinking of the same thing, but you're wondering how to construct it? The approach I would go for is something like:

div.something {font-size: <xsl:choose><xsl:when test="local-name(node-set)='whatever'">110</xsl:when><xsl:otherwise>90</xsl:otherwise></xsl:choose>%;

Expanding each word with more conditionals (for example, put conditionals for the class), you can practically create a stylesheet with let's say 100 lines, which would otherwise take at least 200. Just remeber: you're outputting plain text. There is no tag nesting to worry about.

Link to comment
Share on other sites
dooberry Member

dooberry

Posted
  • Author
Posted

Hmm I like the sound of the Dynamic approach.What I was planning to do was embed a style within each node template so that when values are selected from different parts of the XML document, they are formatted according to the element they belong to.Taking an order as an example (I think everyone gets the order model these days):

<xsl:template match="order"><html><style>p.orderdate{color: blue;font-size: 20}p.customer{color: green;font-size: 25}</style><p class="orderdate"> <xsl:value-of select="order_date" /></p><p class="customer"> <xsl:value-of select="customer" /></p></xsl:template>

In this way, whenever there is an element of a particular type it appears in a particular layout/style on the page.This could be taken a step further into the Style template idea, but that's a bit beyond me at the moment (like you said - keep to the traditional stuff to begin with! :)). I think this idea reflects one of the true intents of the <xsl:template> element - you treat nodes of the same type in the same way.D :) :) berry

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Indeed, what I see in your sample is completely traditional approach. Congratulations :) .Well, if you want to automate the class creating, thus class styling, you may do something like this:

<html><style>p.orderdate{color: blue;font-size: 20}p.customer{color: green;font-size: 25}</style><body><xsl:for-each select="*"><p><xsl:choose>  <xsl:when test="local-name(current())='order_date'">    <xsl:attribute name="class">orderdate</xsl:attribute>    <xsl:value-of select="order_date" />  <xsl:when test="local-name(current())='customer'">    <xsl:attribute name="class">customer</xsl:attribute>    <xsl:value-of select="customer" />  <xsl:otherwise>    <xsl:value-of select="."/>  <xsl:otherwise><xsl:choose></p></xsl:for-each><body><html>

Link to comment
Share on other sites
dooberry Member

dooberry

Posted
  • Author
Posted

That's a very useful tip. That means there's a lot less code to write (templates can be a git for that!) and I can just change one part of the code to reflect different styles on the content - in fact there could just be an element on each node to reflect the style that should be used to display it, but that's getting too adventurous for now.I think I need to learn a lot about the div element now because my document needs to be laid out in various sections (and tables get on my nerves! :))Thanks for your help.

Link to comment
Share on other sites
dooberry Member

dooberry

Posted
  • Author
Posted

This is giving me a problem now. I can't get the template to work.I've used inline CSS in the template as I illustrated above, but the information is not being formatted by the XSL document.For example the XML reads:

<contact><name>Contact Name</name><address1>address</address1><address2>address</address2><address3>address</address3><town>here</town></contact>

The XSL reads:

<xsl:template match="contact"><style type="text/css">p{font-weight: bold;font-style: italic}</style><p><xsl:value-of select="name" /><xsl:value-of select="address1" /><xsl:value-of select="address2" /><xsl:value-of select="address3" /><xsl:value-of select="town" /></p></xsl:template>

Can anyone see anything wrong with this?Any help is appreciated.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

The only wrong thing I see is that the style is in the body. Have you tryed something like this:

<xsl:template match="contact"><html><head><style type="text/css">p{font-weight: bold;font-style: italic}</style></head><body><p><xsl:value-of select="name" /><xsl:value-of select="address1" /><xsl:value-of select="address2" /><xsl:value-of select="address3" /><xsl:value-of select="town" /></p></body></html></xsl:template>

Link to comment
Share on other sites
dooberry Member

dooberry

Posted
  • Author
Posted

Right,That didn't change anything - but I have found the source of the problem.I am abusing the InnerHTML property of a table cell to show the output of an XSL transformation and the same problem is happening as happened when I tried to create script within the table cell using this method. There are certain elements which are part of the OuterHTML property and styles are one of them. When I try and set the InnerHTML for the cell it strips everything down to the <p /> tag and removes any styles that may have been set up.The easiest way round this will be for me to open a new window to display the output because I can then just use "document.write()" to show the result.I'll let you know if this works - thanks for your help, it's been a voyage of discovery! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...