Cheatsheets are not print-friendly

[bezhermoso]

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]

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]

I wish there was a print feature

[kputh]

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]

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]

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