delight-im / html-sheets-of-paper Goto Github PK

View Code? Open in Web Editor NEW

1.2K 43.0 142.0 492 KB

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

Home Page: https://delight-im.github.io/HTML-Sheets-of-Paper/

License: MIT License

CSS 54.56% HTML 45.44%

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

Copy all files to any desired directory
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

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
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

Stargazers

Watchers

Forkers

kangu geoffdavis92 jpkcom diycp rackberg foolsh defconcepts duxx0r aekkapun waifei gokemon mtco alfiyansys smuser90 casaval ryanlelek benbromhead goofwear license2e negativo hollerith yanlinaung mathiasrw qbektrix anewryzm ezhangle msylvia owenb132 istiak007 pandahisham heintzsight fengweijp henrytran9x premhameed bradparks diwahars yaramalla two8g khairahmanplus deawx kkakajan michaelwilkins waynepiekarski lijiajun linecode sachgits mdo5004 cntailor iogbole nishchal-p ychangyong daggieblanqx duncanmmacleod sam016 kenwilcox maixiaojie kyo88 zenpassvpn narubate badou119 marekleszczynski repocastle aron0524 lawrencenull bynalab killbilly rhythmpatel yuda250297 wkrea karpalig nasterblue 280455936 aengelhorn s1037989 datmemerboi dgnsrekt igorsheremet wpfcrazy julioborges stepankobzey vverheij svemulapalli q5-platform roelandp luqni hanifdeveloper knightmr chuksonu700 tommyteavee indasiriashin mohdanas07 nseaseb fucora alpiankhoerudin23 bangush alfins-dev yannasaimanoharreddy loyalpotato face08 malliparimi

html-sheets-of-paper's Issues

Render To PDF

Feel free to close this if it's like something that is fundamentally unsupported by browsers, but I was curious if there was a way to skip the printing step and go immediately to producing a PDF, identical in concept to manually "Print to File", but nicer from a user experience. I'm feeling like it's impossible from what I can find, but I wanted to ask just to make sure. :)

Improve project description

may be useful for providing invoices, legal notices, etc.
similar to the foundation of a word document
like the sheets in Google Docs
no skeuomorphic paper

page break on tag ol

bug appear when js function try to page break tag li in ol, any solution?

Landscape

Is there an option to use a sheet in landscape orientation?

Is the developer available for questions?

I've been using this repo extensively and am running into some issues with line numbering and formatting with this particular system. is the developer available to discuss some of the aspects of the page breaking system so that I can potentially fix it?

look great but...

I am looking for a solution similar as yours.
However I didn't see any solve for display a very long table and making sure the page breaks
accordingly to the size of the 'page' size.
Example - put the attached table> and you'll see there is incorrect paging.

Thanks / Idea: Serial letter printing with vue

Hey, thanks for sharing! I just hacked together a serial letter with some vue, works like a charm ❤️

Consider adding dynamic page numbers

html, body {
	counter-reset: hsop-page-number;
}
.page {
	position: relative;
}
.page::after {
	position: absolute;
	bottom: 10mm;
	left: 0;
	width: 100%;
	display: inline-block;
	counter-increment: hsop-page-number;
	content: "Page " counter(hsop-page-number);
	font-size: 8pt;
	text-align: center;
}

Page break at end of a4 page

Is it possible to have a page break when the user reaches the end of a page? At present the page extends further down when more lines are added

Teste

Imprimir

How to add running header and footer to printed pages

Hello there;

Thanks for the great code.

Do you have an idea how to add running header and footer to printed pages?

Regards;

Header and footer

Is there anyway to add header and footer in each page?

Automatic Page Breaks

Is there a way to add automated page breaks like in MS word without relying on the manual .page CSS rule when the page height is exceeded?

Is the demo 2 pages or 3?

I'm seeing two pages, but in the middle of the first page, it says "This sentence is preceded by a manual page break." Yet there is no page break. Should there be three pages?

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/76.0.3809.87 Chrome/76.0.3809.87 Safari/537.36

Add to Bower repository

It would be really great if I could install this library as a package through Bower. That way I wouldn't have to check it into my project source code. Example:

bower install html-sheets-of-paper --save

is there a way to add a header and footer on each page?

Nice template,
is there a way to add a header and footer on each page?

dynamic content

What if we have dynamic content which may be unto 3-4 or more pages?

Page break on <li> or at least on nested <ol> or <ul>

Would it please be possible to modify the script so that there could be a page break even for nested <ol> or <ul> elements?
For example:
<ul>
<li></li>
<li>
<p></p>
<div>
<ol>
<li></li>
<li></li>
</ol>
</div>
</li>
</ul>
Now when I have some long text with bullets (ol/ul) that are nested inside other bullets, the page doesn't break properly, or I have unnecessarily long spaces there.
I tried to add li inside your script like this:
snippets = pages[p].querySelectorAll("h1, h2, h3, h4, h5, h6, p, ul, ol, li");
but that does't work because in the resulting HTML code then those <li> elements are not wrapped in corresponding <ul> or <ol>.
I would be really grateful if you could get this problem resolved.
Thank you very much in advance for any reply.