search

rstacruz / cheatsheets

Cheatsheets for web development - devhints.io
https://devhints.io
13.83k stars 3.59k forks source link

Cheatsheets are not print-friendly #113

Open bezhermoso opened 7 years ago

bezhermoso commented 7 years ago

The cheatsheets looks great on the browser, and they are quite discoverable. However, they don't print out correctly. I know people that likes printing out cheat-sheets to pin around their workstation, and I think that is a valid and pretty common use-case.

I don't know how much work it would take to craft a specific CSS rules just for print for devhints.io, and I don't really think it's very essential to have them, but it would be nice to have the cheat-sheets print out nicely for those that like to have them pinned and easily accessible at a glance.

ghost commented 6 years ago

Hello

I have fixed some of the CSS to become more useful for printing,

Website Admin : Please add the following CSS to the website:

Here is the file of the same following CSS devHintsIo.txt

@media print { h2 { width: 86%; max-width: 86%; display: block; } .h3-section-list > .h3-section { width: 86%; max-width: 86%; } .h3-section-list.-three-column > .h3-section { width: 45%; max-width: 45%; } .h3-section-list > .h3-section, .h3-section-list.-three-column > .h3-section { page-break-inside: avoid; box-sizing: border-box; position: unset !important; display: inline-block; float: left !important; margin-left: 20px; } .h2-section { page-break-inside: avoid; } footer { display: none; } }

mathieug commented 6 years ago

I wish there was a print feature

kputh commented 5 years ago

The current version of this project seems to do runtime-layouting with JavaScript. There is inline CSS and absolute positioning. This makes it hard to create print-optimized cheatsheets. The first step might be to migrate to a CSS-only layout. CSS flexbox, CSS grid and CSS multi-column layout should do the trick.

Ray-Eldath commented 4 years ago

Ah... I do love printable cheat sheet which can be hold in my hand or stuck on my desk a lot... devhints's vim cheat sheet is the best vim cheat sheet I've ever seen. Sad about the hard to print them.

I tried to use Chrome Headless or so to capture the content box, and rearrange them on the paper-size PDF. After some investigation I found it's too complex... hope there're other better workarounds, or if someone can help me accomplish this.

rubend056 commented 4 years ago

Firefox has a tool now to screenshot the entire page into an image. Which makes it easy to print. Trying it right now