HTML A4 Paper

If you are a web developer who is sick of setting your documents layout...

Create your own A4 page with HTML and CSS!!

<body>
  <div class="page">
    <!-- Your content here -->
    <h1>Hello from h1 tag</h1>
    <h2>And I am h2</h2>
    <!-- End of your content -->
  </div>
</body>

Installation

git clone https://github.com/kykungz/html-a4-paper.git

Custom bleeding and margin

You can specify bleeding and margin via CSS Variables.

<body style="--bleeding: 0.5cm;--margin: 1cm;">
  <div class="page">
    <!-- Your content here -->
  </div>
</body>

Add more pages

You can add more pages with <div class="page"></div>

<body>
  <!-- 3 Pages -->
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
</body>

Save to PDF

Open in Chrome (Recommended)
Press Ctrl+P or Cmd+P
Change the destination to Save as PDF

About

📄 Create your own printable A4 page with HTML and CSS

https://kykungz.github.io/html-a4-paper

The Unlicense

Languages

Language:CSS 63.6%Language:HTML 36.4%