html2print
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

one-layout-per-page.html
text/html

Download raw (8.5 KB)

<!DOCTYPE HTML>
<html lang="en" class="normal">
<head>
    <meta charset="utf-8">
    <title>HTML2print</title>

    <link rel="stylesheet" href="/main.less" type="text/less" media="all" charset="utf-8">
    <link rel="stylesheet" href="/assets/lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">

    <style type="text/css" media="all">
        .body {
            padding-left: 0.5em !important; 
            padding-right: 0.5em !important;
        }
        .intro { 
            width: 100%; 
            height: 4em;
            margin-bottom: 1.5em;
        }
        .column33 {
            width: 33%;
            height: 100%;
            padding: 0 0.5em;
            float: left;
            box-sizing: border-box;
        }
        .column50 {
            width: 50%;
            height: 100%;
            padding: 0 0.5em;
            float: left;
            box-sizing: border-box;
        }
    </style>

</head>

<body>
    <!-- PAGES -->
    <div id="pages">
        <div id="page-1" class="paper">
            <div class="page">
                <section class="header">
                </section>

                <section class="body recipient">
                </section>

                <section class="footer">
                </section>
            </div>
        </div>
        <div id="page-2" class="paper">
            <div class="page">
                <section class="header">
                </section>

                <section class="body">
                    <div class="intro recipient"> </div>
                    <div class="column50 recipient"> </div>
                    <div class="column50 recipient"> </div>
                </section>

                <section class="footer">
                </section>
            </div>
        </div>
        <div id="page-3" class="paper">
            <div class="page">
                <section class="header">
                </section>

                <section class="body">
                    <div class="column33 recipient"> </div>
                    <div class="column33 recipient"> </div>
                    <div class="column33 recipient"> </div>
                </section>

                <section class="footer">
                </section>
            </div>
        </div>
        <div id="master-page" class="paper">
            <div class="page">
                <section class="header">
                </section>

                <section class="body">
                    <div class="intro recipient"> </div>
                    <div class="column50 recipient"> </div>
                    <div class="column50 recipient"> </div>
                </section>

                <section class="footer">
                </section>
            </div>
        </div>
    </div>

    <div id="interface">
        <button id="preview" class="button">Preview</button>
        <button id="debug" class="button">Debug</button>
        <button id="spread" class="button">Spread</button>
        <button id="hi-res" class="button">Hi-res</button>

        <div class="dropdown">
            <button id="zoom" class="button">Zoom</button>
            <ul id="zoom-list">
                <li><a href="#" title="25">25&thinsp;%</a></li>
                <li><a href="#" title="33">33&thinsp;%</a></li>
                <li><a href="#" title="50">50&thinsp;%</a></li>
                <li><a href="#" title="75">75&thinsp;%</a></li>
                <li><a href="#" title="100">100&thinsp;%</a></li>
                <li><a href="#" title="150">150&thinsp;%</a></li>
                <li><a href="#" title="200">200&thinsp;%</a></li>
                <li><a href="#" title="300">300&thinsp;%</a></li>
            </ul>
        </div>

        <div id="toc">
            <button id="goto" class="button" href="#">Go&nbsp;to</button>
            <ul id="toc-pages"></ul>
        </div>
    </div>

    <div id="stories">
        <article id="my-story">
<h1>Flatland <br> A Romance of Many Dimensions</h1>

<div class="region-break"> </div>

<h2>Concerning the Inhabitants of Flatland</h2>


<p>THE GREATEST length or breadth of a full grown inhabitant of
Flatland may be estimated at about eleven of your inches.  Twelve
inches may be regarded as a maximum.
</p>

<p>Our Women are Straight Lines.
</p>

<p>Our Soldiers and Lowest Class of Workmen are Triangles with two
equal sides, each about eleven inches long, and a base or third side
so short (often not exceeding half an inch) that they form at their
vertices a very sharp and formidable angle.  Indeed when their bases
are of the most degraded type (not more than the eighth part of an
inch in size), they can hardly be distinguished from Straight lines or
Women; so extremely pointed are their vertices.  With us, as with you,
these Triangles are distinguished from others by being called
Isosceles; and by this name I shall refer to them in the following
pages.
</p>

<p>Our Middle Class consists of Equilateral or Equal-Sided Triangles.
</p>

<p>Our Professional Men and Gentlemen are Squares (to which class I
myself belong) and Five-Sided Figures or Pentagons.
</p>

<p>Next above these come the Nobility, of whom there are several
degrees, beginning at Six-Sided Figures, or Hexagons, and from thence
rising in the number of their sides till they receive the honourable
title of Polygonal, or many-Sided.  Finally when the number of the
sides becomes so numerous, and the sides themselve so small, that the
figure cannot be distinguished from a circle, he is included in the
Circular or Priestly order; and this is the highest class of all.
</p>

<p>It is a Law of Nature with us that a male child shall have one
more side than his father, so that each generation shall rise (as a
rule) one step in the scale of development and nobility.  <blockquote>Thus the son
of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so
on.</blockquote>
</p>

<p>But this rule applies not always to the Tradesman, and still less
often to the Soldiers, and to the Workmen; who indeed can hardly be
said to deserve the name of human Figures, since they have not all
their sides equal.  With them therefore the Law of Nature does not
hold; and the son of an Isosceles (i.e. a Triangle with two sides
equal) remains Isosceles still.  Nevertheless, all hope is not such
out, even from the Isosceles, that his posterity may ultimately rise
above his degraded condition.  For, after a long series of military
successes, or diligent and skillful labours, it is generally found
that the more intelligent among the Artisan and Soldier classes
manifest a slight increase of their third side or base, and a
shrinkage of the two other sides.  Intermarriages (arranged by the
Priests) between the sons and daughters of these more intellectual
members of the lower classes generally result in an offspring
approximating still more to the type of the Equal-Sided Triangle.
</p>

<p>Rarely--in proportion to the vast numbers of Isosceles
births--is a genuine and certifiable
Equal-Sided Triangle produced from
Isosceles parents. Such a birth requires, as its
antecedents, not only a series of carefully arranged intermarriages,
but also a long-continued exercise of frugality and self-control on
the part of the would-be ancestors of the coming Equilateral, and a
patient, systematic, and continuous development of the Isosceles
intellect through many generations.
</p>

<p>The birth
 of a True Equilateral Triangle from Isosceles parents is
the subject of rejoicing in our country for many furlongs round.
After a strict examination conducted by the Sanitary and Social Board,
the infant, if certified as Regular, is with solemn ceremonial
admitted into the class of Equilaterals.  He is then immediately taken
from his proud yet sorrowing parents and adopted by some childless
Equilateral, who is bound by oath never to permit the child henceforth
to enter his former home or so much as to look upon his relations
again, for fear lest the freshly developed organism may, by force of
unconscious imitation, fall back again into his hereditary level.
</p>

        </article>
    </div>

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="assets/lib/less-1.3.0.min.js"></script>
    <script type="text/javascript" src="assets/lib/jquery.min.js"></script>
    <script type="text/javascript" src="setup/setup.js"></script>
    <script type="text/javascript" src="assets/js/html2print.js"></script>

    <script type="text/javascript" charset="utf-8">
        // This cancels the automatic cloning of the pages, allowing for a specifi structure for each page.
        var nb_page = 0;
    </script>

</body>
</html>