Commit 9f26f8bd authored by julien's avatar julien

Merge branch 'master' of gitlab.pagedmedia.org:tools/experiments

parents 582384cd 955f4d8f
......@@ -7,7 +7,7 @@
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
......
# Book index
A script to generate a book index.
## Preparing your HTML
In the simplest terms, a book index is simply a key to locating information contained in a book. The main idea of the book index is to help the reader find information quickly and easily. It is not a way to locate in the book all the paragraph where the word "music" appears but to locate the places in the book where the word music is "revealing" in relation to the content. In this way, create an index is a semantic work that cannot be done automatically.
When you think your content is revelant and need to be in the index, simply add a span around the content:
```HTML
<p>General definitions of <span class="book-index" data-book-index="music">music</span> include common elements such as pitch, rhythm, dynamics, and the sonic qualities of timbre and texture.</p>
```
Your span must contain at least two elements:
- **a class**: this class is common to all index span elements of your document, you can name it as you wish
- **a data attribut**: this data attribut must be named `data-book-index`, it indicates the word(s) that will appear in the index
- you can also add an id if you want but it's not required
About the data attribute:
- all data attributes containing the same word will be combined in a single line in the index, so you can use the same data attribute several times in your document
- it is possible to use spaces, capital letters and dashes in the data attribute, like this for example: `data-book-index="Wolfgang Amadeus Mozart"`
- it is also possible to format the text with the `<em>` en `<i>` elements (only): `data-book-index="<em>String Quartet in C major</em>"`
Finally, you must add somewhere in your HTML an element in which the book index will be generated. It can be a section or a div but it must be indicated by an id (that you name as you wish):
```HTML
<div id="book-index"></div>
```
## Use the script with paged.js
1. Add the `async` property to the paged.js script:
* if you use paged.js with npm: `<script async src="http://localhost:9090/dist/paged.polyfill.js"></script>`
* if you use the online script of paged.js: `<script async src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>`
2. Add the book index script:
```html
<script src="js/createIndex.js" type="text/javascript"></script>
```
3. Call the book index script:
The book index need to be generated before that paged.js fragmented the content into pages. You need to the hook `before` to call the script.
Add this code in the `head` of you html document:
```html
<script>
window.PagedConfig = {
before: function () {
createIndex({
spanClassIndex: 'book-index',
indexElement: '#book-index',
alphabet: true
});
}
};
</script>
```
4. Use the print CSS properties in your stylesheet file to target the pages where the index elements appears:
```CSS
.link-page a::after{ content: target-counter(attr(href), page); }
.link-page::after{ content: ", "; }
.link-page:last-of-type::after{ content: none; }
.index-value::after{ content: " – "; }
```
## Configuring the script
* `spanClassIndex`: define the id element where the toc list will be create
* `indexElement`: define the id element where the toc list will be create
* `alphabet`: choose if you want the alphabetical elements (`true`) or not (`false`)
## Styling the book index
The script generates a list whith items you can style. Here is an example of a book index generated:
![Exemple of a generated book index](example-index.png)
```HTML
<ul id="list-index-generated">
<li class="list-alphabet-element" id="alphabet-element-A">A</li>
<li class="list-index-element" data-list-index="Apple">
<span class="index-value">Apple</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-10"></a></span>
<span class="link-page"><a href="#book-index-23"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Apricot">
<span class="index-value">Apricot</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-15"></a></span>
<span class="link-page"><a href="#book-index-35"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Avocado">
<span class="index-value">Avocado</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-19"></a></span>
</span>
</li>
<li class="list-alphabet-element" id="alphabet-element-B">B</li>
<li class="list-index-element" data-list-index="Banana">
<span class="index-value">Banana</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-2"></a></span>
<span class="link-page"><a href="#book-index-38"></a></span>
<span class="link-page"><a href="#book-index-12"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Blackberry">
<span class="index-value">Blackberry</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-17"></a></span>
<span class="link-page"><a href="#book-index-24"></a></span>
</span>
</li>
<li class="list-alphabet-element" id="alphabet-element-C">C</li>
<li class="list-index-element" data-list-index="Cherry">
<span class="index-value">Cherry</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-32"></a></span>
<span class="link-page"><a href="#book-index-27"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Coconut">
<span class="index-value">Coconut</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-41"></a></span>
<span class="link-page"><a href="#book-index-8"></a></span>
</span>
</li>
</ul>
```
An example of CSS to styling the book index:
![Exemple of a generated and styled book index](example-index-styled.png)
```CSS
#list-index-generated{
list-style-type: none;
}
.list-alphabet-element{
font-weight: bold;
padding-top: 18px;
padding-bottom: 9px;
font-family: Arial, Helvetica, sans-serif;
}
.index-value{
display: inline-block;
min-width: 120px;
}
.index-value:first-letter{ text-transform: uppercase; }
.index-value::after{ content: "none"; }
.link-page a{
text-decoration: none;
color: currentColor;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
```
/* To define how the book look on the screen: */
:root {
/* color for the interface */
--color-background: rgba(0, 0, 0, 0.2);
--color-marginBox: transparent;
--color-pageBox: transparent;
--color-paper: white;
/* color used for the baseline */
--color-baseline: transparent;
/* fonts for the book */
/* colors */
/* typographic related variables */
--font-size: 12px;
--font-lineHeight: 16px;
}
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
margin-bottom: 3em;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--pagedjs-width);
}
/* uncomment for recto/verso book.
--------------------------------------------------- */
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
} */
}
\ No newline at end of file
/* Book index style */
.link-page a::after{ content: target-counter(attr(href), page); }
.link-page::after{ content: ", "; }
.link-page:last-of-type::after{ content: none; }
.index-value::after{ content: " – "; }
#list-index-generated{
list-style-type: none;
padding-left: 0;
columns: 2;
column-fill: auto!important;
padding-top: 20px;
}
.list-alphabet-element{
font-weight: bold;
padding-top: 18px;
padding-bottom: 9px;
font-family: Arial, Helvetica, sans-serif;
break-after: avoid;
}
.index-value{ display: inline-block; }
.index-value:first-letter{ text-transform: uppercase; }
.link-page a{
text-decoration: none;
color: currentColor;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.book-index{ color: red!important; }
/* General style */
@page {
size: 160mm 210mm;
margin: 15mm 15mm;
}
@page:left{
margin-top:15mm;
margin-bottom: 25mm;
margin-left: 40mm;
margin-right: 25mm;
@bottom-left{
content: counter(page);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
}
@page:right{
margin-top:15mm;
margin-bottom: 25mm;
margin-right: 40mm;
margin-left: 25mm;
@bottom-right{
content: counter(page);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
}
@page:first{
margin: 10mm 30mm;
@bottom-right{ content: none };
}
@page:blank{
@bottom-left{ content: none };
@bottom-right{ content: none };
}
#book-index-section{ page: index;}
@page index{
margin-left: 15mm;
margin-right: 15mm;
}
#cover-page{
/*break-after: right;*/
break-after: left;
}
#cover-page h1{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 40px;
text-align: center;
font-weight: normal;
margin-top: 20mm;
}
#cover-page h1 small{
display: block;
font-size: 20px;
margin-top: 32px;
}
#author{
margin-top: 250px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 25px;
text-align: center;
}
#editor{
width: 100%;
position: absolute;
bottom: 0;
}
#editor p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}
#editor::before{
content: "";
display: block;
border-top: 1px solid black;
width: 100%;
margin: 0 auto;
padding-bottom: 16px;
}
p{
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 0;
margin-bottom: 0;
text-align: justify;
font-size: 14px;
line-height: 16px;
text-indent: 16px;
}
#book-index-section, .chapter{
break-before: right;
}
.chapter h1{
margin-top: 50px;
margin-bottom: 120px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 25px;
font-weight: normal;
text-align: center;
}
.chapter h1 small, #book-index-section h1{
display: block;
margin-bottom: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
}
.chapter h1 small{ text-align: center; }
.chapter h2{
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: normal;
font-size: 18px;
text-align: center;
break-before: right;
}
.chapter h2::after{
content: "—";
display: block;
}
.chapter h3{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 14px;
break-after: avoid;
}
h1 + p, h2 + p, h3 + p{ text-indent: 0; }
.afnanch{ display: none; }
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Book Index
</title>
<!-- Styles -->
<link href="css/interface.css" rel="stylesheet" type='text/css'>
<link href="css/style.css" rel="stylesheet" type='text/css'>
<!-- Paged js-->
<!-- if you use paged.js with npm: -->
<script async src="http://localhost:9090/dist/paged.polyfill.js"></script>
<!-- if you use the online script of paged.js: -->
<!-- <script async src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
<!-- BOOK INDEX -->
<script src="js/createIndex.js" type="text/javascript"></script>
<script>
window.PagedConfig = {
before: function () {
createIndex({
spanClassIndex: 'book-index',
indexElement: '#book-index',
alphabet: true
});
}
};
</script>
</head>
<body>
<section id="cover-page">
<h1>A history of the old english letter founderies
<small>with notes</small>
</h1>
<p id="author">Talbot Bainers Reed</p>
<div id="editor">
<p>London</p>
<p>Elliot Stock, 62, Paternoster Row, E.C.</p>
<p>1887</p>
</div>
</section>
<section class="chapter" id="chapter-1">
<h1><small>Chapter I</small> The English Type Bodies and Faces</h1>
<p class="pfirst">We have laid before the
reader, in the Introductory Chapter, such facts and
conjectures as it is possible to gather together respecting
the processes and appliances adopted by the first
letter-founders, and shall, with a view to render the
particular history of the English Letter Foundries more
intelligible, endeavour to present here, in as concise a
form as possible, a short historical sketch of the English
type bodies and faces, tracing particularly the rise and
development of the Roman, Italic, and Black letters before
and subsequent to their introduction into this country;
adding, in a following chapter, a similar notice of the
types of the principal foreign and learned languages which
have figured conspicuously in English typography.</p>
<h2 title="Type-Bodies">Type-bodies</h2>
<p>The origin of <span class="book-index" id="test-id" data-book-index="type-bodies">type-bodies</span> and the nomenclature which has grown around
them, is a branch of typographical antiquity which has always been shrouded in
more or less obscurity. Imagining, as we do, that the moulds of the first printers
were of a primitive construction, and, though conceived on true principles, were
adjusted to the various sizes of letter they had to cast more by eye than by rule,
it is easy to understand that founts would be cast on no other principle than that
of ranging in body and line and height in themselves, irrespective of the body,
height and line of other founts used in the same press. When
two or more founts were required to mix in the same work, then the necessity of a uniform
standard of height would become apparent. When two or more founts were
required to mix in the same line, a uniformity in body, and if possible in
alignment, would be found necessary. When <span class="book-index" data-book-index="initials">initials</span> or <span class="book-index" data-book-index="marginal notes">marginal notes</span> required
to be incorporated with the text, then the advantage of a mathematical proportion
between one body and another would suggest itself.</p>
<p>At first, doubtless, the printer would name his sizes of type according to the
works for which they were used. His <span class="book-index" data-book-index="canon">Canon</span> type would be the large character
in which he printed the canon of the Mass. His Cicero type would be the letter
used in his editions of that classical author. His Saint Augustin, his Primer, his
Brevier, his Philosophie, his Pica type, would be the names by which he would
describe the sizes of letter he used for printing the works whose names they
bore. It may also be assumed with tolerable certainty that in most of these
cases, originally, the names described not only the body, but the “face” of their
respective founts. At what period this confused and haphazard system of
nomenclature resolved itself into the definite printer’s terminology it is difficult
to determine. The process was probably a gradual one, and was not perfected
until typefounding became a distinct and separate trade.</p>
<p>The earliest writers on the form and proportion of letters, — <span class="book-index" data-book-index="Dürer A.">Dürer</span>
in 1525, <span class="book-index" data-book-index="Tory G.">Tory</span> in 1529, and Ycair
in 1548,—though using terms to distinguish the different
faces of letter, were apparently unaware of any distinguishing names for the
bodies of types. Tory, indeed, mentions Canon and <span class="book-index" data-book-index="Bourgeois">Bourgeoise</span>; but in both
cases he refers to the face of the letter; and Ycair’s distinction of “teste y glosa”
applies generally to the large and small type used for the text and notes
respectively of the same work.
<p>In England, type-bodies do not appear to have been reduced to a definite
scale much before the end of the sixteenth century. Mores
failed to trace them
further back than 1647; but in a Regulation of the Stationers’ Company, dated
1598, Pica, English, Long Primer, and Brevier are mentioned by name as apparently
well-established bodies at that time; and in a petition to the same Company
in 1635, <span class="book-index" data-book-index="Nonpareil">Nonpareil</span> and “two-line letters” are mentioned as equally familiar.</p>
<p><span class="book-index" data-book-index="Moxon J.">Moxon</span>, our first writer on the subject, in his <i>Mechanick
Exercises</i>, in 1683,
described ten regular bodies in common use in his day, and added to his list the
number of types of each body that went to a foot, viz.:―</p>
<p>“We have one body more,” he adds, “which is sometimes used in England;
that is, a <span class="book-index" data-book-index="small Pica">Small Pica</span>: but I account it no great discretion in a master-printer to
provide it, because it differs so little from the Pica, that unless the workmen be
carefuller than they sometimes are, it may be mingled with the <span class="book-index" data-book-index="Pica">Pica</span>, and so the
beauty of both founts may be spoiled.”</p>
<p>In this sentence we have the first record of the introduction of irregular
bodies into <span class="book-index" data-book-index="England">English typography</span>, an innovation destined very speedily to expand,
and within half a century increase the number of English bodies by the seven
following additions.
<p>The origin of these irregular bodies it is easy to explain. Between Moxon’s
time and 1720 the country was flooded with <span class="book-index" data-book-index="Dutch type">Dutch type</span>. The English founders
were beaten out of the field in their own market, and James, in self-defence, had
to furnish his foundry entirely with Dutch moulds and matrices. Thus we had
the typefounding of two nations carried on side by side. An English printer
furnished with a Dutch fount would require additions to it to be cast to the
Dutch standard, which might be smaller or larger than that laid down for
English type by Moxon, and yet so near that even if it lost or gained a few
types in the foot, it would still be called by its English name, which would
thenceforth represent two different bodies. If, on the other hand, a new fount
were imported, or cut by an ill-regulated artist here, which when finished was
found to be as much too large for one regular body as it was too small for
another, a body would be found to fit it between the two, and christened by a
new name. In this manner, Minion, <span class="book-index" data-book-index="Bourgeois">Bourgeois</span>, Small Pica, Paragon, and two-line
Pica insinuated themselves into the list of English bodies, and in this manner
arose that ancient anomaly, the various body-standards of the English foundries.
For a founder who was constantly called upon to alter his mould to accommodate
a printer requiring a special body, would be likely to cast a quantity of the
letter in excess of what was immediately ordered; and this store, if not sold in
due time to the person for whom it was cast, would be disposed of
to the first comer who, requiring a new fount, and not particular as to body, provided the
additions afterwards to be had were of the same gauge, would take it off the
founder’s hands. <i>Facilis descensus Averni&#x202f;!</i> Having taken the one downward
step, the founder would be called upon constantly to repeat it, his moulds would
remain set, some to the right, some to the wrong standard, and every type he
cast would make it more impossible for him or his posterity to recover the simple
standard from which he had erred.</p>
<p>Such we imagine to have been the origin of the irregular and ununiform
bodies. Even in 1755, when <span class="book-index" data-book-index="Smith J.">Smith</span> published his <i>Printer’s Grammar</i>, the mischief
was beyond recall. In no single instance were the standards given by him identical
with those of 1683. Indeed, where each founder had two or three variations of
each body in his own foundry it is impossible to speak of a standard at all.
Smith points out that, in the case of English and <span class="book-index" data-book-index="Pica">Pica</span> alone, <span class="book-index" data-book-index="Caslon W.">Caslon</span> had four
varieties of the former, and the Dutch two; while of the latter, Caslon had
three, and <span class="book-index" data-book-index="James T.">James</span> two. Nevertheless, he gives a scale of the bodies commonly
in use in his day, which it will be interesting to compare with Moxon’s on the
one hand, and the standard of the English foundries in 1841 as given by Savage,
on the other.</p>
<p>This list does not include Trafalgar, Emerald, and Ruby, which, however,
were in use before 1841. The first named has disappeared in England, as also
has Paragon. The <i>Printer’s Grammar</i> of 1787 mentions a body in use at that
time named “Primer,” between <span class="book-index" data-book-index="Great Primer">Great Primer</span> and English.</p>
<p>It is not our purpose to pursue this comparison further or more minutely;
nor does it come within the scope of this work to enter
into a technical examination of the various schemes which have been carried out abroad, and
attempted in this country, to do away with the anomalies in type-bodies, and
restore a uniform invariable standard. The above table will suffice as a brief
historical note of the growth of these anomalies.</p>
<p>As early as 1725, in <span class="book-index" data-book-index="France">France</span>, an attempt was made to regulate by a public
decree, not only the standard height of a type, but the scale of bodies. But the
system adopted was clumsy, and only added to the confusion it was designed to
remove. Fournier, in 1737, invented his typographical points, the first successful
attempt at a mathematical systematisation of <span class="book-index" data-book-index="type-bodies">type-bodies</span>, which has since, with
the alternative system of <span class="book-index" data-book-index="Didot M.">Didot</span>, done much in simplifying French typography.
England, Germany, and Holland have been more conservative, and therefore
less fortunate. Attempts were made by <span class="book-index" data-book-index="Fergusson">Fergusson</span> in 1824,
and by Bower of Sheffield about 1840,
and others, to arrive at a standard of uniformity; but their
schemes were not warmly taken up, and failed.</p>
<p>Before proceeding to a brief historical notice of the different <span class="book-index" data-book-index="England">English</span> type-bodies,
we shall trouble the reader with a further table, compiled from specimen-books
of the 18th century, showing what have been the names of the corresponding
bodies in the foundries of other nations,—premising, however, that these
names must be taken as representing the approximate, rather than the actual,
equivalent in each case.
<p>A few notes on the origin of the names of English type-bodies will conclude
our observations on this subject.</p>
<h3>Canon</h3>
<p>The <span class="book-index" data-book-index="canon">Canon</span> of the Mass was, in the service-books of the Church,
printed in a large letter, and it is generally supposed that, this size of letter being
ordinarily employed in the large Missals, the type-body took its name accordingly:
a supposition which is strengthened by its German name of Missal. Mores,
however (who objects equally to the epithets of Great or French as unnecessary
and delusive), considers this derivation to be incorrect, and quotes the authority
of <span class="book-index" data-book-index="Tory G.">Tory</span>, who uses the term Canon to apply to letter cut according to rule—<i>lettres
de forme</i>—as distinguished from letters not so cut, which he terms <i>lettres bastardes</i>.
So that the <i>lettre qu’on dict Canon</i> was originally a generic term, embracing all
the regular bodies; and subsequently came to be confined to the largest size in
that category. The theory is ingenious and interesting; but it seems more
reasonable to lay greater stress on the actual meaning of a word than on its
equivocal interpretation. In other countries two-line <span class="book-index" data-book-index="Great Primer">Great Primer</span> was commonly
called Canon, and our French Canon was called by the Dutch Parys Kanon; by
which it would seem that both <span class="book-index" data-book-index="England">England</span> and Holland originally received the
body from the <span class="book-index" data-book-index="France">French</span>. In modern letter-founding the name Canon applies
only to the size of the face of a letter which is a three-line Pica cast on a four-line
Pica body.</p>
<p>Passing the next four bodies, which with us are
merely reduplications, we note that―</p>
<h3>Double pica</h3>
<p>which at present is Double Small Pica, was in Moxon’s day,
what its name denotes, a two-line Pica. When the irregular Small Pica was
introduced, <span class="book-index" data-book-index="double Pica">Double Pica</span> was the name given to the double of the interloper, the
double of the Pica being styled two-line Pica. In <span class="book-index" data-book-index="Germany">Germany</span>, Double Pica was called
Text or Secunda—the former name probably denoting the use of this size in the
text of Holy Writ, while the latter indicates that the body was one of a series,
the Doppel Mittel, corresponding to our two-line English, being probably the
Prima.</p>
<h3><span class="book-index" data-book-index="Paragon">Paragon</span></h3>
<p>The double of Long Primer, though a body unnamed in <span class="book-index" data-book-index="Moxon J.">Moxon</span>’s
day, was a size of really old institution; it having been a favourite body with
many of the earliest printers, and particularly affected by <span class="book-index" data-book-index="Caxton W.">Caxton</span> in this country.
Its name points to a French origin; and, like most of the other fanciful names,
proves that the appellation had reference in the first instance, not to the depth
of its shank, but to the supposed beauty of the letter which was cut upon it. It
was a body which did not take deep root in this country, and
for the most part
disappeared with the first quarter of the present century. It is noteworthy that
Paragon and Nonpareil are the only bodies which have preserved their names
in all the countries in which they have been adopted.</p>
<h3>Great primer</h3>
<p>For this body, Mores claims an indisputable English
origin. He considers it possible that it may date back to before the Reformation,
and that it was the body on which were printed the large Primers of the early
Church. This derivation
would be more satisfactory were it found that these
works, or the school primers of a later date, were, as a rule, printed in type of
this size But this is not the case. <i>Primers</i>, <i>Pyes</i>, and <i>Breviaries</i>