469,290 Members | 1,887 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,290 developers. It's quick & easy.

reference to external CSS or JS from XSL stylesheet

How can I make a reference to an external CSS or JS file that is
relative to the XSL stylesheet, and not relative to the XML data?

If you simply put : <link rel="stylesheet" type="text/css"
href="ui/demo.css" ></link>
in your XSL file, this link will always be relative to the location
where the XML file is.
For example, suppose I have following XML data (test.xml):

<?xml version="1.0" ?>
<?xml:stylesheet type="text/xsl" href="ui/show.xsl" ?>
<demo>text</demo>

In a sub-folder "ui" I stored a CSS file (demo.css):
..demo {
color:red;
}

and the following XSL file (show.xsl):

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="demo">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ui/demo.css" ></link>
</head>
<body>
<span class="demo"><xsl:value-of select="."/></span>
</body>
</html>
</xsl:template >
</xsl:stylesheet>
As you can see in show.xsl I had to use the relative path
"ui/demo.css" to include the CSS stylesheet, which is logic in the XSL
transformation sense, and it works, but is not a good solution,
because what if I move the XML file to another folder and change the
XSL reference in it? Then the reference to the CSS file will still be
relative to the XML data, and then it does not work anymore.

So, I am looking for a way to include these files relative to the XSL
file. I think there is no way to discover the "uri" to the XSL file,
from within the XSL file, is there? If so, this could be used to
adjust the references.

The only solution that I encountered so far is to store the CSS and JS
data in separate XSL files, and use the xsl:import or xsl:link, and
then use call-template to include the data. For testing and
maintenance I personally do not like this solution either...

Please help...
Jul 20 '05 #1
3 12494
"allard poldermans" <al****@turpinvision.nl> wrote in message
news:5d**************************@posting.google.c om...
How can I make a reference to an external CSS or JS file that is
relative to the XSL stylesheet, and not relative to the XML data?


When I started putting XML files in a subdirectory, I made soft
links to the library directories in it. So from every directory
with XML files in it, CSS and XSLT (or JS) directories at least
appear as immediate subdirectories, although in reality there's
only one real CSS directory, under the root; all the other ones
are links.

This sort of solves your general problem by assuring that any
other library directory is at ../X.

Groetjes,
Maarten Wiltink
Jul 20 '05 #2
Thanks for your answer, but I'm afraid I don't understand it...

What do you mean with a soft link, do you have an example? Did you
place these links inside the XML files? (I hope not). And what do you
do under the root? In an offline scenario the root would be the root
of the client's pc. I think an example would help.

groetjes, Allard
"Maarten Wiltink" <ma*****@kittensandcats.net> wrote in message news:<3f***********************@news.xs4all.nl>...
"allard poldermans" <al****@turpinvision.nl> wrote in message
news:5d**************************@posting.google.c om...
How can I make a reference to an external CSS or JS file that is
relative to the XSL stylesheet, and not relative to the XML data?


When I started putting XML files in a subdirectory, I made soft
links to the library directories in it. So from every directory
with XML files in it, CSS and XSLT (or JS) directories at least
appear as immediate subdirectories, although in reality there's
only one real CSS directory, under the root; all the other ones
are links.

This sort of solves your general problem by assuring that any
other library directory is at ../X.

Groetjes,
Maarten Wiltink

Jul 20 '05 #3
"allard poldermans" <al****@turpinvision.nl> wrote in message
news:5d**************************@posting.google.c om...
Thanks for your answer, but I'm afraid I don't understand it...

What do you mean with a soft link, do you have an example? Did you
place these links inside the XML files? (I hope not). And what do you
do under the root? In an offline scenario the root would be the root
of the client's pc. I think an example would help.


Excerpted from a recursive directory listing of the local mirror of
my public website:

<logical root>:
total 613
drwxrwxr-x 8 maarten 1024 Nov 4 23:43 ./
drwxrwxr-x 3 maarten 1024 Aug 5 15:07 ../
drwxrwxr-x 2 maarten 1024 Nov 3 14:35 css/
drwxrwxr-x 2 maarten 1024 Nov 2 14:33 dtd/
drwxrwxr-x 2 maarten 1024 Nov 5 17:00 xslt/
drwxrwxr-x 2 maarten 2048 Nov 5 00:19 properties/
-rw-rw-r-- 1 maarten 1584 Nov 4 22:40 caesar.xhtml
-rw-rw-r-- 1 maarten 275 Nov 2 15:58 codefragments.xml
-rw-rw-r-- 1 maarten 791 Nov 3 19:57 index.html
-rw-rw-r-- 1 maarten 3299 May 3 2002 nohtml.html
-rw-rw-r-- 1 maarten 925 Nov 3 19:58 personal.html
-rw-rw-r-- 1 maarten 2225 Nov 3 19:59 programming.html
-rw-rw-r-- 1 maarten 41522 Nov 3 19:59 programmingstyle.html
-rw-rw-r-- 1 maarten 65670 Nov 3 20:00 properties.html

