Commit 1df32dd1 authored by julien's avatar julien
Browse files

reformat baseline.js and added an ordered list experiment

parent 9518f5b0
window.onload = function () {
snapBaseline();
/* render pagedjs after a first render in the browser (need to calculete the computed line-height and font-metrics */
/* render pagedjs after a first render in the browser (need to calculate the computed line-height and font-metrics */
setTimeout(pagedjs, 100);
}
......@@ -77,7 +77,7 @@ function addcss(css){
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
s.styleSheet.cssText = css;
} else { // the world
} else {// the world
s.appendChild(document.createTextNode(css));
}
head.appendChild(s);
......
:root{
/* main font (specified all in px) */
--main-font-size: 20px;
--main-line-height: 20px;
--main-font-family: 'ibm-plex-sans';
--main-font-weight: 400;
/* dont't touch */
--baseline: var(--main-line-height);
font-size: var(--main-font-size);
font-family: var(--main-font-family);
font-weight: var(--main-font-weight);
line-height: var(--main-line-height);
}
*{
margin: 0;
padding: 0;
}
span{ background-color: rgba(255, 80, 80, 0.5); }
/* adding a visual helper for the baseline grid */
@media screen {
.pagedjs_page {
background: linear-gradient( transparent 0%, transparent 96%, #999 96%, #999 100%), transparent;
background-size: 100% var(--baseline);
background-repeat: repeat-y;
}
}
\ No newline at end of file
/* To define how the book look on the screen: */
@media screen {
body {
background-color:whitesmoke;
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 2px #888;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: 50%;
}
/* show the margin-box */
.pagedjs_margin-content
{
box-shadow: 0 0 0 1px inset #cc99ff;
}
/* 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;
} */
#pagedjs_interface_header{
position: fixed;
background-color: #888;
width: 100vw;
height: 30px;
top: 0;
left: 0;
}
}
\ No newline at end of file
@page{
size: A5;
margin: 0mm 20mm;
/* margin: calc(var(--baseline)*2) 20mm; */
}
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Snap Baseline
</title>
<link rel="stylesheet" type="text/html" href="css/interface.css" />
<link rel="stylesheet" type="text/html" href="css/baseline.css" />
<link rel="stylesheet" type="text/html" href="css/layout.css" />
<script src="js/orderedList.js" type="text/javascript"></script>
<script>
// waiting for the before everything hook for that one
window.onload = function () {
noteNumbering();
/* render pagedjs after a first render in the browser (need to calculate the computed line-height and font-metrics */
setTimeout(pagedjs, 3000);
}
// after the layout, add the start property to each ol element
addingNumToOl();
</script>
</head>
<body>
<ol>
<li>item #001</li>
<li>item #002</li>
<li>item #003</li>
<li>item #004</li>
<li>item #005</li>
<li>item #006</li>
<li>item #007</li>
<li>item #008</li>
<li>item #009</li>
<li>item #010</li>
<li>item #011</li>
<li>item #012</li>
<li>item #013</li>
<li>item #014</li>
<li>item #015</li>
<li>item #016</li>
<li>item #017</li>
<li>item #018</li>
<li>item #019</li>
<li>item #020</li>
<li>item #021</li>
<li>item #022</li>
<li>item #023</li>
<li>item #024</li>
<li>item #025</li>
<li>item #026</li>
<li>item #027</li>
<li>item #028</li>
<li>item #029</li>
<li>item #030</li>
<li>item #031</li>
<li>item #032</li>
<li>item #033</li>
<li>item #034</li>
<li>item #035</li>
<li>item #036</li>
<li>item #037</li>
<li>item #038</li>
<li>item #039</li>
<li>item #040</li>
<li>item #041</li>
<li>item #042</li>
<li>item #043</li>
<li>item #044</li>
<li>item #045</li>
<li>item #046</li>
<li>item #047</li>
<li>item #048</li>
<li>item #049</li>
<li>item #050</li>
<li>item #051</li>
<li>item #052</li>
<li>item #053</li>
<li>item #054</li>
<li>item #055</li>
<li>item #056</li>
<li>item #057</li>
<li>item #058</li>
<li>item #059</li>
<li>item #060</li>
<li>item #061</li>
<li>item #062</li>
<li>item #063</li>
<li>item #064</li>
<li>item #065</li>
<li>item #066</li>
<li>item #067</li>
<li>item #068</li>
<li>item #069</li>
<li>item #070</li>
<li>item #071</li>
<li>item #072</li>
<li>item #073</li>
<li>item #074</li>
<li>item #075</li>
<li>item #076</li>
<li>item #077</li>
<li>item #078</li>
<li>item #079</li>
<li>item #080</li>
<li>item #081</li>
<li>item #082</li>
<li>item #083</li>
<li>item #084</li>
<li>item #085</li>
<li>item #086</li>
<li>item #087</li>
<li>item #088</li>
<li>item #089</li>
<li>item #090</li>
<li>item #091</li>
<li>item #092</li>
<li>item #093</li>
<li>item #094</li>
<li>item #095</li>
<li>item #096</li>
<li>item #097</li>
<li>item #098</li>
<li>item #099</li>
<li>item #100</li>
</ol>
<ol>
<li>item #001</li>
<li>item #002</li>
<li>item #003</li>
<li>item #004</li>
<li>item #005</li>
<li>item #006</li>
<li>item #007</li>
<li>item #008</li>
<li>item #009</li>
<li>item #010</li>
<li>item #011</li>
<li>item #012</li>
<li>item #013</li>
<li>item #014</li>
<li>item #015</li>
<li>item #016</li>
<li>item #017</li>
<li>item #018</li>
<li>item #019</li>
<li>item #020</li>
<li>item #021</li>
<li>item #022</li>
<li>item #023</li>
<li>item #024</li>
<li>item #025</li>
<li>item #026</li>
<li>item #027</li>
<li>item #028</li>
<li>item #029</li>
<li>item #030</li>
<li>item #031</li>
<li>item #032</li>
<li>item #033</li>
<li>item #034</li>
<li>item #035</li>
<li>item #036</li>
<li>item #037</li>
<li>item #038</li>
<li>item #039</li>
<li>item #040</li>
<li>item #041</li>
<li>item #042</li>
<li>item #043</li>
<li>item #044</li>
<li>item #045</li>
<li>item #046</li>
<li>item #047</li>
<li>item #048</li>
<li>item #049</li>
<li>item #050</li>
<li>item #051</li>
<li>item #052</li>
<li>item #053</li>
<li>item #054</li>
<li>item #055</li>
<li>item #056</li>
<li>item #057</li>
<li>item #058</li>
<li>item #059</li>
<li>item #060</li>
<li>item #061</li>
<li>item #062</li>
<li>item #063</li>
<li>item #064</li>
<li>item #065</li>
<li>item #066</li>
<li>item #067</li>
<li>item #068</li>
<li>item #069</li>
<li>item #070</li>
<li>item #071</li>
<li>item #072</li>
<li>item #073</li>
<li>item #074</li>
<li>item #075</li>
<li>item #076</li>
<li>item #077</li>
<li>item #078</li>
<li>item #079</li>
<li>item #080</li>
<li>item #081</li>
<li>item #082</li>
<li>item #083</li>
<li>item #084</li>
<li>item #085</li>
<li>item #086</li>
<li>item #087</li>
<li>item #088</li>
<li>item #089</li>
<li>item #090</li>
<li>item #091</li>
<li>item #092</li>
<li>item #093</li>
<li>item #094</li>
<li>item #095</li>
<li>item #096</li>
<li>item #097</li>
<li>item #098</li>
<li>item #099</li>
<li>item #100</li>
</ol>
<ol>
<li>item #001</li>
<li>item #002</li>
<li>item #003</li>
<li>item #004</li>
<li>item #005</li>
<li>item #006</li>
<li>item #007</li>
<li>item #008</li>
<li>item #009</li>
<li>item #010</li>
<li>item #011</li>
<li>item #012</li>
<li>item #013</li>
<li>item #014</li>
<li>item #015</li>
<li>item #016</li>
<li>item #017</li>
<li>item #018</li>
<li>item #019</li>
<li>item #020</li>
<li>item #021</li>
<li>item #022</li>
<li>item #023</li>
<li>item #024</li>
<li>item #025</li>
<li>item #026</li>
<li>item #027</li>
<li>item #028</li>
<li>item #029</li>
<li>item #030</li>
<li>item #031</li>
<li>item #032</li>
<li>item #033</li>
<li>item #034</li>
<li>item #035</li>
<li>item #036</li>
<li>item #037</li>
<li>item #038</li>
<li>item #039</li>
<li>item #040</li>
<li>item #041</li>
<li>item #042</li>
<li>item #043</li>
<li>item #044</li>
<li>item #045</li>
<li>item #046</li>
<li>item #047</li>
<li>item #048</li>
<li>item #049</li>
<li>item #050</li>
<li>item #051</li>
<li>item #052</li>
<li>item #053</li>
<li>item #054</li>
<li>item #055</li>
<li>item #056</li>
<li>item #057</li>
<li>item #058</li>
<li>item #059</li>
<li>item #060</li>
<li>item #061</li>
<li>item #062</li>
<li>item #063</li>
<li>item #064</li>
<li>item #065</li>
<li>item #066</li>
<li>item #067</li>
<li>item #068</li>
<li>item #069</li>
<li>item #070</li>
<li>item #071</li>
<li>item #072</li>
<li>item #073</li>
<li>item #074</li>
<li>item #075</li>
<li>item #076</li>
<li>item #077</li>
<li>item #078</li>
<li>item #079</li>
<li>item #080</li>
<li>item #081</li>
<li>item #082</li>
<li>item #083</li>
<li>item #084</li>
<li>item #085</li>
<li>item #086</li>
<li>item #087</li>
<li>item #088</li>
<li>item #089</li>
<li>item #090</li>
<li>item #091</li>
<li>item #092</li>
<li>item #093</li>
<li>item #094</li>
<li>item #095</li>
<li>item #096</li>
<li>item #097</li>
<li>item #098</li>
<li>item #099</li>
<li>item #100</li>
</ol>
</body>
\ No newline at end of file
/* add script for pagedjs */
function pagedjs() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
// find the number for each item in an ordered list
function noteNumbering() {
const orderedList = document.querySelectorAll('ol');
orderedList.forEach(list => {
// console.log(list);
const item = list.querySelectorAll('li');
// console.log(item);
for (i = 0; i < item.length; i++) {
item[i].setAttribute('data-item-num', i + 1);
}
})
}
function addingNumToOl() {
const firstItem = document.querySelectorAll('ol li:first-of-type');
firstItem.forEach(item1 => {
// console.log(item1);
let number;
if (item1.hasAttribute("data-item-num")) {
number = item1.getAttribute('data-item-num');
}
else {
console.log('sorry, but the attribute has been eaten by pagedJS');
}
console.log(item1);
item1.parentElement.setAttribute('start', number)
})
}
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