Skip to content

Instantly share code, notes, and snippets.

@janxious janxious/01.html
Last active Aug 29, 2015

Embed
What would you like to do?
Automatic PDF Footnotes
<html>
<head>
<style type="text/css">
@page { size: A6; } /* Basic style for easier demonstration */
body { font-family: Verdana; } /* Basic style for easier demonstration */
.footnote {
float: footnote;
}
</style>
</head>
<body>
<p>
This text needs a footnote.<span class="footnote">I'm a footnote!</span>
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
@page { size: A6; } /* Basic style for easier demonstration */
body { font-family: Verdana; } /* Basic style for easier demonstration */
.footnote {
float: footnote;
background-color: #ffc0c0; /* a reddish background */
}
@page {
@bottom {
content: "Page " counter(page) " of " counter(pages);
background-color: #c0ffc0; /* a greenish background */
}
}
body {
background-color: #c0c0ff; /* a blueish background */
}
</style>
</head>
<body>
<p>
This text needs a footnote.<span class="footnote">I'm a footnote!</span>
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
@page { size: A6; } /* Basic style for easier demonstration */
body { font-family: Verdana; } /* Basic style for easier demonstration */
.footnote {
float: footnote;
background-color: #ffc0c0; /* a reddish background */
footnote-style-position: inside; /* forces marker inside footnote area */
}
.footnote::footnote-call {
/* controls the footnote markers in the main page text */
content: counter(footnote, symbols('*', '†', '‡'));
}
.footnote::footnote-marker {
/* controls the footnote markers in the footnote section */
content: counter(footnote, symbols('*', '†', '‡'));
}
@page {
@bottom {
content: "Page " counter(page) " of " counter(pages);
background-color: #c0ffc0; /* a greenish background */
}
}
body {
background-color: #c0c0ff; /* a blueish background */
}
</style>
</head>
<body>
<p>
This text needs a footnote.<span class="footnote">I'm a footnote!</span>
</p>
<p>
This text also needs a footnote.<span class="footnote">I'm a footnote, too!</span>
</p>
<p>
This text needs a footnote, too.<span class="footnote">Don't forget this footnote!</span>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.