cognitom / paper-css Goto Github PK
View Code? Open in Web Editor NEWPaper CSS for happy printing
Home Page: https://www.npmjs.com/package/paper-css
License: MIT License
Paper CSS for happy printing
Home Page: https://www.npmjs.com/package/paper-css
License: MIT License
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
In browsers, it does not automatically detect the size of paper.
How use multi orientation in one page?
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
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!
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
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.
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.
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
Hi, greate if we support div element print, not only body.
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 !
I discovered https://github.com/SienaSantos/paper-css fork which adds legal size in SienaSantos@780e703.
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!
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! ๐
I tried to add custom F4 size inside paper.css then it messed-up.
Please help. How to add it correctly?
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:
Good luck!
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, 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?
Hi
add a blank page on print preview and printing Firefox
When we use A4 paper
I want page break for after each content for pages. How to implement it.
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...
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.
Hosting on cdnjs makes installation easier. Will try to send a PR.
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
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, 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 ) ?
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 ?
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?
I am looking to generate page number dynamically while printing the document. Is there any possible way to do that?
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.
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.
Is this abandoned?
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.
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!
Hi,
Is there a possibility to add header and footer to pages?
Thank you
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?
Manually sized A4 container in a Figma project, dimensions are:
595x842 pixels
and is correct for A4-in-72dpi, the classic printing resolution.
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;
}
}
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?
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 documentationspaper-css-cli
: a new repo for our CLI toolI'll do that soon. Maybe v0.3.0.
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.
Is it sill needed ?
Lines 39 to 48 in c69fbe2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.