Commit 904d0281 authored by Fred Chasen's avatar Fred Chasen

Update examples

parent 3a4a2131
#main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#navigation {
width: 500px;
position: fixed;
overflow: auto;
top: 0;
left: -525px;
background: #ECECEC;
min-height: 100%;
height: 100%;
height: 100vh;
overflow: scroll;
-webkit-overflow-scrolling: touch;
padding: 9px;
padding-top: 10px;
transition: left .2s ease-out;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
z-index: 1;
}
#navigation.open {
left: 0;
}
#opener {
position: absolute;
top: 0;
left: 0;
padding: 10px;
stroke: #E2E2E2;
fill: #E2E2E2;
}
#opener:hover {
stroke: #777;
fill: #777;
}
#header {
height: 30px;
}
#update {
float: right;
}
.CodeMirror {
border: 1px solid #eee;
height: calc(100vh - 24px);
box-sizing: border-box;
background: #fbfbfb;
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
.material-icons {
color: #333;
cursor: pointer;
}
.material-icons:hover {
color: #525252;
}
.material-icons:active {
color: #000;
}
.page {
box-shadow: 0 0 4px #ccc;
}
......@@ -39,6 +39,7 @@
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;
}
.pages > .section {
......
/* counters, page-breaks, figure */
html{
--serif: 'spectral', serif;
--sans-serif: 'hk-grotesk', sans-serif;
--font-size: 13px;
--font-size-notes: 9px;
--line-height: 15px;
--line-height-notes: calc(15px*2/3);
--indent: 6mm;
--baseline: 15px;
}
@page {
size: 148mm 210mm portait;
}
@media screen {
.page {
background-image: repeating-linear-gradient(180deg, transparent 0, transparent 14px , rgba(0,255,0,0.7) var(--baseline)) ;
background-size: cover;
background-position: 0 -3px , 0 0
}
}
@page cover {
margin: 0;
background: url("images/cover.jpg");
background-position: center;
background-size: 104%;
background-repeat: no-repeat;
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@bottom-left{ content: none; }
}
@page:blank {
@top-left-corner{ content: none; }
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@top-right-corner{ content: none; }
@right-top{ content: none; }
@right-middle{ content: none; }
@right-bottom{ content: none; }
@bottom-right-corner{ content: none; }
@bottom-right{ content: none; }
@bottom-center{ content: none; }
@bottom-left{ content: none; }
@bottom-left-corner{ content: none; }
@left-bottom{ content: none; }
@left-middle{ content: none; }
@left-top{ content: none; }
}
@page:left {
margin-left:22mm;
margin-right:14mm;
margin-top: 73px;
margin-bottom: 73px;
@top-left{
content: counter(page);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
vertical-align: bottom;
margin-bottom: 14px;
font-variant-numeric: oldstyle-nums;
}
@top-center{
content: string(booktitle);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
vertical-align: bottom;
margin-bottom: 14px;
font-variant-numeric: oldstyle-nums;
font-variant: small-caps;
width: 85mm;
text-align: left;
}
}
@page:right {
margin-left:14mm;
margin-right:22mm;
margin-top: 73px;
margin-bottom: 73px;
@top-right{
content: counter(page);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
vertical-align: bottom;
margin-bottom: 14px;
font-variant-numeric: oldstyle-nums;
text-align: right;
}
@top-center{
content: element(shorter);
vertical-align: bottom;
text-align: right;
margin-bottom: 1px;
width: 85mm;
}
}
.sidenote, .footnote {
display:none!important;
}
.footnote::footnote-call, .footnote::footnote-marker{
display:none!important;
}
.part h2, #appendices h2,
section[data-type="half-title"],
section[data-type="titlepage"],
section[data-type="copyright"],
section[data-type="dedication"],
section[data-type="epigraph"],
#toc {
margin-left: 10mm /*center the page*/
}
.part h2, #appendices h2{
page: part;
}
/* running elements */
#cover h1 {
string-set: booktitle content(text);
}
#cover {
page: cover;
}
.shorter{
position: running(shorter);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
text-align: right;
/* font-style: italic; */
font-variant-numeric: oldstyle-nums;
}
/* flexbox */
section[data-type="copyright"] #flexbox {
display: block;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
left:0;
}
/* table of content */
#toc{
counter-reset: chaptoc apptoc;
}
.toc-part a[href]::before{
content: target-text(attr(href), before);
}
.toc-part a[href]::after,
.toc-chap a[href]::before,
.toc-part-app a[href]::before,
.toc-app a[href]::before {
content: target-text(attr(href url), content);
}
.toc-chap{
counter-increment: chaptoc;
}
.toc-chap::before{
content: "Chapter " counter(chaptoc);
}
.toc-app {
counter-increment: apptoc;
}
.toc-app::before{
content: "Appendix " counter(apptoc);
}
.toc-chap a[href]::after,
.toc-app a[href]::after {
content: leader(dotted) target-counter(attr(href), page);
float:right;
}
.toc-subchap a[href]::before{
content: target-text(attr(href)); /* pdfreactor */
}
.toc-subchap a[href]::after {
content: target-counter(attr(href), page);
float:right;
}
/* counters, page-breaks, figure */
a {
color: black;
text-decoration: none;
......@@ -126,7 +346,7 @@ h3:before, h2:before {
font-size: 13px;
line-height: 15px;
margin-bottom: 9px;
}
h4:not(.h4-appe), #appendix-e h5 {
......
......@@ -35,6 +35,7 @@
<link rel="stylesheet" href="fonts/hk-grotesk/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="../assets/styles/index.css">
<link rel="stylesheet" type="text/css" href="../assets/styles/examples.css">
<script>this.ready=new Promise(function($){document.addEventListener('DOMContentLoaded',$,{once:true})})</script>
<script src="../../dist/paged.js"></script>
......@@ -54,26 +55,29 @@
// styles
let styles = new Paged.Styler();
let styleText = await styles.add("book.css", "paged-js/layout-pagedjs.css");
styles.contents(flowText.content);
let styleText = await styles.add("book.css");
// console.log(moby);
let t0 = performance.now();
let flow = new Paged.Chunker(flowText.content, undefined, styles.breaks, preview).then((flow) => {
let chunker = new Paged.Chunker(flowText.content, undefined, styles, preview).then((flow) => {
let t1 = performance.now();
console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
// let pages = document.querySelector(".pages");
// styles.counters(pages);
});
let resizer = () => {
let pages = document.querySelector(".pages");
let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
if (scale < 1) {
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
} else {
pages.style.transform = "none";
}
};
resizer();
......
/* CSS DEMO pagedjs*/
.sidenote, .footnote {
display:none!important;
}
.footnote::footnote-call, .footnote::footnote-marker{
display:none!important;
}
html{
--serif: 'spectral', serif;
--sans-serif: 'hk-grotesk', sans-serif;
--font-size: 13px;
--font-size-notes: 9px;
--line-height: 15px;
--line-height-notes: calc(15px*2/3);
--indent: 6mm;
--baseline: 15px;
}
@page {
size: 148mm 210mm portait;
}
@media screen {
.page {
background-image: repeating-linear-gradient(180deg, transparent 0, transparent 14px , rgba(0,255,0,0.7) var(--baseline)) ;
background-size: cover;
background-position: 0 -3px , 0 0
}
}
/*@page:first {
margin: 0;
background: url("../images/cover.jpg");
background-position: center;
background-size: 104%;
background-repeat: no-repeat;
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@bottom-left{ content: none; }
}*/
@page cover {
margin: 0;
background: url("../images/cover.jpg");
background-position: center;
background-size: 104%;
background-repeat: no-repeat;
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@bottom-left{ content: none; }
}
@page:blank {
@top-left-corner{ content: none; }
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@top-right-corner{ content: none; }
@right-top{ content: none; }
@right-middle{ content: none; }
@right-bottom{ content: none; }
@bottom-right-corner{ content: none; }
@bottom-right{ content: none; }
@bottom-center{ content: none; }
@bottom-left{ content: none; }
@bottom-left-corner{ content: none; }
@left-bottom{ content: none; }
@left-middle{ content: none; }
@left-top{ content: none; }
}
@page:left {
margin-left:22mm;
margin-right:14mm;
margin-top: 73px;
margin-bottom: 73px;
@top-left{
content: counter(page);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
vertical-align: bottom;
margin-bottom: 14px;
font-variant-numeric: oldstyle-nums;
}
@top-center{
content: string(booktitle);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
vertical-align: bottom;
margin-bottom: 14px;
font-variant-numeric: oldstyle-nums;
font-variant: small-caps;
width: 85mm;
text-align: left;
}
}
@page:right {
margin-left:14mm;
margin-right:22mm;
margin-top: 73px;
margin-bottom: 73px;
@top-right{
content: counter(page);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
vertical-align: bottom;
margin-bottom: 14px;
font-variant-numeric: oldstyle-nums;
text-align: right;
}
@top-center{
content: element(shorter);
vertical-align: bottom;
text-align: right;
margin-bottom: 1px;
width: 85mm;
}
}
.part h2, #appendices h2,
section[data-type="half-title"],
section[data-type="titlepage"],
section[data-type="copyright"],
section[data-type="dedication"],
section[data-type="epigraph"],
#toc {
margin-left: 10mm /*center the page*/
}
.part h2, #appendices h2{
page: part;
}
/* running elements */
#cover h1 {
string-set: booktitle content(text);
}
#cover {
page: cover;
}
.shorter{
position: running(shorter);
font-weight: 400;
font-family: var(--serif);
font-size: var(--font-size);
font-weight: normal;
line-height: var(--line-height);
text-align: right;
/* font-style: italic; */
font-variant-numeric: oldstyle-nums;
}
/* flexbox */
section[data-type="copyright"] #flexbox {
display: block;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
left:0;
}
}
/* table of content */
#toc{
counter-reset: chaptoc apptoc;
}
.toc-part a[href]::before{
content: target-text(attr(href), before);
}
.toc-part a[href]::after,
.toc-chap a[href]::before,
.toc-part-app a[href]::before,
.toc-app a[href]::before {
content: target-text(attr(href url), content);
}
.toc-chap{
counter-increment: chaptoc;
}
.toc-chap::before{
content: "Chapter " counter(chaptoc);
}
.toc-app {
counter-increment: apptoc;
}
.toc-app::before{
content: "Appendix " counter(apptoc);
}
.toc-chap a[href]::after,
.toc-app a[href]::after {
content: leader(dotted) target-counter(attr(href), page);
}
.toc-subchap a[href]::before{
content: target-text(attr(href)); /* pdfreactor */
}
.toc-subchap a[href]::after {
content: target-counter(attr(href), page);
float:right;
}
.toc-subchap a[href]::before{
content: target-text(attr(href)); /* pdfreactor */
}
......@@ -30,7 +30,7 @@
let t0 = performance.now();
let flow = new Paged.Chunker(flowText.content, undefined, preview).then((flow) => {
let flow = new Paged.Chunker(flowText.content, undefined, undefined, preview).then((flow) => {
let t1 = performance.now();
console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
......@@ -40,7 +40,11 @@
let pages = document.querySelector(".pages");
let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
if (scale < 1) {
pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
} else {
pages.style.transform = "none";
}
};
resizer();
......
This diff is collapsed.
......@@ -1127,6 +1127,14 @@
"source-map": "0.5.7"
}
},
"d": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
"integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
"requires": {
"es5-ext": "0.10.42"
}
},
"date-time": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/date-time/-/date-time-2.1.0.tgz",
......@@ -1214,6 +1222,35 @@
"prr": "1.0.1"
}
},
"es5-ext": {
"version": "0.10.42",
"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.42.tgz",
"integrity": "sha512-AJxO1rmPe1bDEfSR6TJ/FgMFYuTBhR5R57KW58iCkYACMyFbrkqVyzXSurYoScDGvgyMpk7uRF/lPUPPTmsRSA==",
"requires": {
"es6-iterator": "2.0.3",
"es6-symbol": "3.1.1",
"next-tick": "1.0.0"
}
},
"es6-iterator": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
"integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
"requires": {
"d": "1.0.0",
"es5-ext": "0.10.42",
"es6-symbol": "3.1.1"
}
},
"es6-symbol": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
"integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
"requires": {
"d": "1.0.0",
"es5-ext": "0.10.42"
}
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
......@@ -1232,6 +1269,15 @@
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"dev": true
},
"event-emitter": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
"integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
"requires": {
"d": "1.0.0",
"es5-ext": "0.10.42"
}
},
"evp_bytestokey": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
......@@ -2907,6 +2953,11 @@
"dev": true,
"optional": true
},
"next-tick": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
},
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
......
......@@ -10,6 +10,7 @@
"browser": "dist/paged.js",
"dependencies": {
"css-tree": "^1.0.0-alpha.28",