SSDN - Simultaneous XSL and CSS Stylesheets?

XML Editor

Sign Up

Search

Options

Chat

Help

News

Log in

Not Logged in

Topic

Topic Page 1 2 3 4 5 6 7 8 9

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 12 Jan 2007 01:40 PM

My XSL stylesheet has some special styling features, such as multiple-level numbering for paragraph headings and inserting text at key points such as chapter labels, which works fine when rendered by my IE6 browser. However, my browser does not seem to support XSL-FO. So I've created a CSS stylesheet to handle most of the other styling.

The problem is that when both stylesheets are referenced in my XML document, the browser only applies the XSL formatting. The only way I can get any of the CSS styles to work is to completely remove the XSL stylesheet reference in the XML document, but then the multi-level paragraph numbering and other styles go away.

Is there a command or some other way to apply both stylesheets at the same time?

Thanks for your help.
Charlie

Ivan Pedruzzi

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Ivan Pedruzzi
Date: 12 Jan 2007 03:27 PM

Hi Judy,

Could you please post a small example?

Ivan Pedruzzi
Stylus Studio Team
http://www.stylusstudio.com/xml_download.html

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 12 Jan 2007 04:16 PM

Don't know if you need the DTD or not, but I attached it just in case.
Here is the first part of my XML document:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="docnavy-etm.css"?>
<?xml-stylesheet type="text/xsl" href="docnavy-etm.xsl"?>
<!DOCTYPE docnavy-etm SYSTEM "050512navy-etm.dtd">

<docnavy-etm>

<volume num="1">
<title>OPERATION AND MAINTENANCE INSTRUCTIONS WITH PARTS BREAKDOWN ORGANIZATIONAL LEVEL COMMUNICATIONS DATA LINK SYSTEM (CDLS)</title>

<body>

<chapter tocentry="1">
<title>Title1</title>
<para>Text</para>
</chapter>

<chapter tocentry="1">
<title>Title2</title>
<para>Text</para>
</chapter>

<chapter tocentry="1">
<title>Title3</title>
<para>Text</para>
</chapter>

<chapter tocentry="1">
<title>FUNCTIONAL DESCRIPTION</title>


<para0 tocentry="1">
<title>INTRODUCTION</title>
<para>This section provides a functional description of the Communications Data Link System (CDLS).</para>


<subpara1 tocentry="1">
<title>FUNCTIONAL DESCRIPTION OVERVIEW</title>
<para>This section provides an overall picture of the CDLS and lists all the functions of the signals and controls used by the system in a table.</para>


<subpara2 tocentry="1">
<title>Introduction</title>
<para>Figure 4-1 shows the relationship between the CDLS and the associated systems that provide the overall data recovery and analysis operation.</para>


<para><figure tocentry="1" label="4-1">
<title>CDLS Relationship to Entire Data Operation</title>
<graphic boardno="g25810102" reprowid="5.5in"/>
</figure></para>

<para>Figure 4-2 shows the groups that comprise a CDLS and the interfaces between the groups.</para>

Here is part of my XSL stylesheet:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/docnavy-etm">
<xsl:apply-templates select="*"/>
</xsl:template>

<xsl:template match="volume"><b>VOLUME <xsl:value-of select="@num"/>
</b><xsl:apply-templates/>
</xsl:template>

<xsl:template match="chapter">
<p><b>CHAPTER <xsl:number format="1" level="multiple"
count="chapter"/><br/></b>
<xsl:apply-templates/></p>
</xsl:template>

<xsl:template match="title">
<b><xsl:apply-templates/></b>
</xsl:template>

<xsl:template match="para0">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="subpara1">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0|subpara1"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="subpara2">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0|subpara1|subpara2"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="subpara3">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0|subpara1|subpara2|subpara3"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="step1">
<xsl:number format="a. "/>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="step2">
<xsl:number format="(1) "/>
<xsl:apply-templates/><xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="step3">
<xsl:number format="(a) "/>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="figure">
<p><img><xsl:apply-templates select="graphic"/></img></p>
<b>Figure <xsl:value-of select="@label"/>.
<xsl:apply-templates select="*"/><xsl:text>.
</xsl:text></b>
</xsl:template>

