diff --git a/baseline/js/baseline.js b/baseline/js/baseline.js index 9294b9eb1b657c4f674348d446c2f8c20fbe844a..5d3183876b27d0b61abc78bc52377e283bc6e744 100644 --- a/baseline/js/baseline.js +++ b/baseline/js/baseline.js @@ -1,7 +1,7 @@ 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); diff --git a/orderedList/css/baseline.css b/orderedList/css/baseline.css new file mode 100644 index 0000000000000000000000000000000000000000..2070e0b9814147e7b556804419d9347b1dd3382c --- /dev/null +++ b/orderedList/css/baseline.css @@ -0,0 +1,43 @@ + :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 diff --git a/orderedList/css/interface.css b/orderedList/css/interface.css new file mode 100644 index 0000000000000000000000000000000000000000..227650c1ae30c6bab4b462f924a291a1ed61bb4e --- /dev/null +++ b/orderedList/css/interface.css @@ -0,0 +1,64 @@ + + +/* 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 diff --git a/orderedList/css/layout.css b/orderedList/css/layout.css new file mode 100644 index 0000000000000000000000000000000000000000..bddbcdcf653501d8f26e9ce3e6ad2b6cbfc13fbe --- /dev/null +++ b/orderedList/css/layout.css @@ -0,0 +1,6 @@ +@page{ + size: A5; + margin: 0mm 20mm; + /* margin: calc(var(--baseline)*2) 20mm; */ +} + diff --git a/orderedList/index.html b/orderedList/index.html new file mode 100644 index 0000000000000000000000000000000000000000..5abb69b102bd9df737fd7ff5181e2c76870fb8ab --- /dev/null +++ b/orderedList/index.html @@ -0,0 +1,352 @@ + + + + + + + + Snap Baseline + + + + + + + + + + + + + + + + + + + + + + + +
    +
  1. item #001
  2. +
  3. item #002
  4. +
  5. item #003
  6. +
  7. item #004
  8. +
  9. item #005
  10. +
  11. item #006
  12. +
  13. item #007
  14. +
  15. item #008
  16. +
  17. item #009
  18. +
  19. item #010
  20. +
  21. item #011
  22. +
  23. item #012
  24. +
  25. item #013
  26. +
  27. item #014
  28. +
  29. item #015
  30. +
  31. item #016
  32. +
  33. item #017
  34. +
  35. item #018
  36. +
  37. item #019
  38. +
  39. item #020
  40. +
  41. item #021
  42. +
  43. item #022
  44. +
  45. item #023
  46. +
  47. item #024
  48. +
  49. item #025
  50. +
  51. item #026
  52. +
  53. item #027
  54. +
  55. item #028
  56. +
  57. item #029
  58. +
  59. item #030
  60. +
  61. item #031
  62. +
  63. item #032
  64. +
  65. item #033
  66. +
  67. item #034
  68. +
  69. item #035
  70. +
  71. item #036
  72. +
  73. item #037
  74. +
  75. item #038
  76. +
  77. item #039
  78. +
  79. item #040
  80. +
  81. item #041
  82. +
  83. item #042
  84. +
  85. item #043
  86. +
  87. item #044
  88. +
  89. item #045
  90. +
  91. item #046
  92. +
  93. item #047
  94. +
  95. item #048
  96. +
  97. item #049
  98. +
  99. item #050
  100. +
  101. item #051
  102. +
  103. item #052
  104. +
  105. item #053
  106. +
  107. item #054
  108. +
  109. item #055
  110. +
  111. item #056
  112. +
  113. item #057
  114. +
  115. item #058
  116. +
  117. item #059
  118. +
  119. item #060
  120. +
  121. item #061
  122. +
  123. item #062
  124. +
  125. item #063
  126. +
  127. item #064
  128. +
  129. item #065
  130. +
  131. item #066
  132. +
  133. item #067
  134. +
  135. item #068
  136. +
  137. item #069
  138. +
  139. item #070
  140. +
  141. item #071
  142. +
  143. item #072
  144. +
  145. item #073
  146. +
  147. item #074
  148. +
  149. item #075
  150. +
  151. item #076
  152. +
  153. item #077
  154. +
  155. item #078
  156. +
  157. item #079
  158. +
  159. item #080
  160. +
  161. item #081
  162. +
  163. item #082
  164. +
  165. item #083
  166. +
  167. item #084
  168. +
  169. item #085
  170. +
  171. item #086
  172. +
  173. item #087
  174. +
  175. item #088
  176. +
  177. item #089
  178. +
  179. item #090
  180. +
  181. item #091
  182. +
  183. item #092
  184. +
  185. item #093
  186. +
  187. item #094
  188. +
  189. item #095
  190. +
  191. item #096
  192. +
  193. item #097
  194. +
  195. item #098
  196. +
  197. item #099
  198. +
  199. item #100
  200. +
