Menu
The usual method for creating cross-references in LaTeX is to put a \label inside something you want to refer to later, and then use \ref. So for example, writing as we saw in Section~\ref{intro} in the LaTeX source might produce "as we saw in Section 1" in the final output. Is it possible to get the same effect using just HTML and CSS? Newer features of CSS allow sections and so on to be numbered automatically, but I haven't found anything that lets you reference these counter values from elsewhere in the document.
Here is a concrete example:
<!DOCTYPE html>
<html>
<head>
<title>Cross references</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: section;
}
section > h1::before {
counter-increment: section;
content: counter(section) ". ";
}
</style>
</head>
<body>
<section>
<h1 id="intro">Introduction</h1>
<p>Pineapples contain essential vitamins.</p>
</section>
<section>
<h1>Further discourse on pineapples</h1>
<p>As we saw in Section ??, pineapples contain essential vitamins.</p>
</section>
</body>
</html>
In this example, all the section headings are prepended with an automatically generated number. I would like to know if there is any HTML markup or CSS styling I could use in place of ?? that will insert the number corresponding to #intro.
I realize I could use <a href="#intro"> to create a cross-hyperlink to the Introduction, but I'd like to include the section number in the link text as well.
If this is not possible with HTML and CSS alone, are there any JavaScript libraries for adding cross-references within a document?
670
A better way for me to have phrased this question (in hindsight) would have been "How can you access content generated automatically by CSS without using JavaScript?", and that these questions are relevant:
It looks like accessing the automatically generated counter values is not easy even with JavaScript, and not possible without it, so that answers my question.
There are a number of documents from the W3C that discuss counters and generated content, but none as far as I could tell discuss referencing generated content from other parts of a document:
There is a note in the W3C's List of suggested extensions to CSS that mentions exactly the cross-reference problem - it comes from an email written in 1998, and I haven't found any follow-up work, so I guess this wasn't a high priority.
Update
The CSS Generated Content for Paged Media Module discusses cross references explicitly, and describes the target-counter and target-text functions to implement them with CSS. However, this is a working draft dated 29 November 2011; these functions don't appear to be implemented in any major browser. An article from A List Apart talks about using these CSS features to produce PDF eBooks from HTML using some random propriety tools.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
