This style expects a page layout like the
following :
<article>
<header><!-- No whitespace --><h1>
<span><!-- Header information --></span>
<span><!-- Give each line a <span> --></span>
</h1></header>
<section>
<h2 id="section_id">
<!-- Section title -->
<a href="#section_id"><!-- Empty --></a>
<a href="#"><!-- Empty --></a>
</h2>
<div class="PARAGRAPHS">
<!-- Section content -->
</div>
</section>
<footer>
<!-- Footer information -->
</footer>
</article>
A <div> or <aside> with role="note" can be used to create marginal notes.
Using them for paragraph content is possible, but not recommended due to size constraints.
Make sure not to leave whitespace at the
beginning of <p> tags, as it will be rendered after
the pilcrow. Use <span class="DASH"> to wrap
em‑dashes—like this. <strong> has a very
unconventional appearance.
Always wrap <p> and <pre> tags in a <div
class="PARAGRAPHS">. You can use <b> inside of
<pre> tags to accent special characters, for
example in lists :
+ Like this one.
The <br> element will not be displayed inside of
<pre> tags ( as they are soft‑wrapped ) ; you can
use this to provide line‑breaking opportunities for
people who choose to view the page without styling,
or in their browserʼs Reader View. “ Hard ” line
breaks in the source, naturally, will still be
rendered.