+
    +
  1. item #001
  2. +
  3. item #002
  4. +
  5. item #003
  6. +
  7. item #004
  8. +
  9. item #005
  10. +
  11. item #006
  12. +
  13. item #007
  14. +
  15. item #008
  16. +
  17. item #009
  18. +
  19. item #010
  20. +
  21. item #011
  22. +
  23. item #012
  24. +
  25. item #013
  26. +
  27. item #014
  28. +
  29. item #015
  30. +
  31. item #016
  32. +
  33. item #017
  34. +
  35. item #018
  36. +
  37. item #019
  38. +
  39. item #020
  40. +
  41. item #021
  42. +
  43. item #022
  44. +
  45. item #023
  46. +
  47. item #024
  48. +
  49. item #025
  50. +
  51. item #026
  52. +
  53. item #027
  54. +
  55. item #028
  56. +
  57. item #029
  58. +
  59. item #030
  60. +
  61. item #031
  62. +
  63. item #032
  64. +
  65. item #033
  66. +
  67. item #034
  68. +
  69. item #035
  70. +
  71. item #036
  72. +
  73. item #037
  74. +
  75. item #038
  76. +
  77. item #039
  78. +
  79. item #040
  80. +
  81. item #041
  82. +
  83. item #042
  84. +
  85. item #043
  86. +
  87. item #044
  88. +
  89. item #045
  90. +
  91. item #046
  92. +
  93. item #047
  94. +
  95. item #048
  96. +
  97. item #049
  98. +
  99. item #050
  100. +
  101. item #051
  102. +
  103. item #052
  104. +
  105. item #053
  106. +
  107. item #054
  108. +
  109. item #055
  110. +
  111. item #056
  112. +
  113. item #057
  114. +
  115. item #058
  116. +
  117. item #059
  118. +
  119. item #060
  120. +
  121. item #061
  122. +
  123. item #062
  124. +
  125. item #063
  126. +
  127. item #064
  128. +
  129. item #065
  130. +
  131. item #066
  132. +
  133. item #067
  134. +
  135. item #068
  136. +
  137. item #069
  138. +
  139. item #070
  140. +
  141. item #071
  142. +
  143. item #072
  144. +
  145. item #073
  146. +
  147. item #074
  148. +
  149. item #075
  150. +
  151. item #076
  152. +
  153. item #077
  154. +
  155. item #078
  156. +
  157. item #079
  158. +
  159. item #080
  160. +
  161. item #081
  162. +
  163. item #082
  164. +
  165. item #083
  166. +
  167. item #084
  168. +
  169. item #085
  170. +
  171. item #086
  172. +
  173. item #087
  174. +
  175. item #088
  176. +
  177. item #089
  178. +
  179. item #090
  180. +
  181. item #091
  182. +
  183. item #092
  184. +
  185. item #093
  186. +
  187. item #094
  188. +
  189. item #095
  190. +
  191. item #096
  192. +
  193. item #097
  194. +
  195. item #098
  196. +
  197. item #099
  198. +
  199. item #100
  200. +
+
    +
  1. item #001
  2. +
  3. item #002
  4. +
  5. item #003
  6. +
  7. item #004
  8. +
  9. item #005
  10. +
  11. item #006
  12. +
  13. item #007
  14. +
  15. item #008
  16. +
  17. item #009
  18. +
  19. item #010
  20. +
  21. item #011
  22. +
  23. item #012
  24. +
  25. item #013
  26. +
  27. item #014
  28. +
  29. item #015
  30. +
  31. item #016
  32. +
  33. item #017
  34. +
  35. item #018
  36. +
  37. item #019
  38. +
  39. item #020
  40. +
  41. item #021
  42. +
  43. item #022
  44. +
  45. item #023
  46. +
  47. item #024
  48. +
  49. item #025
  50. +
  51. item #026
  52. +
  53. item #027
  54. +
  55. item #028
  56. +
  57. item #029
  58. +
  59. item #030
  60. +
  61. item #031
  62. +
  63. item #032
  64. +
  65. item #033
  66. +
  67. item #034
  68. +
  69. item #035
  70. +
  71. item #036
  72. +
  73. item #037
  74. +
  75. item #038
  76. +
  77. item #039
  78. +
  79. item #040
  80. +
  81. item #041
  82. +
  83. item #042
  84. +
  85. item #043
  86. +
  87. item #044
  88. +
  89. item #045
  90. +
  91. item #046
  92. +
  93. item #047
  94. +
  95. item #048
  96. +
  97. item #049
  98. +
  99. item #050
  100. +
  101. item #051
  102. +
  103. item #052
  104. +
  105. item #053
  106. +
  107. item #054
  108. +
  109. item #055
  110. +
  111. item #056
  112. +
  113. item #057
  114. +
  115. item #058
  116. +
  117. item #059
  118. +
  119. item #060
  120. +
  121. item #061
  122. +
  123. item #062
  124. +
  125. item #063
  126. +
  127. item #064
  128. +
  129. item #065
  130. +
  131. item #066
  132. +
  133. item #067
  134. +
  135. item #068
  136. +
  137. item #069
  138. +
  139. item #070
  140. +
  141. item #071
  142. +
  143. item #072
  144. +
  145. item #073
  146. +
  147. item #074
  148. +
  149. item #075
  150. +
  151. item #076
  152. +
  153. item #077
  154. +
  155. item #078
  156. +
  157. item #079
  158. +
  159. item #080
  160. +
  161. item #081
  162. +
  163. item #082
  164. +
  165. item #083
  166. +
  167. item #084
  168. +
  169. item #085
  170. +
  171. item #086
  172. +
  173. item #087
  174. +
  175. item #088
  176. +
  177. item #089
  178. +
  179. item #090
  180. +
  181. item #091
  182. +
  183. item #092
  184. +
  185. item #093
  186. +
  187. item #094
  188. +
  189. item #095
  190. +
  191. item #096
  192. +
  193. item #097
  194. +
  195. item #098
  196. +
  197. item #099
  198. +
  199. item #100
  200. +
+ + + \ No newline at end of file diff --git a/orderedList/js/orderedList.js b/orderedList/js/orderedList.js new file mode 100644 index 0000000000000000000000000000000000000000..f4a5fc7a470b0e2482e74b44ce2152b10b89197a --- /dev/null +++ b/orderedList/js/orderedList.js @@ -0,0 +1,42 @@ + + +/* 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) + + }) +}