first-page-of-page-group.html 12.1 KB
Newer Older
Julie Blanc's avatar
Julie Blanc committed
1 2 3 4 5 6 7 8 9
<!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>
      First page of page group
    </title>

10
    <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
Julie Blanc's avatar
Julie Blanc committed
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31


    <style>


      @page {
        size: 6in 8in;
        margin: 20mm 20mm;
        /* border: solid 1px black; */
        @bottom-left{
          content: counter(page);
        }
      }

      @page chapter {
        margin: 20mm 20mm;
        @bottom-center {
          content: "chapter"
        }
      }

32 33
      /* first page of page group --------------------------------------- */

34
      @page chapter :first {
Julie Blanc's avatar
Julie Blanc committed
35 36
        margin: 20mm 20mm;
        background-color: yellow;
37 38 39
        @bottom-left{
          content: none;
        }
Julie Blanc's avatar
Julie Blanc committed
40 41
        @bottom-center {
          content: "first page of the chapter"
42

Julie Blanc's avatar
Julie Blanc committed
43 44 45 46 47 48 49 50
        }
      }

      .chapter {
        page: chapter;
        break-before: page;
        break-after: page; 
      }
51 52 53

       /* first page of page group --------------------------------------- */

Julie Blanc's avatar
Julie Blanc committed
54 55
   

56 57 58
      :root { font-size: 18px; }
  
      section { break-before: right; }
Julie Blanc's avatar
Julie Blanc committed
59

60 61 62
      p { line-height: 22px; }

      h1{
Julie Blanc's avatar
Julie Blanc committed
63 64 65 66
        font-size: 24px;
        margin-top: 0;
      }

67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
      @media screen {

      body { background-color: whitesmoke; }

      .pagedjs_page {
          background-color: white;
          box-shadow: 0 0 0 1px #bfbfbf;
          margin-bottom: 10mm;
          flex: none;
      }

      .pagedjs_pages {
        width: calc(var(--width) * 2);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        transform-origin: 0 0;
        margin: 0 auto;
      }

      .pagedjs_pages>.section {
        width: calc(var(--width) * 2);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
      }

      .pagedjs_first_page {
        margin-left: 50%;
      }

      }


