cognitom / paper-css Goto Github PK

Hey, thanks for the CSS snippet for printing documents!
While setting up my document I tried to include a footer (Table). But i can't get it to respect the settings set for padding under <section class="sheet padding-15mm">.
Would be great if you could give me with some advice!

In browsers, it does not automatically detect the size of paper.

Hi,
I have a very simple page with 2 different background colours. However the print preview shows the page as plain white.

Here's my page

And here's my print preview

I'm using flex. is that causing problem?

Hi. Great snippet. Might be missing something though, when printing a page using the A4 style, it comes out about 2/3 of the size of the page. Tried across multiple browsers and OS. Any ideas ?

Is it sill needed ?

Hosting on cdnjs makes installation easier. Will try to send a PR.

I discovered https://github.com/SienaSantos/paper-css fork which adds legal size in SienaSantos@780e703.

I would like to use paper-css to style HTMLs invoices. It all perfectly looked on my monitor, I recalculated all units to mm (1mm == 3.78px). I print my PDFs using html-pdf node package which in turn uses phantomJS...
I don't know what to add more. There is no point of attaching CSS because it is simply as floats and divs with mm units set on them...

I am looking to generate page number dynamically while printing the document. Is there any possible way to do that?

Hi,
Is there a possibility to add header and footer to pages?

Thank you

How use multi orientation in one page?

I'm trying to dynamically add page numbers without the default browser styles applying, adding the title in the top two corners, date and time in the bottom right, and finally the page number in the bottom left.

This is the one solution I found that doesn't involve making HTML elements to manually split the document into pages.
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#counters

@page {
	@bottom-center {
		content: counter(page) " of " counter(pages);
	}
}

Unfortunately it doesn't work. I might be missing some details about how this is supposed to work.

Do you have any idea how I could use this css styling in atom, so I can write in A4/Letter format? I'm using markdown and I would like to see were the page ends so I can space everything nicely. I'm planning on using it to write papers, notations, etc. etc.

Thanks a lot in advance,

Sander.

Hi,
i created a document that has 7 pages. When ever i want to print it, it adds after each page a blank page. The Preview and code looks good. I can also say, that there is no extra overlapping data.
Does anyone of you had the same problem?

Browser: Chrome

Hello!

Thank you for this great css!

I have the following issue; when I create 2 A4 sheets, the print preview (option-P) on Mac shows 3 pages, nr 1 and nr 3 are correct, page nr 2 is an empty sheet.

I set the padding to 25 mm which is way larger than the real margins of my printer.

Can i have multiple pages with different sizes and orientations?
I tried to replace "body" to "div", wishing I can have multiple different classed divs in the css; it did not work

I'm planning on fixing this anyways because it's really bugging me but I figure I should open up an issue just to document it. You can see the site here.

I am going to print receipt used in supermarket, where its width is 58mm. How can I use this pager-css in self-defined page size?

Hello. Previously, I wanted to thank you for the paper-css library.

I want to ask how can I print on two A4 paper in one A3 landscape paper? Like this

Maybe someone can help? Thank you

I think for visual purpose for the clients/users centering the sheet is great for them. So I added this small line of css for centering the sheets without affecting the print result.

.sheet {
     margin: 0 auto;
}

I have used this small brilliant perfect fit css lib combined with normalize.css for all my docs and they just render perfectly on every browser! Thanks in advance!

I tried to add custom F4 size inside paper.css then it messed-up.
Please help. How to add it correctly?

I am making notes for myself to study and I am using your paper css which is very nice. it's an amazing piece of work.
i will distribute my notes to my other classmates but is it necessary for me attribute the name of the author of paper css in my notes due to mit license? I dont want to show any attributions or anything, just the notes themselves.

Hi, greate if we support div element print, not only body.

To me it looks like some page size definitions are off by one mm, e.g. the one for A3:

body.A3               .sheet { width: 297mm; height: 419mm }
body.A3.landscape     .sheet { width: 420mm; height: 296mm }

A3 is defined as 297 x 420 mm, so I would expect it to be like this instead:

body.A3               .sheet { width: 297mm; height: 420mm }
body.A3.landscape     .sheet { width: 420mm; height: 297mm }

But maybe there is a reason where some browsers have issues with the "correct" dimensions?
Otherwise I would be happy to submit a PR to adapt them.

Just wanted to say thanks for the stylesheet 👏 I've been a web-developer for more than a half of my life and I had no idea printing from a browser could be implemented so neatly. Thanks! 👍

At this point paper-css has the code for CLI tool in its own repo. But the dependency has become too big. It seems good idea to move them into a new repo.

