Last active
August 29, 2015 14:24
-
-
Save janxious/7f0b529b50395a4d49a2 to your computer and use it in GitHub Desktop.
Automatic PDF Footnotes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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