<xsl:template match="table">
<b>Table <xsl:value-of select="@label"/>.
<xsl:apply-templates select="title"/>.</b>
<html>
<table border="1">
</table>
</html>
<xsl:apply-templates/>
</xsl:template>

</xsl:stylesheet>

And here is part of my CSS file:

docnavy-etm {
font-family: Times New Roman;
font-size: 11pt
}

volume {
display: block;
font-family: Arial, sans-serif;
font-size: 14pt
}

volume title {
display: block;
text-align: center;
font-family: Arial, sans-serif;
font-size: 20pt;
font-weight: bold
}

body {
font-family: Times New Roman;
font-size: 11 pt
}

chapter {
display: block;
margin-top: 12pt;
text-align: center;
font-family: Times New Roman, serif;
font-size: 11pt;
font-weight: bold
}

chapter title {
display: block;
text-align: center;
font-family: Times New Roman, serif;
font-size: 11pt;
font-weight: bold
}

para0 {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: left;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

para0 title {
display: block;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: left;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

subpara1 {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: justify;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

subpara1 title {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: justify;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

subpara2 {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: justify;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

subpara2 title {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: justify;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

subpara3 {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: justify;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

subpara3 title {
display: run-in;
margin-top: 12pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
text-align: justify;
font-family: Times New Roman;
font-size: 11pt;
font-weight: bold
}

para {
display: block;
font-weight: normal;
text-align: justify;
margin-top: 12pt;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
}

figure {
display: run-in;
font-weight: bold;
text-align: center;
margin-top: 12pt;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
}

figure title {
display: block;
font-weight: bold;
text-align: center;
margin-top: 12pt;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
}

table {display: table }

table title {
display: table-caption;
text-align: center
}

row {display: table-row }
entry {
display: table-cell
font-family: Times New Roman;
font-size: 10pt;
font-weight: normal
}

randlist {
display: list-item;
list-style-position: inside
}

Thanks for your help!
Charlie

050512navy-etm.dtd
DTD

Tony Lavinio

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Tony Lavinio
Date: 15 Jan 2007 01:07 PM

The problem is that you are including the part to apply the CSS
in your XSLT as a literal - but the HTML engine isn't styling the
XSLT, but it's output.

Make your XSLT generate the
<?xml-stylesheet type="text/css" href="docnavy-etm.css"?>
PI in the output, and then it _should_ be picked up.

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 15 Jan 2007 01:14 PM

Sorry, but I'm new to the XML/XSL/CSS world. What do you mean by "Make your XSLT generate the
<?xml-stylesheet type="text/css" href="docnavy-etm.css"?>
PI in the output"? How do I do that?

Charlie

Tony Lavinio

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Tony Lavinio
Date: 16 Jan 2007 09:16 AM

See http://www.w3.org/TR/xslt#section-Creating-Processing-Instructions -
it actually has an example that is almost identical to your needs.

You would want to put this as the first output of your stylesheet:

<xsl:processing-instruction name="xml-stylesheet">href="docnavy-etm.css" type="text/css"</xsl:processing-instruction>

This would write out the PI into the HTML output, so that the browser
would see it and use it against the HTML.

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 16 Jan 2007 01:00 PM

Sorry, but that doesn't seem to work. I copied and pasted your PI into my XSL stylesheet. When I placed it immediately after my <xsl:stylesheet...> declaration, I got an error message, "Keyword xsl:stylesheet may not contain xsl:processing-instruction." When I placed it immediately before my <xsl:stylesheet...> declaration, I got this error message:

"Reference to undeclared namespace prefix: 'xsl'. Error processing resource 'file:///Z:/TECHMAN/2581 CDLS/EE105-AS-OMP-010_U...
<xsl:processing-instruction name="xml-stylesheet">href="docnavy-etm.css" type="text/css"</xsl:processing-instructio... "

In desperation I even tried pasting it into my CSS stylesheet, but of course that didn't work either.

What am I missing here?

Tony Lavinio

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Tony Lavinio
Date: 16 Jan 2007 03:58 PM

Paste it right after the <xsl:template match="/docnavy-etm"> line.
You can only generate content from within templates, and you want it
to be the first thing written.

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 16 Jan 2007 04:13 PM

Okay, I moved the PI and the error messages are gone. However, the CSS styles still have no effect. Now what?

Tony Lavinio

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Tony Lavinio
Date: 16 Jan 2007 07:28 PM

Did you View Source in the browser to make sure the PI looks
correct?

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 16 Jan 2007 07:42 PM

Here's the content of the View Source. It looks fine to me. Am I missing something?

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/docnavy-etm">
<xsl:processing-instruction name="xml-stylesheet">href="docnavy-etm.css" type="text/css"</xsl:processing-instruction>
<xsl:apply-templates select="*"/>
</xsl:template>

<xsl:template match="volume"><b>VOLUME <xsl:value-of select="@num"/>
</b><xsl:apply-templates/>
</xsl:template>

<xsl:template match="chapter">
<p><b>CHAPTER <xsl:number format="1" level="multiple"
count="chapter"/><br/></b>
<xsl:apply-templates/></p>
</xsl:template>

<xsl:template match="title">
<b><xsl:apply-templates/></b>
</xsl:template>

<xsl:template match="para0">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="subpara1">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0|subpara1"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="subpara2">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0|subpara1|subpara2"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="subpara3">
<b><xsl:number format="1 " level="multiple"
count="chapter|para0|subpara1|subpara2|subpara3"/></b>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="step1">
<xsl:number format="a. "/>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="step2">
<xsl:number format="(1) "/>
<xsl:apply-templates/><xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="step3">
<xsl:number format="(a) "/>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="figure">
<p><img><xsl:apply-templates select="graphic"/></img></p>
<b>Figure <xsl:value-of select="@label"/>.
<xsl:apply-templates select="*"/><xsl:text>.
</xsl:text></b>
</xsl:template>

<xsl:template match="table">
<b>Table <xsl:value-of select="@label"/>.
<xsl:apply-templates select="title"/>.</b>
<html>
<table border="1">
</table>
</html>
<xsl:apply-templates/>
</xsl:template>

</xsl:stylesheet>

Tony Lavinio

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Tony Lavinio
Date: 17 Jan 2007 05:21 PM

Can you try putting in the full path of the CSS document into the PI?
If you are previewing from Stylus Studio, then the base location is in
the temp directory, since that's where the temporary preview document
is located.

We can't try it here; we don't have all the pieces.

You could zip up the css, dtd, xslt and xml and send them along
to stylus-field-report (at) progress.com, and we could take a look
if this last step doesn't work.

Judy Hanson

Subject: Simultaneous XSL and CSS Stylesheets?
Author: Judy Hanson
Date: 17 Jan 2007 06:14 PM

Sad to say, but that didn't work either. I have zipped the pertinent files and am sending them to you.

I really appreciate all the time you're taking to help me. Thanks!
Charlie

Topic Page 1 2 3 4 5 6 7 8 9

Powered by Stylus Studio, the world's leading XML IDE for XML, XSLT, XQuery, XML Schema, DTD, XPath, WSDL, XHTML, SQL/XML, and XML Mapping!

Go to Conference:

Log In Options Username: Password:

Site Map | Privacy Policy | Terms of Use | Trademarks

Stylus Studio® and DataDirect XQuery ™are from DataDirect Technologies, is a registered trademark of Progress Software Corporation, in the U.S. and other countries. © 2004-2016 All Rights Reserved.