{"id":13393053,"url":"https://github.com/cognitom/paper-css","last_synced_at":"2025-05-14T11:09:45.780Z","repository":{"id":1633726,"uuid":"43663154","full_name":"cognitom/paper-css","owner":"cognitom","description":"Paper CSS for happy printing","archived":false,"fork":false,"pushed_at":"2023-05-16T23:55:20.000Z","size":1250,"stargazers_count":2542,"open_issues_count":28,"forks_count":344,"subscribers_count":70,"default_branch":"master","last_synced_at":"2025-04-10T18:55:51.778Z","etag":null,"topics":["css","printing"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/paper-css","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cognitom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-10-05T03:13:39.000Z","updated_at":"2025-04-10T07:48:59.000Z","dependencies_parsed_at":"2023-07-05T17:15:22.735Z","dependency_job_id":null,"html_url":"https://github.com/cognitom/paper-css","commit_stats":{"total_commits":59,"total_committers":6,"mean_commits":9.833333333333334,"dds":"0.15254237288135597","last_synced_commit":"c69fbe2d687c328345774fb81b5e81d40ea7ad47"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cognitom%2Fpaper-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cognitom%2Fpaper-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cognitom%2Fpaper-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cognitom%2Fpaper-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cognitom","download_url":"https://codeload.github.com/cognitom/paper-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248340070,"owners_count":21087383,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","printing"],"created_at":"2024-07-30T17:00:41.755Z","updated_at":"2025-04-11T04:20:36.644Z","avatar_url":"https://github.com/cognitom.png","language":"CSS","readme":"# Paper CSS for happy printing\n\n[![CDNJS](https://img.shields.io/cdnjs/v/paper-css.svg)](https://cdnjs.com/libraries/paper-css)\n\n\u003e Front-end printing solution - previewable and live-reloadable!\n\nRecently, we say \"front-end\" every day. Then why don't we make the printing documents in front-end? We believe we can make it perfectly without back-end. Paper CSS is just [a small snippet of CSS](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css), but it helps us create them in browser easily.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Live Preview](#live-preview)\n- [PDF Generation](#pdf-generation)\n- Why Paper CSS?\n  - [Previewable](#previewable)\n  - [Live-reloading](#live-reloading)\n  - [Comparisons](#comparisons)\n- [License](#license)\n\n## Installation\n\nGet Paper CSS from [cdnjs](https://cdnjs.com/libraries/paper-css) (recommended):\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css\"\u003e\n```\n\nOr download [paper.css](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css) file from GitHub manually, or via npm:\n\n```bash\n$ npm install paper-css\n```\n\n## Basic Usage\n\nLoad paper-css into `\u003chead\u003e` like this:\n\n```html\n\u003c!-- Load paper.css for happy printing --\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/paper.css\"\u003e\n\n\u003c!-- Set page size here: A5, A4 or A3 --\u003e\n\u003c!-- Set also \"landscape\" if you need --\u003e\n\u003cstyle\u003e@page { size: A5 }\u003c/style\u003e\n```\n\nSet the class of `\u003cbody\u003e` and also set \"sheet\" for each sheet.\n\n```html\n\u003c!-- Set \"A5\", \"A4\" or \"A3\" for class name --\u003e\n\u003c!-- Set also \"landscape\" if you need --\u003e\n\u003cbody class=\"A5\"\u003e\n\n  \u003c!-- Each sheet element should have the class \"sheet\" --\u003e\n  \u003c!-- \"padding-**mm\" is optional: you can set 10, 15, 20 or 25 --\u003e\n  \u003csection class=\"sheet padding-10mm\"\u003e\n\n    \u003c!-- Write HTML just like a web page --\u003e\n    \u003carticle\u003eThis is an A5 document.\u003c/article\u003e\n\n  \u003c/section\u003e\n\n\u003c/body\u003e\n```\n\nAll available page sizes is listed below:\n\n- A5, A5 landscape\n- A4, A4 landscape\n- A3, A3 landscape\n- letter, letter landscape\n- legal, legal landscape\n\nSee also [the examples](examples/) for detail.\n\n## Live Preview\n\nInstall [live-server](https://github.com/tapio/live-server):\n\n```bash\n$ npm install --global live-server\n```\n\nThen, preview your HTML file:\n\n```bash\n$ live-server your-document.html\n```\n\nYour browser will open the document. And the browser will automatically reload the page when changes are detected.\n\nSee more detail and all options [here](https://github.com/tapio/live-server#usage-from-command-line).\n\n## PDF Generation\n\nInstall [electron-pdf](https://github.com/fraserxu/electron-pdf):\n\n```bash\n$ npm install --global electron-pdf\n```\n\nThen, generate a PDF file from your HTML file:\n\n```bash\n$ electron-pdf your-document.html your-document.pdf\n```\n\nSee more details and all options [here](https://github.com/fraserxu/electron-pdf#all-available-options).\n\n**Note**: we used to provide a small CLI tool `paper-css` while `v0.2.x`, we've dropped it in favor of `electron-pdf` which is a better option to do the same, basically.\n\n## Why Paper CSS?\n\n### Previewable\n\nYou can check the design and layout before printing. See the browser like when you build a web page.\n\n![Preview](images/preview.png)\n\n[This example](examples/receipt.html) could be printed like this.\n\n![Dialog](images/dialog.png)\n\n### Live-reloading\n\nIt's just HTML/CSS, so we can edit it with live-reloading. See [Live Preview](#live-preview) section above.\n\n![Live reloading](images/live-reload.png)\n\n### Comparisons\n\ntype | expression | learning cost | editable | in-browser | multipage\n:-- | :-- | :-- | :-- | :-- | :--\nHTML | Enough | already known | No | OK | ~100 pages \\*\nSVG | Enough | not so difficult | No | OK |\nPDF | Perfect | difficult | No | NG | no limit \\*\\*\nExcel | Not cool | *sigh* | Yes | NG | uncontrollable\n\n\\* It depends on user's environment. \\*\\* Only if you have huge memory on the server.\n\n## License\n\nMIT © Tsutomu Kawamura\n","funding_links":[],"categories":["CSS","CSS Frameworks"],"sub_categories":["Test"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcognitom%2Fpaper-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcognitom%2Fpaper-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcognitom%2Fpaper-css/lists"}