Commit 278b27d0 authored by Louise Picot's avatar Louise Picot
parents 4e88e92e 77dfde4b
/* j'ai rajouté ça pour que tu vois un peu plus à l'écran */
@media screen {
body {
background-color: grey;
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
margin-bottom: 3em;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 2px darkgrey;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--width);
}
.pagedjs_page>[class*="pagedjs_margin"] {
box-shadow: 0 0 0 1px black;
}
/* 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;
}
}
@media print {
@page {
size: 140mm 200mm;
}
@page {
margin: 5mm 5mm 5mm 5mm;
@bottom-left {
content: counter(page);
}
}
@page cover {
margin: 20mm 30mm;
background: yellow;
@top-center {
content: "Moby-Dick";
}
}
}
.content {
column-count: 2
}
h1 {
page: cover;
}
p { margin: 0; padding: 0; }
p:before { content: "…"; }
p + p { text-indent: 1em; }
a::after {
content: ", page " target-counter(attr(href), page );
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<h1 id="anchor-name">title of the chapter</h1>
<div class="content">
<p>Phœbus, à l’heure où resplendit le front de Matuta Leucothée, était déjà sorti des eaux de l’Océan ; il ne laissait pas apercevoir encore les roues suspendues et mobiles de son char, mais diligent, apparaissant à peine avec ses chevaux ailés Pyrois et Eous, il s’apprêtait à teindre en rose vermeil le quadrige blanchissant de sa fille que, rapide, il suivait. Déjà sa chevelure scintillante bouclait sur l’azur des flots mouvants. Il était à ce point du ciel où Cynthie[1], la non cornue, disparaissait en pressant ses deux chevaux, l’un blanc et l’autre noir, qui, ensemble avec le mulet de son véhicule, l’entraînaient à l’extrême horizon séparant les deux hémisphères où, mise en fuite, elle cédait le pas à la tremblante étoile messagère du jour.</p>
<p>Alors les monts Riphées[2] étaient paisibles. Le glacial Eurus[3] ne venait plus, en gémissant sur leurs flancs, avec un souffle aussi âpre qu’en hiver, sous les cornes du Taureau lascif, secouer avec autant de violence les jeunes branches, ni tourmenter les joncs mobiles et pointus, non plus que les faibles cyprès, ni courber les osiers flexibles, ni agiter les saules languissants, ni incliner les sapins frêles. Orion lui-même, le hardi, ne poursuivait plus les sept Hyades[4] en pleurs. Alors les fleurs multicolores ne redoutaient pas la chaleur nuisible du fils d’Hypérion[5] qui s’avançait, mais, baignées des fraîches larmes de l’Aurore elles étaient tout humides de rosée ainsi que les prés verts. Les alcyons, sur les ondes unies et calmes de la mer apaisée, venaient construire leurs nids dans les sables du rivage.</p>
<p>À l’heure donc où la plaintive Héro soupirait ardemment, parmi ces plages, après le départ douloureux du nageur Léander, moi, Poliphile, j’étais couché sur mon lit, secourable ami du corps fatigué ; personne des miens n’était dans ma chambre, si ce n’est ma chère et vigilante Agrypnie[6], laquelle, après m’avoir tenu des propos consolateurs — car je lui avais révélé la cause de mes profonds soupirs — me persuada de modérer mon trouble, et, s’avisant que l’heure de dormir était venue pour moi, prit congé. Demeuré seul, livré aux méditations intimes d’un amour unique, consumant sans sommeil la nuit longue et fastidieuse, inconsolable de ma Fortune ingrate, de mon étoile ennemie, pleurant sur ma passion malheureuse, j’examinais en tous points ce qu’est un amour sans réciprocité, cherchant comment il se peut faire qu’on aime précisément qui ne vous aime, et par quelle puissance l’âme abandonnée, assaillie par des attaques multiples, en proie à des combats violents, peut résister, faible comme elle est, surtout dans une lutte intérieure où elle demeure prise dans les mailles de pensées pressantes, instables et diverses.</p>
<p>see the <a href="#anchor-name">Title of the chapter</a></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="https://fonts.googleapis.com/css?family=Gothic+A1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body lang="fr">
<p>In the late 1970s, Donald Knuth had just received his first samples from the new typesetting system of the publisher of his book, and its quality was so far below that of the first edition of Volume 2 that he couldn't stand it. Around the same time, he saw a new book (Artificial Intelligence, by Patrick Winston) that had been produced digitally, and ultimately realized that typesetting meant arranging 0's and 1's (ink and no ink) in the proper pattern, and said (approximately), <q>As a computer scientist, I really identify with patterns of 0's and 1's; I ought to be able to do something about this. The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly. A programmer is ideally an essayist who works with traditional aesthetic and literary forms as well as mathematical concepts, to communicate the way that an algorithm works and to convince a reader that the results will be correct.</q> So he set out to learn what were the traditional rules for typesetting math, what constituted good typography, and (because the fonts of symbols that he needed really didn't exist) as much as he could about type design.</p>
<script src="main.js"></script>
</body>
</html>
body {
font-family: 'Gothic A1', sans-serif;
font-size: 32px;
margin: 5em;
}
p {
max-width: 35em;
margin: 0 auto;
}
:lang(fr) > q {
quotes: '« ' ' »';
}
span {
/*outline: 1px solid blue;*/
padding-left: 3em;
}
function wrapWords(str, tmpl) {
return str.replace(/\w+/g, tmpl || "<tmp>$&</tmp>");
}
function unwrapWords(str, tmpl) {
return str.replace(/<\/?tmp[^>]*>/g,"");
}
//wrapWords(str);
var elt = document.querySelector("q");
console.log(elt);
elt.innerHTML = wrapWords(elt.innerHTML);
var lastTop = 0;
var spans = document.getElementsByTagName('tmp');
var l = spans.length;
for (var i=0;i<l;i++) {
var currentTop = spans[i].offsetTop;
console.log(currentTop);
if (!lastTop) { lastTop = currentTop; }
else if (currentTop != lastTop) {
//spans[i].classList.add("new");
spans[i].innerHTML = "<span>«&#8239;</span>" + spans[i].innerHTML
lastTop = currentTop;
}
}
elt.innerHTML = unwrapWords(elt.innerHTML);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment