Beispiel:CSS-footnotes-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
article {
counter-reset: footnotes;
}
article p {
max-width: 30em;
}
[role="doc-noteref"] {
counter-increment: footnotes;
padding-left:.25em;
padding-right: 0.5em;
text-decoration: none;
}
[role="doc-noteref"]::after {
content: '[' counter(footnotes) ']';
vertical-align: super;
font-size: 0.75em;
}
[role="doc-noteref"]:focus::after {
outline: thin dotted;
outline-offset: 2px;
}
article > footer {
margin-top: 2em;
border-top: 1px solid silver;
font-size: 0.8em;
}
article > footer ol {
padding-left: 2em;
}
x-ref {
font-style: italic;
}
x-ref::before {
content: '(';
}
x-ref::after {
content: ')';
}
</style>
<title>Fußnoten - 4</title>
</head>
<body>
<article>
<h1>Fußnoten - dynamisch gesetzt</h1>
<p>Fußnoten<x-ref>Fußnoten sind Anmerkungen am Seitenende. Sie liefern Verweise auf verwendete Quellen oder kommentieren den Haupttext.</x-ref> manuell einzufügen und zu pflegen kann sich bei fortlaufenden Textergänzungen zu einem Problem entwickeln.</p>
<p>CSS<x-ref>Cascading Style Sheets</x-ref> ermöglicht es aber mit Counters<x-ref>CSS Counters sind, kurz gesagt, Variablen deren Werte durch CSS-Regeln inkrementiert (jeweils um 1 vergrößert) werden. </x-ref> Referenzen mit fortlaufenden Nummern hinzuzufügen.
Diese werden dann automatisch in einer sortierten Liste (ol) dargestellt. So werden Fußnoten zum Kinderspiel.</p>
<p>Dieses Beispiel verwendet custom elements<x-ref>SELF-Wiki: <a href="https://wiki.selfhtml.org/wiki/HTML/Web_Components/custom_elements">Custom Elements</a></x-ref>, die dann mit JavaScript automatisch durch Fußnoten ersetzt werden. </p>
<footer>
<h2 id="footnote-label">Fußnoten</h2>
<ol>
</ol>
</footer>
</article>
<script>
document.addEventListener('DOMContentLoaded', function() {
const xRefs = document.querySelectorAll('x-ref');
const footnoteList = document.querySelector('footer ol');
const footnoteLabel = document.getElementById('footnote-label');
xRefs.forEach((xRef, index) => {
const footnoteNumber = index + 1;
const footnoteId = 'footnote-' + footnoteNumber;
const refId = 'ref-' + footnoteNumber;
// Create the footnote reference link
const refLink = document.createElement('a');
refLink.setAttribute('role', 'doc-noteref');
refLink.setAttribute('href', '#' + footnoteId);
refLink.setAttribute('id', refId);
refLink.textContent = '';
// Replace <x-ref> with the reference link
xRef.parentNode.replaceChild(refLink, xRef);
// Create the corresponding footnote entry in the <ol>
const footnoteItem = document.createElement('li');
footnoteItem.setAttribute('id', footnoteId);
footnoteItem.innerHTML = xRef.innerHTML + ` <a href="#${refId}">↩︎</a>`;
footnoteList.appendChild(footnoteItem);
});
});
</script>
</body>
</html>