Julie Blanc's avatar
Julie Blanc committed
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
    </style>





  </head>
  <body>

  <section id="introduction">
    <h1>Introduction</h1>
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
    </p>
    <p>
        Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius. 
    </p>
  </section>
  <section class="chapter" id="chapter-1">
    <h1>Chapter 1: Lorem ipsum dolor sit amet</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
    </p>
    <p>
      Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius.
    </p>
    <p>  
      Maecenas arcu massa, egestas vel est nec, mollis venenatis tortor. Ut eu finibus libero. Phasellus pharetra ante a purus ornare, eget facilisis sem ultricies. Etiam tincidunt feugiat erat, eget hendrerit turpis ullamcorper quis. Fusce finibus porttitor nisi sed blandit. Nunc libero erat, vehicula ut tincidunt quis, maximus vitae eros. Donec tristique urna bibendum, mattis nisl vel, dignissim nisl. Duis tincidunt eros nec volutpat scelerisque. Phasellus id malesuada nulla. Duis aliquam mi non malesuada suscipit. Curabitur pretium nisl eu tortor tempus, et sollicitudin quam iaculis. Ut venenatis eros ligula, in ornare eros facilisis vel.
    </p>
    <p>
      Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non. Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id felis at nulla mollis bibendum.
    </p>
    <p>
     Proin vitae convallis ipsum, vitae aliquet nisl. Integer tempor dapibus porta. Nulla at consequat ante. Quisque quis laoreet justo. Phasellus a varius purus. Phasellus accumsan vestibulum est non ullamcorper. Nulla quis erat mi. Vivamus imperdiet, ante nec maximus condimentum, odio nulla facilisis nisi, non cursus risus purus sit amet dolor.
    </p>
    <p>
     Praesent a felis orci. Sed dignissim molestie ante in facilisis. Aliquam et massa id ligula bibendum porta vel non urna. Suspendisse et mauris nec ante volutpat ultrices. Sed imperdiet neque at maximus feugiat. Cras pretium urna eget massa gravida scelerisque. Maecenas aliquam leo non faucibus vehicula. Etiam iaculis nec metus iaculis imperdiet. Fusce porta facilisis feugiat. Vestibulum vel ipsum tellus. Aenean at mauris nec lectus congue molestie sed nec est. Suspendisse mollis est sit amet neque venenatis, eget vestibulum nisl sodales. Duis pellentesque dui eget ligula sodales volutpat. Mauris scelerisque et mauris eget auctor.
    </p>
  </section>
  <section class="chapter" id="chapter-2">
    <h1>Chapter 2: Praesent placerat lectus</h1>
    <p>
      Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus. Morbi a lacus eget augue sagittis euismod. Aliquam non leo quis dui bibendum viverra eu vel erat. Fusce iaculis vulputate leo, sit amet laoreet eros aliquam a. Sed id tellus at ligula porttitor pharetra. Morbi non fringilla augue. Cras sodales egestas mi, et porta orci ultricies sed. Sed et nulla a ligula aliquet accumsan non eleifend quam. Aliquam pellentesque, justo vel interdum accumsan, purus ipsum porttitor lectus, ac luctus risus lectus nec lectus. Cras ut augue condimentum, egestas nisi in, dictum erat. Nullam tincidunt tincidunt tempor. Sed in eleifend nibh, sit amet feugiat nisi. Cras at ante ut urna sagittis dictum ut nec elit.
    </p>
    <p> 
      In feugiat euismod massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec. Mauris et condimentum ligula. Vestibulum nec tortor quis urna dictum luctus. Cras quis suscipit metus. Ut dignissim ullamcorper aliquam. Donec condimentum eu tellus at interdum.
    </p>
    <p> 
      Proin eu quam id arcu interdum laoreet nec at urna. Vivamus non sem quis dolor sagittis facilisis. Nunc quis urna non neque sollicitudin hendrerit. Vestibulum odio velit, vestibulum vitae elementum convallis, tristique eu est. Sed vitae tortor sed purus accumsan euismod nec finibus lorem. Donec consectetur libero sit amet pretium eleifend. Nulla placerat ipsum sed eros aliquet, at venenatis purus convallis. Pellentesque pulvinar, justo eget tincidunt semper, augue massa placerat enim, non tempus quam erat eu orci. Suspendisse auctor consectetur lectus, a mattis odio. Pellentesque id sem sit amet justo fringilla bibendum id sit amet quam. Vivamus ex est, ultrices non pharetra eu, facilisis nec quam.
    </p>
    <p> 
      Etiam molestie sed orci sed suscipit. Donec ipsum est, venenatis ut nisl ut, viverra auctor diam. Cras vestibulum lacus vel nunc dapibus aliquam. Aliquam accumsan lorem rhoncus tortor rhoncus, ut euismod sapien ullamcorper. Vivamus et dictum lacus, eu pellentesque dolor. Suspendisse potenti. Mauris vitae volutpat odio. Duis vitae purus nec enim posuere efficitur at vitae nisl. Etiam enim nisl, rutrum in vestibulum nec, dapibus ut dui. Pellentesque imperdiet molestie ante quis feugiat. Sed nec felis congue, cursus ligula eget, bibendum est. Proin mattis, tortor non lobortis lobortis, nibh quam aliquam neque, sed tristique nibh ex aliquet felis. Phasellus non augue ac ante efficitur consectetur at at est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam dui enim, iaculis et felis ac, porta ullamcorper justo. Suspendisse potenti.
    </p>
  </section>
  <section class="chapter" id="chapter-3">
    <h1>Chapter 3: Aliquam eget massa loborti</h1>
    <p>
      Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper. Integer quis justo dignissim, porttitor urna sed, faucibus ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elit tortor, pharetra eu nisl vitae, placerat tempus lorem. Praesent rhoncus venenatis sodales. Cras tempor tempus lacus et pharetra. Phasellus at nulla sed ligula gravida hendrerit. Sed lorem tortor, consectetur id tempus eget, accumsan at eros.
    </p>
    <p> 
      Aliquam erat volutpat. Aenean ornare elit magna, et efficitur massa dapibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ultricies posuere magna. Vestibulum placerat ligula bibendum tempus viverra. Morbi et magna eleifend, scelerisque justo ut, suscipit enim. Vestibulum ex arcu, dictum ut ligula feugiat, fringilla feugiat dui. Aenean velit nisi, consectetur eu mi quis, sollicitudin elementum mauris. Phasellus condimentum eu magna nec sollicitudin. Morbi sed velit mollis, aliquam libero vel, rutrum sapien. Etiam sit amet turpis tincidunt, euismod justo eget, pretium leo. Quisque a blandit justo. Proin dolor leo, semper non rhoncus sit amet, varius ac erat. Donec in lacus nec purus iaculis posuere eget et ligula.
    </p>
    <p>        
      Vivamus vel velit vel metus bibendum luctus ut vitae tortor. Nullam at ante eu felis ultrices ultrices at in diam. Pellentesque eleifend leo sapien, vel commodo orci mollis vel. Phasellus placerat fermentum odio. Cras placerat posuere risus et consectetur. Fusce dictum faucibus est quis imperdiet. Ut tristique, enim ultrices scelerisque imperdiet, ex mauris pellentesque arcu, sit amet mattis lacus purus in ligula. Vestibulum rhoncus dapibus orci, sit amet volutpat turpis semper ullamcorper. Nullam tincidunt lacus vel purus molestie fermentum. Fusce dapibus pulvinar vehicula. Pellentesque tempor elementum fermentum. Nunc ex erat, gravida sit amet dictum at, semper ut mi. Vestibulum pulvinar congue eros id faucibus. In non tellus et mi egestas aliquet id non dolor.
    </p>
    <p>      
      Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo non diam congue tempor. Ut laoreet, est eget blandit congue, mauris magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed ac pretium magna, ut ultrices tortor.
    </p>

   
  </section>

</body>