/HTML-Sheets-of-Paper

Word processor in your browser using HTML and CSS (for invoices, legal notices, etc.)

Primary LanguageCSSMIT LicenseMIT

Sheets of Paper

Word processor in your browser using HTML and CSS (e.g. for invoices, legal notices, etc.)

  • Poor man's Google Docs
  • Like the foundation of Microsoft Word or LibreOffice — but in your web browser
  • Emulates sheets of paper in web documents (but without skeuomorphic paper textures)

Live demo: Try modifying or printing the page

Usage

  1. Copy all files to any desired directory
  2. Modify the HTML source in index.html to your liking

Browser compatibility

  • Chrome 4+
  • Firefox 19+
  • Safari 5+
  • Opera 10.1+
  • Internet Explorer 9+
  • Edge 12+

Paper sizes

  • A4 (21cm × 29.7cm) — sheets-of-paper-a4.css
  • A3 (29.7cm × 42cm) — sheets-of-paper-a3.css
  • US Letter (21.6cm × 27.9cm) — sheets-of-paper-usletter.css
  • US Legal (21.6cm × 35.6cm) — sheets-of-paper-uslegal.css
  • US Tabloid (27.9cm × 43.2cm) — sheets-of-paper-ustabloid.css

Landscape orientation

  1. In the css/sheets-of-paper-*.css variant that you’re using:
    1. Swap the values of width and min-height
    2. Set the second value of the size attribute to landscape
  2. In index.html, set Config.pageHeightInCentimeter to your new min-height value from above

Printing

Chrome

  • Change the Destination to Save as PDF.
  • Make sure the Paper size is set to the one defined in your CSS.
  • From the Margins list, choose None to prevent the browser from overriding our CSS.
  • In the Options section, uncheck Headers and footers and check Background colors and images.

License

This project is licensed under the terms of the MIT License.