Marginalia

Side notes for (long) html pages.

by Andrej Barth

HTML

<main>
	<article>
		<div class="text-with-side-note">
			<h2>Text with Side Note (block)</h2>
			<p><a href="https://github.com/Draussenduscher/Marginalia">github.com/Draussenduscher/Marginalia</a></p>
			<p>Set the first »Hide« button to »Checked«. This avoids an undefined state of the radio button group. Checking a first input/label will override this initial status.</p>
			<input type="radio" name="side-notes" id="show-0"> <label for="show-0">Show Side Note</label>
			<input type="radio" name="side-notes" id="hide-0" checked> <label for="hide-0">Hide Side Note</label>
			<div class="side-note">
				<h3>Side Note A</h3>
				<p>This side note is shorter than the containing block.</p>
			</div>
			<h3>Next Header</h3>
		</div>
		<div class="text-with-side-note">
			<h2>Text with Side Note (inline)</h2>
			<input type="radio" name="side-notes" id="show-1"> 
			<input type="radio" name="side-notes" id="hide-1"> 
			<div class="side-note">
				<h3>Side Note B</h3>
				<p>This side is taller than the containing block. Take care for the best height.</p>
				<p>Marginalia can easily be upgraded, e.g. with CSS transitions for z-index and opacity.</p>
				<p>Calculate the width of the side note with respect to the containing block.</p>
			</div>
			<p>Only the button/link that leads to a <em>new</em> state is shown.
				<label for="show-1">Show Side Note</label>
				<label for="hide-1">Hide Side Note</label>
			</p>
			<h3>Header after Side Note</h3>
		</div>
	</article>
</main>

CSS

/* https://github.com/Draussenduscher/Marginalia */

article { width: 60%; }

.text-with-side-note { position: relative; background-color: hsla(0, 0%, 90%, .8); } /* Light grey for distinction, opacity for demonstration only */

.side-note { position: absolute; right: 0; top: 0; z-index: -1; 
	width: calc((100% - 60%) / (60 / 100)); /* Width related to containing main block */
	background-color: hsl(120, 20%, 90%); } /* Light green for distinction */

input { display: none; } /* Buttons hidden; comment this to monitor status of buttons */

label { color: green; cursor: pointer; }

label[for^=show] { visibility: visible; } /* Initial states */
label[for^=hide] { visibility: hidden; }

/* Toggle visibility of labels when checked */
input[id^=show]:checked ~ label[for^=show] { visibility: hidden; } /* Case 1: labels are siblings of paragraphs */
input[id^=show]:checked ~ label[for^=hide] { visibility: visible; }

input[id^=show]:checked ~ p label[for^=show] { visibility: hidden; } /* Case 2: labels are children of paragraphs */
input[id^=show]:checked ~ p label[for^=hide] { visibility: visible; }

input[id^=show]:checked ~ .side-note { right: calc(-1 * ((100% - 60%) / (60 / 100))); } /* Cases 1 and 2 */