Is it possible to prefix an attribute content value with a literal?

Example (taken from Prince docs)
css
picture { content: attr("src", url) }

If I wanted to prefix the all image srcs with a path like "./myPDFimages/" for PDF generation, I might do something like:
css
picture { content: "./myPDFimages/" + attr("src", url) }

Unfortunately, this doesn't work. Any suggestions? -John

John Clarke
Cornerstone Systems Northwest Inc.

Another related question: is where a way to alter an anchor href value? like for instance, depending the destination of the URL (using regular expressions or something) modify it so that it: a) is disabled, b) re-routed to a local PDF desination, or c) re-routed to another external location.

For example, Mike Day helped me with coloring links depending on their destination:
css
a[href^="#"] { color: blue} /* internal links */
a[href^="http://"],a[href^="https://"],a[href^="ftp://"] { color: #2695FF} /* external HTTP links */

Couldn't I then adjust the content of the URL using a similar technique? My first inclination would be to parse the entire source document before generating a PDF so that it meets the above specifications. However, I really like the idea of using CSS to do the formating because it is much easier to maintain and update than parsing code.

Any suggestions welcome.

-John

John Clarke
Cornerstone Systems Northwest Inc.

At the moment this does not seem to be possible:
http://www.w3.org/TR/2005/WD-css3-values-20050726/#attribute
But appropriate CSS3 modules are on working draft stage and maybe final spec will provide functionality that you need.

If number of images in your documents is not large and you use similar naming notations in all documents you can cook style sheets like

/* Use local JPG */
picture[src*="image1"] {content:url(image1.jpg);}
picture[src*="image2"] {content:url(image2.jpg);}
picture[src*="image9"] {content:url(image9.jpg);}

/* Use local PNG */
picture[src*="image1"] {content:url(image1.png);}
picture[src*="image2"] {content:url(image2.png);}
picture[src*="image9"] {content:url(image9.png);}

/* Load from web*/
picture[src*="image1"] {content:url(http://mydomain.com/image1.png);}
picture[src*="image2"] {content:url(http://mydomain.com/image2.png);}
picture[src*="image9"] {content:url(http://mydomain.com/image9.png);}

You can try XML based approach.

<picture src="&prefix;image1&ext;"/>

with 'prefix' and 'ext' being defined in configurable DTD

<!ENTITY % prefix "http://mydomain.com">
<!ENTITY % ext ".png">

It is not possible to manipulate values in this manner purely using CSS at this time, some other method or combination of methods must be used.

It would be interesting to integrate regular expressions and other abilities into CSS, but it is likely that such features would not find wide support in other CSS implementations like web browsers for example.

One possibility would be to add a kind of generic extension function like this:

img {
    content: prince-extension(make-url(concat("./myimages/", attr(src))));
}

As you can see, the syntax could get verbose and unwieldy quite quickly, so it would be necessary to weigh up the advantages of doing things in CSS in this manner vs. using some other processing tool.

Best regards,

Michael

Lynx, Michael: Thanks for your insight. I think I understand the dilemma now. My basic need (and one that is likely to reoccur with Prince clients) is to be able to have low res images for web-based clients and high res for PDFs of the same content.

Lynx's solution in another post:
css
@media print {img.dual {content:attr(pdfsrc,url)} }
html
<img class="dual" alt="" src="screen.png" pdfsrc="print.png" />

works well, I think. The prefix would have made the markup a little cleaner, but the above solution does the trick. Many thanks for your help.
-John

John Clarke
Cornerstone Systems Northwest Inc.