adjust fonts for epub

iliakan · iliakan · commit 266b489d245c · 2018-10-22T01:09:27.000+03:00
diff --git a/1-js/06-advanced-functions/01-recursion/head.html b/1-js/06-advanced-functions/01-recursion/head.html
@@ -7,7 +7,7 @@
 
 .function-execution-context {
   border: 1px solid black;
-  font-family: "Consolas", monospace;
+  font-family: 'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', monospace;
   padding: 4px 6px;
   margin: 0 4px;
 }
@@ -23,4 +23,4 @@
 .function-execution-context-list li:first-child {
   font-weight: bold;
 }
-</style>
+</style>
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
 }
 
 blockquote {
@@ -25,4 +25,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
+}
diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
 }
 
 blockquote {
@@ -25,4 +25,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
+}
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
 }
 
 blockquote {
@@ -25,4 +25,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
+}
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
   opacity: .8;
 }
 
@@ -26,4 +26,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
+}
diff --git a/3-animation/1-bezier-curve/demo.svg b/3-animation/1-bezier-curve/demo.svg
@@ -1 +1 @@
-<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360"><!--+ no-optimize --><!--@seehttp://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.phphttp://apike.ca/prog_svg_paths.htmlhttp://www.the-art-of-web.com/css/css-animation/http://srufaculty.sru.edu/david.dailey/svg/curve.svghttp://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C--><defs><pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/></pattern></defs><rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/><path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/><path fill="none" id="control-path" stroke="#E8C48E"/><path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/><path d="" fill="none" id="t-path-template"/><svg x="0" y="0" id="p-template"><circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/><text x="12" y="12" style="font-size:16px;font-weight:bold">1</text></svg><circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/><svg><image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/><text x="38" y="27" style="font-size:18px;font-family:Consolas, Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text></svg><script><![CDATA[	let xmlns = "http://www.w3.org/2000/svg";	let xlinkns  = "http://www.w3.org/1999/xlink";	let box = {left:20, top: 50, right: 320, bottom: 350 };	if (location.search.match('small=1')) {	  box = {left:20, top: 50, right: 120, bottom: 150 };	}	document.documentElement.ondragstart = function() {	  return false;	};	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];	// don't show a piece of control path between P2 and P3	let hideMiddleControlPath = location.search.match('nocpath=1');	pointsIn = pointsIn.split(',');	let points = [];	// read points from ?p=...	for(let i=0; i<pointsIn.length; i++) {	  let x = box.left + (box.right - box.left)*pointsIn[i];	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];	  points.push({x: x, y: y});	}	let bezierPath = document.getElementById("bezier-path");	let controlPath = document.getElementById("control-path");	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';	let runButton = document.getElementById("run-button");	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';	let tPathTemplate = document.getElementById("t-path-template");	tPathTemplate.parentNode.removeChild(tPathTemplate);	function drawPath() {	  let letter;	  switch (points.length) {	  case 4:	    letter = 'C';	    break;	  case 3:	    letter = 'Q';	    break;	  default:	    letter = 'L';	  }	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';	  for(let i = 1; i < points.length; i++) {	    bezierPathD += points[i].x + ',' + points[i].y + ' ';	    controlPathD += points[i].x + ',' + points[i].y + ' ';	  }	  bezierPath.setAttribute('d', bezierPathD);	  controlPath.setAttribute('d', controlPathD);	  function dist(a,b) {	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));	  }	  if (hideMiddleControlPath) {	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');	  }	}	// draw control points	function drawPoints(points) {	  let p = document.getElementById('p-template');	  p.removeAttribute('id');	  p.parentNode.removeChild(p);	  for(let i=0; i<points.length; i++) {	    let point = p.cloneNode(true);	    point.getElementsByTagName('text')[0].firstChild.data = i+1;	    setPointCoords(point, i);	    setPointHandler(point, i);	    document.documentElement.appendChild(point);	  }	}	// control points coords are shifted from Left-Upper corner a bit	// to give them space to render	function setPointCoords(point, i) {	  point.setAttribute('x', points[i].x-20);	  point.setAttribute('y', points[i].y-20);	}	function setPointHandler(point, i) {	  let circle = point.getElementsByTagName('circle')[0];	  circle.onmousedown = function() {	    document.onmousemove = function(e) {	      let x = e.pageX, y = e.pageY;	      // constrain withing the box	      if (x < box.left) x = box.left;	      if (x > box.right) x = box.right;	      if (y > box.bottom) y = box.bottom;	      if (y < box.top) y = box.top;	      points[i].x = x;	      points[i].y = y;	      setPointCoords(point, i);	      drawPath();	    }	    document.onmouseup = function() {	      document.onmousemove = document.onmouseup = null;	    }	    return false;	  }	}	// draw point connectors which form the curve	function drawT(points, t) {	  let path = document.getElementById('t-'+points.length);	  if (!path) {	    path = tPathTemplate.cloneNode(true);	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);	    path.setAttribute('id', 't-'+points.length);	    document.documentElement.appendChild(path);	  }	  let subPoints = [];	  let x = points[0].x + (points[1].x - points[0].x)*t;	  let y = points[0].y + (points[1].y - points[0].y)*t;	  let tPathD = "M" + x + ',' + y + ' L';	  subPoints.push({x, y});	  for(let i=1; i<points.length-1; i++) {	    let x = points[i].x + (points[i+1].x - points[i].x)*t;	    let y = points[i].y + (points[i+1].y - points[i].y)*t;	    subPoints.push({x: x, y: y});	    tPathD += x + ',' + y + ' ';	  }	  if (points.length <= 3) {	    let m = document.getElementById('marker');	    let mx, my;	    if (t == 1) {	      mx = -10, my = -10;	    } else {	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;	    }	    m.setAttribute('cx', mx);	    m.setAttribute('cy', my);	    path.setAttribute('stroke-width', 2);	  }	  if (points.length == 2) {	    // only 2 points provided, special case	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;	  }	  path.setAttribute('d', tPathD);	  if (subPoints.length > 2){	    drawT(subPoints, t);	  }	}	let t = 0;	let timer;	// animate the curve	function animate(complete) {	  timer = setInterval(function() {	    if (t>1) {	      t = 1;	    }	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());	    drawT(points, t);	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);	/*	    if (t >= 0.5) {	      clearInterval(timer);	      runButton.parentNode.style.display = 'none';	      return;	    }	*/	    if (t == 1) {	      clearInterval(timer);	      timer = 0;	      complete && complete();	      return;	    }	    t += 0.005;	  }, 30);	}	function animationDone() {	  for(let i=1; i<=points.length; i++) {	    let path = document.getElementById('t-'+i);	    path && document.documentElement.removeChild(path);	  }	  t = 0;	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');	}	runButton.onclick = onAnimate;	function onAnimate() {	  if (timer) {	    // animation in action	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');	    clearInterval(timer);	    timer = 0;	    return;	  }	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');	  animate(animationDone)	}	drawPath();	drawPoints(points);//]]></script></svg>
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360"><!--+ no-optimize --><!--@seehttp://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.phphttp://apike.ca/prog_svg_paths.htmlhttp://www.the-art-of-web.com/css/css-animation/http://srufaculty.sru.edu/david.dailey/svg/curve.svghttp://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C--><defs><pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/></pattern></defs><rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/><path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/><path fill="none" id="control-path" stroke="#E8C48E"/><path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/><path d="" fill="none" id="t-path-template"/><svg x="0" y="0" id="p-template"><circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/><text x="12" y="12" style="font-size:16px;font-weight:bold">1</text></svg><circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/><svg><image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/><text x="38" y="27" style="font-size:18px;font-family:'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text></svg><script><![CDATA[	let xmlns = "http://www.w3.org/2000/svg";	let xlinkns  = "http://www.w3.org/1999/xlink";	let box = {left:20, top: 50, right: 320, bottom: 350 };	if (location.search.match('small=1')) {	  box = {left:20, top: 50, right: 120, bottom: 150 };	}	document.documentElement.ondragstart = function() {	  return false;	};	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];	// don't show a piece of control path between P2 and P3	let hideMiddleControlPath = location.search.match('nocpath=1');	pointsIn = pointsIn.split(',');	let points = [];	// read points from ?p=...	for(let i=0; i<pointsIn.length; i++) {	  let x = box.left + (box.right - box.left)*pointsIn[i];	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];	  points.push({x: x, y: y});	}	let bezierPath = document.getElementById("bezier-path");	let controlPath = document.getElementById("control-path");	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';	let runButton = document.getElementById("run-button");	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';	let tPathTemplate = document.getElementById("t-path-template");	tPathTemplate.parentNode.removeChild(tPathTemplate);	function drawPath() {	  let letter;	  switch (points.length) {	  case 4:	    letter = 'C';	    break;	  case 3:	    letter = 'Q';	    break;	  default:	    letter = 'L';	  }	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';	  for(let i = 1; i < points.length; i++) {	    bezierPathD += points[i].x + ',' + points[i].y + ' ';	    controlPathD += points[i].x + ',' + points[i].y + ' ';	  }	  bezierPath.setAttribute('d', bezierPathD);	  controlPath.setAttribute('d', controlPathD);	  function dist(a,b) {	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));	  }	  if (hideMiddleControlPath) {	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');	  }	}	// draw control points	function drawPoints(points) {	  let p = document.getElementById('p-template');	  p.removeAttribute('id');	  p.parentNode.removeChild(p);	  for(let i=0; i<points.length; i++) {	    let point = p.cloneNode(true);	    point.getElementsByTagName('text')[0].firstChild.data = i+1;	    setPointCoords(point, i);	    setPointHandler(point, i);	    document.documentElement.appendChild(point);	  }	}	// control points coords are shifted from Left-Upper corner a bit	// to give them space to render	function setPointCoords(point, i) {	  point.setAttribute('x', points[i].x-20);	  point.setAttribute('y', points[i].y-20);	}	function setPointHandler(point, i) {	  let circle = point.getElementsByTagName('circle')[0];	  circle.onmousedown = function() {	    document.onmousemove = function(e) {	      let x = e.pageX, y = e.pageY;	      // constrain withing the box	      if (x < box.left) x = box.left;	      if (x > box.right) x = box.right;	      if (y > box.bottom) y = box.bottom;	      if (y < box.top) y = box.top;	      points[i].x = x;	      points[i].y = y;	      setPointCoords(point, i);	      drawPath();	    }	    document.onmouseup = function() {	      document.onmousemove = document.onmouseup = null;	    }	    return false;	  }	}	// draw point connectors which form the curve	function drawT(points, t) {	  let path = document.getElementById('t-'+points.length);	  if (!path) {	    path = tPathTemplate.cloneNode(true);	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);	    path.setAttribute('id', 't-'+points.length);	    document.documentElement.appendChild(path);	  }	  let subPoints = [];	  let x = points[0].x + (points[1].x - points[0].x)*t;	  let y = points[0].y + (points[1].y - points[0].y)*t;	  let tPathD = "M" + x + ',' + y + ' L';	  subPoints.push({x, y});	  for(let i=1; i<points.length-1; i++) {	    let x = points[i].x + (points[i+1].x - points[i].x)*t;	    let y = points[i].y + (points[i+1].y - points[i].y)*t;	    subPoints.push({x: x, y: y});	    tPathD += x + ',' + y + ' ';	  }	  if (points.length <= 3) {	    let m = document.getElementById('marker');	    let mx, my;	    if (t == 1) {	      mx = -10, my = -10;	    } else {	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;	    }	    m.setAttribute('cx', mx);	    m.setAttribute('cy', my);	    path.setAttribute('stroke-width', 2);	  }	  if (points.length == 2) {	    // only 2 points provided, special case	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;	  }	  path.setAttribute('d', tPathD);	  if (subPoints.length > 2){	    drawT(subPoints, t);	  }	}	let t = 0;	let timer;	// animate the curve	function animate(complete) {	  timer = setInterval(function() {	    if (t>1) {	      t = 1;	    }	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());	    drawT(points, t);	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);	/*	    if (t >= 0.5) {	      clearInterval(timer);	      runButton.parentNode.style.display = 'none';	      return;	    }	*/	    if (t == 1) {	      clearInterval(timer);	      timer = 0;	      complete && complete();	      return;	    }	    t += 0.005;	  }, 30);	}	function animationDone() {	  for(let i=1; i<=points.length; i++) {	    let path = document.getElementById('t-'+i);	    path && document.documentElement.removeChild(path);	  }	  t = 0;	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');	}	runButton.onclick = onAnimate;	function onAnimate() {	  if (timer) {	    // animation in action	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');	    clearInterval(timer);	    timer = 0;	    return;	  }	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');	  animate(animationDone)	}	drawPath();	drawPoints(points);//]]></script></svg>

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`
`8`	`8`	`.function-execution-context {`
`9`	`9`	`border: 1px solid black;`
`10`		`- font-family: "Consolas", monospace;`
	`10`	`+ font-family: 'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', monospace;`
`11`	`11`	`padding: 4px 6px;`
`12`	`12`	`margin: 0 4px;`
`13`	`13`	`}`
`@@ -23,4 +23,4 @@`
`23`	`23`	`.function-execution-context-list li:first-child {`
`24`	`24`	`font-weight: bold;`
`25`	`25`	`}`
`26`		`-</style>`
	`26`	`+</style>`