Giter VIP home page Giter VIP logo

html-sheets-of-paper's Introduction

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.

html-sheets-of-paper's People

Contributors

ocram avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.