css, dtd, and xslt are directories with library files; properties contains
content materials.
css:
total 5
drwxrwxr-x 2 maarten 1024 Nov 3 14:35 ./
drwxrwxr-x 8 maarten 1024 Nov 4 23:43 ../
-rw-rw-r-- 1 maarten 206 Nov 3 18:41 delphi-code.css
-rw-rw-r-- 1 maarten 140 Nov 3 18:40 narrative.css
-rw-rw-r-- 1 maarten 174 Nov 3 18:41 programming.css

dtd:
total 4
drwxrwxr-x 2 maarten 1024 Nov 2 14:33 ./
drwxrwxr-x 8 maarten 1024 Nov 4 23:43 ../
-rw-rw-r-- 1 maarten 168 Nov 2 14:33 pages-1.0.dtd
-rw-rw-r-- 1 maarten 264 Nov 1 16:04 pages-1.1.dtd
lrwxrwxrwx 1 maarten 13 Nov 2 14:32 pages-1.dtd -> pages-1.1.dtd
lrwxrwxrwx 1 maarten 11 Oct 23 23:07 pages.dtd -> pages-1.dtd

xslt:
total 22
drwxrwxr-x 2 maarten 1024 Nov 5 17:00 ./
drwxrwxr-x 8 maarten 1024 Nov 4 23:43 ../
-rw-rw-r-- 1 maarten 4624 Nov 2 15:56 codefragments.xslt
-rw-rw-r-- 1 maarten 447 Nov 5 16:57 id.xslt
-rw-rw-r-- 1 maarten 8487 Nov 4 23:43 links.xslt
-rw-rw-r-- 1 maarten 3709 Nov 5 00:02 pages.xslt

properties:
total 82
drwxrwxr-x 2 maarten 2048 Nov 5 00:19 ./
drwxrwxr-x 8 maarten 1024 Nov 4 23:43 ../
lrwxrwxrwx 1 maarten 6 Nov 1 20:28 css -> ../css/
lrwxrwxrwx 1 maarten 6 Nov 2 22:25 dtd -> ../dtd/
lrwxrwxrwx 1 maarten 7 Nov 2 16:47 xslt -> ../xslt/
-rw-rw-r-- 1 maarten 1993 Nov 4 12:45 index.xhtml
-rw-rw-r-- 1 maarten 2022 Nov 4 12:45 index.xml
-rw-rw-r-- 1 maarten 1262 Nov 5 00:12 properties-01.xhtml
-rw-rw-r-- 1 maarten 4244 Nov 4 20:10 properties-02.xhtml
-rw-rw-r-- 1 maarten 4369 Nov 4 20:10 properties-03.xhtml
-rw-rw-r-- 1 maarten 2879 Nov 4 20:10 properties-04.xhtml
-rw-rw-r-- 1 maarten 5258 Nov 4 20:10 properties-05.xhtml
-rw-rw-r-- 1 maarten 6939 Nov 4 20:11 properties-06.xhtml
-rw-rw-r-- 1 maarten 8177 Nov 4 20:12 properties-07.xhtml
-rw-rw-r-- 1 maarten 5203 Nov 4 20:12 properties-08.xhtml
-rw-rw-r-- 1 maarten 7839 Nov 4 20:11 properties-09.xhtml
-rw-rw-r-- 1 maarten 6503 Nov 4 20:11 properties-10.xhtml
-rw-rw-r-- 1 maarten 7673 Nov 4 20:11 properties-11.xhtml
-rw-rw-r-- 1 maarten 8552 Nov 4 20:11 properties-12.xhtml

This is a non-root directory with content in it. It has symbolic links
to all the library files, so from any "content" file, any "library"
file will be in a ./X path, and from any library file, any other library
file will be in a ../X path.

Groetjes,
Maarten Wiltink
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Shawn Modersohn | last post: by
12 posts views Thread by Peter Collinson | last post: by
6 posts views Thread by Christopher Benson-Manica | last post: by
2 posts views Thread by Markus Ernst | last post: by
26 posts views Thread by HarryO | last post: by
7 posts views Thread by Dan Nash | last post: by
2 posts views Thread by Billy Cousins | last post: by
1 post views Thread by Michel Couche | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.