Log in / Register

Forum › How do I...?

Styling content reused with target-content

Jellby
Consider the following test

<html>
<head>
<style>
a {
  content: target-content(attr(href));
}
.invisible {
  display: none;
}
</style>
</head>
<body>

<p><a href="#a1">Test</a></p>

<div id="a1">
<p class="visible">A visible paragraph with <b>bold</b></p>
<p class="invisible">An invisible paragraph</p>
</div>

</body>
</html>


The link content is replaced with the content of its target (I'd like to use this for footnotes, when the HTML does not have them inline). The problem is the styling of the content thus reused is completely lost. Is there some way to retain the formatting, or, better yet, to have a different format for both occurrences of the content?

Having a look at the CSS3 draft, it seems this could be supported by target-move(), while target-content() looks like target-text() instead.
mikeday
Yes, I think target-move() from GCPM is the solution. We will be implementing more of GCPM in future releases of Prince.
Jellby
Are we there yet?

I'm still looking for a solution :)
mikeday
Not yet! But we have JavaScript now, and that can transform the document in interesting ways before conversion. Perhaps that could help with non-inline footnotes?
Jellby
I'd appreciate if you could show a sample, bonus points if it can take the footnotes from a separate HTML file (also specified in the Prince command-line) and if it does not require adding script tags to the HTML files (modifying an external CSS file is OK, if it is possible to import javascript from a CSS).
mikeday
You can apply external script files using the --script option, and they can register event handlers such as window.onload which can then transform the document in various ways. What exactly do you want it to do? Take the footnotes from an external HTML file, grab them by ID and insert them inline in the main document?
Jellby
Yes. This is for converting ePub files to PDF. Since most ePub readers do not support proper footnotes, they are coded as end notes, in a separate HTML (with links from/to the main text, of course). When creating the PDF with Prince, I'd like to place the footnotes as real footnotes.

I've created a Calibre plugin (http://www.mobileread.com/forums/showthread.php?t=230027) that does the conversion automatically, and it supports placing Prince-specific styles (which will be used only when converting to PDF, not when viewing the book in an ePub reader) in a separate CSS file. That's why I'd like to do everything through CSS, including importing javascript, otherwise I'd have to modify the command line for each book, or include another Prince-specific file.
mikeday
I tried whipping up a quick example, and it was a bit difficult. Initially I thought you could use a command-line like this:
prince maindoc.html --script epub.js

There would need to be a link to footnotes.html inside maindoc.html which epub.js could find, eg. using the <link> element or something like that.

However, it's difficult to load another HTML file from JavaScript at the moment. I forgot that the DOMParser interface only works on strings, and the XMLHttpRequest class only works on remote HTTP URLs, not local files.

I'm not sure if there are any standard browser APIs for accessing local files, or if we will need to invent our own; either way it would be nice to keep it simple.
Jellby
I found this discussion (http://www.dynamicdrive.com/forums/showthread.php?67448-document-getElementById-from-another-page), which says to use AJAX and jQuery, but it didn't work in Opera or Prince.

Edited by Jellby

mikeday
It might be possible to make this work. Is it okay if the documents are accessed from HTTP URLs, instead of local files?
Jellby
No, it should work offline.

Even if it can be made to work, I hope something like target-move() is implemented in a not-too-far future.
jim_albright
I would use XSLT to get files combined into what I needed (Saxon), then run Prince.

Jim Albright
Wycliffe Bible Translators