trauber/README.md

## README.md

      
    Raw
  

              README.md
            
          
    CSS Paragraph Numbering

A demo of paragraph number with CSS's counter-increment.  The demo also includes CSS for handling HTML5 asides.

  
## index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="numberparagraphs.css"/>
<title>test</title>
</head>
<body class="chapter">
    <div class="page">
        <h1>Tom Sawyer</h1>

        <p>You don't know about me...</p>

        <!-- sidenote to the paragraph following the aside tag -->
        <aside class="sidenote">The widow she cried over me...</aside>
	<p>Now the way that the...  Vivamus blandit.
Pellentesque eu urna. Vestibulum consequat sem vitae dui. In dictum feugiat
quam. Phasellus placerat. In sem nisl, elementum vitae, venenatis nec, lacinia
ac, arcu. Pellentesque gravida egestas mi. Integer rutrum tincidunt libero.
Duis viverra. Nulla diam lectus, tincidunt et, scelerisque vitae, aliquam
vitae, justo. Quisque eget erat. Donec aliquet porta magna. Sed nisl. Ut
tellus. Suspendisse quis mi eget dolor sagittis tristique. Aenean non pede eget
nisl bibendum gravida. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Morbi laoreet. Suspendisse potenti.
Donec accumsan porta felis.
Fusce tristique leo quis pede. Cras nibh. Sed eget est vitae.
</p>
    </div>
</body>
</html>

## numberparagraphs.css
.chapter {
    counter-reset: paragraph;
    padding-left: 20px;
}
.page p {
    width: 75%;
}
.page p:before {
    position: absolute;
    margin-left: -20px;
    color: #CCC;
    content: counter(paragraph);
    counter-increment: paragraph;
}
.sidenote {
    position: absolute;
    margin-left: 80%;
    font-size: 14px;
    color: #E22;
    width: 100px;
}
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="numberparagraphs.css"/>
	<title>test</title>
	</head>
	<body class="chapter">
	<div class="page">
	<h1>Tom Sawyer</h1>

	<p>You don't know about me...</p>

	<!-- sidenote to the paragraph following the aside tag -->
	<aside class="sidenote">The widow she cried over me...</aside>
	<p>Now the way that the... Vivamus blandit.
	Pellentesque eu urna. Vestibulum consequat sem vitae dui. In dictum feugiat
	quam. Phasellus placerat. In sem nisl, elementum vitae, venenatis nec, lacinia
	ac, arcu. Pellentesque gravida egestas mi. Integer rutrum tincidunt libero.
	Duis viverra. Nulla diam lectus, tincidunt et, scelerisque vitae, aliquam
	vitae, justo. Quisque eget erat. Donec aliquet porta magna. Sed nisl. Ut
	tellus. Suspendisse quis mi eget dolor sagittis tristique. Aenean non pede eget
	nisl bibendum gravida. Class aptent taciti sociosqu ad litora torquent per
	conubia nostra, per inceptos himenaeos. Morbi laoreet. Suspendisse potenti.
	Donec accumsan porta felis.
	Fusce tristique leo quis pede. Cras nibh. Sed eget est vitae.
	</p>
	</div>
	</body>
	</html>
	.chapter {
	counter-reset: paragraph;
	padding-left: 20px;
	}
	.page p {
	width: 75%;
	}
	.page p:before {
	position: absolute;
	margin-left: -20px;
	color: #CCC;
	content: counter(paragraph);
	counter-increment: paragraph;
	}
	.sidenote {
	position: absolute;
	margin-left: 80%;
	font-size: 14px;
	color: #E22;
	width: 100px;
	}