<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <title>Footnotes Sample</title>
        <link href="../common.css" rel="stylesheet" type="text/css" />
        <style rel="stylesheet" type="text/css">
            @page {
                counter-reset: footnote;
            }
            
            @media print {
                .footnote {
                    float: footnote;
                }
                
                .asterisksfootnote {
                    float: footnote;
                }
                
                .asterisksfootnote::footnote-call {
                    content: counter(footnote, asterisks)
                }
                
                .asterisksfootnote::footnote-marker {
                    content: counter(footnote, asterisks) " ";
                }
            }
            
            @media screen {
                .footnote {
                    display: none;
                }
                
                .classicfootnote {
                    display: none;
                }
            }
            
            p {
                break-inside: avoid;
            }
            
            hr {
                margin: 0pt 14% 25pt;
            }
            
        </style>
    </head>
    <body>
        <h1>Footnotes Sample</h1>
                
        <h2>Introduction</h2>
        <p>Footnotes are used in print layouts to move a note or reference out of the main content with the objective of increasing 
        readability. Typically footnotes are placed at the bottom of a page and flagged with a superscript number followed by the text 
        of the footnote.</p>
        <p>The following is an illustration showing how two footnotes on a page could look like:</p>
        <div class="result">
            This text<sup>1</sup> is marked with two footnotes<sup>2</sup>.<br/>
            <br/>
            ...<br/>
            <br/>
            ----<br/>
            <sup>1 </sup>This is the first footnote.
            <br/>
            <sup>2 </sup>And this is the second footnote.
        </div>
        <p>And this is the same document fragment realized using CSS:</p>
        <div class="result">
            This text<span class="footnote">This is the first footnote.</span> is marked with two footnotes<span class="footnote">And this is the second footnote.</span>.
        </div>
        <p>Both footnotes are placed inside the footnote area at the bottom of this page.</p>
        
        <h2>How to Create Footnotes Using CSS</h2>
        <p>In XHTML, transforming an element into a footnote can be achieved using only one style:</p>
        <div class="code">
            <code>.footnote {
    float: <b>footnote</b>;
}</code>
        </div>
        <p>This rule declares all elements with the class "footnote" to be floated boxes of the type "footnote". Such boxes will be 
        automatically moved to the footnote area which will be discussed in the following chapter.</p>
        
        <h2>The Footnote Area</h2>
        <p>The footnote area is the area on each page where all footnotes will be placed. It is usually located at the bottom of the page. 
        Every page can have a footnote area, however if there are no footnotes on a page, the footnote area will be left out to increase 
        the available space for the main content of the document.</p>
        <p>In CSS, a footnote area represents a page area. Such areas can be addressed by so-called at-rules ("@" followed by the name of 
        the area). Thus a footnote area can be addressed by the following at-rule:</p>
        <div class="code">
            <code>@page {
    <b>@footnote</b> {
        border: none;
    }
}</code>
        </div>
        <p>This at-rule disables the border of all footnote areas.</p>
        
        <h2>Footnote Calls and Markers</h2>
        <p>When a document is laid out and the layout engine reaches a position inside the main text at which a note should occur, a 
        so-called "footnote call" is placed at this position. The footnote text of the current note is inserted into the footnote area 
        of the current page and a so-called "footnote marker", which obtains the same value as the call, is placed before this text.</p>
        <p>In CSS terminology footnote calls and markers are pseudo elements which can be addressed using pseudo element declarations. 
        The following example demonstrates, how to change the appearance of calls and markers:</p>
        <div class="code">
            <code>.asterisksfootnote::footnote-call {
    content: counter(footnote, asterisks)
}

.asterisksfootnote::footnote-marker {
    content: counter(footnote, asterisks) " "
}</code>
        </div>
        <p>The result looks like this:</p>
        <div class="result">
            This text<span class="asterisksfootnote">This is the first footnote.</span> is marked with two footnotes<span class="asterisksfootnote">And this is the second footnote.</span>.
        </div>
        
        <h2>Numbering of Footnotes</h2>
        <p>The numbering of footnotes is realized by a predefined CSS counter named "footnote". By default, footnotes are numbered 
        continuously throughout the document. Restarting the numbering on every page can be accomplished using the following style:</p>
        <div class="code">
            <code>@page {
    counter-reset: footnote;
}</code>
        </div>
        <p>This rule is also used inside this document to force footnote numbering on a per page basis.</p>
    </body>
</html>