Skip to content

Instantly share code, notes, and snippets.

@janxious

janxious/01.html

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save janxious/7f0b529b50395a4d49a2 to your computer and use it in GitHub Desktop.
Save janxious/7f0b529b50395a4d49a2 to your computer and use it in GitHub Desktop.
Download ZIP
Automatic PDF Footnotes
Raw
01.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;
}
</style>
</head>
<body>
<p>
This text needs a footnote.<span class="footnote">I'm a footnote!</span>
</p>
</body>
</html>
Raw
02.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>
Raw
03.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