Paper CSS for happy printing

gravatar
CSS 2/3, Paper CSS
Snippet by Anon
1049 0
HTML
<!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->


<!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-20mm">

    <h1>OpenSource Cafe, Shimokitazawa</h1>
    <ul>
      <li>6-11-14-G1 Daita, Setagaya-ku, Tokyo, Japan</li>
      <li>TEL: +81-70-54315221</li>
      <li>http://www.osscafe.net</li>
    </ul>

    <article>
      <h2>Received from:</h2>
      <p>John Doe</p>

      <h3>For:</h3>
      <p>Coworking-space fee</p>

      <h4>&yen; 1,000-</h4>
      <ul>
        <li>Tax: included</li>
        <li>Paid by: cash</li>
        <li>No. 00000</li>
        <li>Oct 10, 2015</li>
      </ul>
    </article>

  </section>
CSS
<!-- Set page size here: A5, A4 or A3 --> <!-- Set also "landscape" if you need --> @page { size: A5 landscape }
{ } JS

            
Preview