Tom Sawyer

by clayshannon

HTML

<h1 style="color: skyblue;">The Adventures of Tom Sawyer</h1>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Annotated, with <span class="jim">C</span><span class="huck">o</span><span class="ben">l</span><span class="tom">o</span><span class="joe">r</span><span class="sid">i</span><span class="mary">z</span><span class="newcomer">e</span><span class="billy">d</span> Dialogue</aside>

<h2>PREFACE</h2>

<p>Most of the adventures recorded in this book really occurred; one or two
were experiences of my own, the rest those of boys who were schoolmates
of mine. Huck Finn is drawn from life; Tom Sawyer also, but not from an
individual--he is a combination of the characteristics of three boys whom
I knew, and therefore belongs to the composite order of architecture.</p>

<p>The odd superstitions touched upon were all prevalent among children and
slaves in the West at the period of this story--that is to say, thirty or
forty years ago.</p>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">
'Tom Sawyer' was published in 1876, the year of the U.S. Centennial and 'Custer's Last Stand'. So, when Twain says 'thirty or forty years ago' he meant the 1830s and 1840s - between the War of 1812 and the Civil War. He knew this time period well, as he was born in 1835 and lived his boyhood during those years in Hannibal, Missouri (herein called 'St. Petersburg')
</aside>

<p>Although my book is intended mainly for the entertainment of boys and
girls, I hope it will not be shunned by men and women on that account,
for part of my plan has been to try to pleasantly remind adults of what
they once were themselves, and of how they felt and thought and talked,
and what queer enterprises they sometimes engaged in.</p>

<p>THE AUTHOR.</p>

    <p>HARTFORD, 1876.</p>

<h2>Color-Coded Dialog Table</h2>
<table border="1" style="background-color:black">
<tbody>

<tr>
<td>
<span class="tom">This is Tom Sawyer speaking</span>
</td>
</tr>

    <tr>
<td>
<span...

CSS

body {
    font-family:"Segoe UI", "Bookman Old Style", "Candara", "Calibri", "Consolas", sans-serif;
    font-size: 1.2em;
    background-color: black;
    color: white;
}
h1 {
    font-family: "Lucida Sans", "Courier";
}
h2 {
    font-family:"Courier", "Consolas", sans-serif;
    color: gold;
}
h3 {
    font-family:"Lucida Sans", "Consolas", sans-serif;
    color: azure;
}
table {
    background-color: cornsilk;
}
.chapter {
    font-size: 2em;
    color: gold;
    font-family:"Consolas";
}
aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, sans-serif;
}
aside p:last-child {
    margin-bottom:0;
}
span:hover {
    position:relative;
    cursor:pointer;
}
span[title]:hover:after {
    content: attr(title);
    background:yellow;
    padding: 4px 8px;
    color: #000;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    white-space: nowrap;
}
.marginalize {
    margin-left: 5em;
    margin-right: 5em;
    color: antiquewhite;
}
.tightvert {
    line-height: .5;
}
.tom {
    color: darkorange;
}
.huck {
    color: violet;
}
.auntp {
    color: pink;
}
.sidney {
    color: gold;
}
.newcomer {
    color: lightgreen;
}
.ben {
    color: khaki;
}
.jim {
    color: skyblue;
}
.joe {
    color: dodgerblue;
}
.mary {
    color: deeppink;
}
.billy {
    color: red;
}
.judge {
    color: silver;
}
.walters {
    color: Goldenrod;
}
.mrsthatcher {
    color: indianred;
}
.master {
    color: yellow;
}
.becky {
    color: LightCoral;
}
.injunjoe {
    color: brown;
}
.muff {
    color: PaleGreen;
}
.doc {
    color: burlywood;
}
.minister {
    color: orangered;
}
.sheriff {
    color: cornflowerblue;
}
.mrsharper {
    color: LightSeaGreen
}
.maustin {
    color: YellowGreen
}
.sally {
    color: Plum
}
.grace {
    color: PaleTurquoise;
}
.susy {
    color: LawnGreen;
}
.man1 {
    color: sandybrown;
}
.man2 {
    color: chocolate;
}
.lady1 {
    color: coral;
}
.lady2 {
    color: magenta;
}
.crowd {
    color:...