CSS page Property

<!-- print options -->

<fieldset id="printStyle">

  <legend>How would you like to print</legend>

  <label for="single"

    ><input type="radio" id="single" name="type" value="single" checked />No

    Pages</label

  >

  <label for="double"

    ><input type="radio" id="grouped" name="type" value="grouped" />Pages with

    Grouped Chapters</label

  >

  <label for="double"

    ><input type="radio" id="paged" name="type" value="paged" />Chapters

    Paged</label

  >

  <button id="print">Print</button>

</fieldset>

<!-- Content to be printed -->

<article id="print-area" data-print="single">

  <section id="toc">

    <h2>Table of contents</h2>

    <ul>

      <li>Foreword</li>

      <li>Introduction</li>

      <li>Chapter One - named pages</li>

      <li>Chapter Two - page orientation</li>

      <li>Chapter Three - page margins</li>

      <li>Conclusion</li>

    </ul>

  </section>

  <section id="foreword">

    <h2>Foreword</h2>

    <p>

      This book is all about how the CSS <code>@page</code> at-rule can help

      with printing HTML books.

    </p>

  </section>

  <section id="introduction">

    <h2>Introduction</h2>

    <p>

      This book is a concept to show how an <em>HTML</em> document can easily be

      printed out in pages.

    </p>

  </section>

  <section id="chapter1" class="chapter">

    <h2>Named pages</h2>

    <p>Lorem ipsum</p>

  </section>

  <section id="chapter2" class="chapter">

    <h2>Page Orientation</h2>

    <p>Lorem ipsum</p>

  </section>

  <section id="chapter3" class="chapter">

    <h2>Page Margins</h2>

    <p>There are 16 page margins that can be set:</p>

    <ul>

      <li>@top-left-corner</li>

      <li>@top-left</li>

      <li>@top-middle</li>

      <li>@top-right</li>

      <li>@top-right-corner</li>

      <li>@left-top</li>

      <li>@left-middle</li>

      <li>@left-bottom</li>

      <li>@right-top</li>

      <li>@right-middle</li>

      <li>@right-bottom</li>

      <li>@bottom-left-corner</li>

      <li>@bottom-left</li>

      <li>@bottom-middle</li>

      <li>@bottom-right</li>

      <li>@bottom-right-corner</li>

    </ul>

    <p>They can be used to show what appears in these parts of the margin</p>

  </section>

  <section id="conclusion">

    <h2>Conclusion</h2>

    <p>Now go ahead and write books.</p>

  </section>

</article>

<script>

const printArea = document.querySelector("#print-area");

const printButton = document.querySelector("#print");

const printOption = document.querySelector("#printStyle");

printOption.addEventListener("change", (event) => {

  if (event.target.value === "single") {

    printArea.dataset.print = "single";

  } else if (event.target.value === "grouped") {

    printArea.dataset.print = "grouped";

  } else {

    printArea.dataset.print = "paged";

  }

});

printButton.addEventListener("click", () => {

  window.print();

});

</script>

@page toc {
  size: a4 portrait;
  @top-middle {
    content: "Table of contents";
  }
}

@page foreword {
  size: a4 portrait;
  @top-middle {
    content: "Foreword";
  }
}

@page introduction {
  size: a4 portrait;
  @top-middle {
    content: "Introduction";
  }
}

@page conclusion {
  size: a4 portrait;
  @top-middle {
    content: "Conclusion";
  }
}

@page chapter {
  size: a4 landscape;
  @top-middle {
    content: "Chapter";
  }
}

@media print {
  fieldset {
    display: none;
  }
  section {
    font-size: 2rem;
    font-family: Roboto;
  }
  .chapter {
    border: tomato 2px solid;
  }
  [data-print="grouped"] > #toc,
  [data-print="paged"] > #toc {
    page: toc;
    font-family: Courier;
  }
  [data-print="grouped"] > #foreword,
  [data-print="paged"] > #foreword {
    page: foreword;
    font-family: Courier;
  }
  [data-print="grouped"] > #introduction,
  [data-print="paged"] > #introduction {
    page: introduction;
    font-family: Courier;
  }
  [data-print="grouped"] > #conclusion,
  [data-print="paged"] > #conclusion {
    page: conclusion;
    font-family: Courier;
  }
  [data-print="grouped"] > .chapter,
  [data-print="paged"] > .chapter {
    page: chapter;
  }
  [data-print="paged"] > .chapter {
    border: none;
    break-after: page;
  }
  .chapter > ul {
    columns: 2;
  }
}