https://github.com/delight-im/HTML-Sheets-of-Paper

Word processor in your browser using HTML and CSS (for invoices, legal notices, etc.)
https://github.com/delight-im/HTML-Sheets-of-Paper

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/delight-im/HTML-Sheets-of-Paper
• Owner: delight-im
• License: mit
• Created: 2014-09-13T06:06:55.000Z (about 10 years ago)
• Default Branch: gh-pages
• Last Pushed: 2022-03-27T14:43:02.000Z (over 2 years ago)
• Last Synced: 2024-08-01T00:40:02.358Z (3 months ago)
• Language: CSS
• Homepage: https://delight-im.github.io/HTML-Sheets-of-Paper/
• Size: 480 KB
• Stars: 1,206
• Watchers: 43
• Forks: 142
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-CSS-Resources - HTML-Sheets-of-Paper:

README

        
# 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**](https://delight-im.github.io/HTML-Sheets-of-Paper/): Try modifying or printing the page

## Usage

 1. Copy all files to any desired directory

 2. Modify the HTML source in [`index.html`](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`

    1. Set the second value of the `size` attribute to `landscape`

 1. 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](https://opensource.org/licenses/MIT).