• paper-css: this repo. Just CSS file and documentations
• paper-css-cli: a new repo for our CLI tool

I'll do that soon. Maybe v0.3.0.

Hi, Do you have an example , showing paper.css in a bootstrap 3 environment ?
How do we use paper.css in a grid ( table-less layout ) ?

The paper.min.css is up-to-date in the repo, but the CDN doesn't have the new legal and letter sizes, since latest version bump is 0.3.0 from 10 months ago.

I've been using this library relatively successfully however I'm noticing a visual mismatch between my original designer's concept (a Figma project) and what I'm seeing in the browser for rendered HTML (using this library).

Maybe I'm overlooking something; can someone point it out?

Designer concept ("A4"):

Manually sized A4 container in a Figma project, dimensions are:
595x842 pixels
and is correct for A4-in-72dpi, the classic printing resolution.

HTML in-browser ("A4"):

Using this library with class "A4", rendered HTML dimensions in-browser are:
210x296mm which is 794x1123 pixels
and is correct for A4-in-96dpi, the typical screen resolution.

DESIRE: For these pixel dimensions to match; using the same "A4-in-x-dpi".

Please see https://www.papersizes.org/a-sizes-in-pixels.htm

When looking at this libraries' CSS, I think I just see size numbers based on 96dpi, am I wrong?
https://github.com/cognitom/paper-css/blob/master/paper.css

Maybe I'm missing something; or does everyone not care about DPI and is ok with 96dpi-based values in the in-browser preview that this library provides?

My understanding is that this library may help us achieve a better visual sync across all implementations: concept design, executed design (HTML), print preview and final printed product. If one of those steps is 72dpi, and another is 96dpi... doesn't that break things? I'm not interested in having the in-browser view look pretty in the users' screen... I'm interested in it looking accurate so what is printed matches everywhere else. Yes, I'm assuming a user will print in 72dpi.

QUESTION: When I specify class "A4" with this library, where/how do I ask for particular DPI, like 72, 96, 300 etc. ??? Do I have to make those CSS rules myself? Isn't the point of a library to provide this for you?

As a starting point, this customization satisfies my direct need; I made a class DPI-72:

@media screen {
    body.A4.DPI-72 .sheet {
        width: 595px;
        height: 842px;
    }
}

Hi paper-css teams,

Why did you created this library compared to Gutenberg and Hartija Css Frameworks ?

https://github.com/BafS/Gutenberg
https://github.com/vladocar/Hartija---CSS-Print-Framework

What are the core differences between Gutenberg, Hartija and Paper-css ?

Thanks !

Chrome 59 has supported a new headless mode! 🎉

To try it, add a line below to your .bash_profile:

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

Then, reload .bash_profile:

$ source ~/.bash_profile

and, run Chrome in headless mode:

$ chrome --headless --disable-gpu --virtual-time-budget=1000 --print-to-pdf=github.pdf https://github.com/

• --disable-gpu: this is needed to avoid error
• --print-to-pdf: set file to output
• --virtual-time-budget: set time to wait after document ready (for SPA)

See more details here:

• https://developers.google.com/web/updates/2017/04/headless-chrome
• https://cs.chromium.org/chromium/src/headless/app/headless_shell_switches.cc

Good luck!

I want page break for after each content for pages. How to implement it.

Any one know why this not work in iPad?
The PDF size always equals A4 size in iPad,
I want to generate A5 size PDF.
thanks!

Here is my tip.
You could create a class for those body element styles so we could set such class in a non root element, like a div, turning it the preview frame instead; it would help a lot as sometimes we need put other elements inside body and they shouldn't be influenced by these css styles.

I needed do this in a project because you've set in body directly.

Currently you'll have to define "sheet" for each page, but I am looping long list of data so I only created one sheet. The problem is after the end of the sheet the rest of the data gets hidden and not printed.

Hi
add a blank page on print preview and printing Firefox
When we use A4 paper

Is this abandoned?

I have a very large text, so when I put inside a he cut the text at the bottom of the page, how can I make that text start in another page?

tks

When my <div> tag has huge content. Say suppose 10 paragraphs, the bottom content is getting cut off, how do I shift the missing content to another div tag automatically?

Hi, I just noticed that the installation example in the main page still point to 0.3.0 release, while 0.4.1 is out.

All my compliments for this great piece of code!!!!

Thank you

Giorgio

print2.txt

Hi, Firefox, Edge and Explorer add a blank page on print preview and printing. The initial view on load looks fine, but when I hit "print" extra page is added.
Am I getting something wrong? Is there a way to deal with this?