Print oriented CSS for articles/discourse

[paperdigits]

I just started getting into the CSS paged media spec at work, and man I think it is awesome. As a coinsidence, I saw this comment about discourse not printing well (though that may be an IE issue).

Are you interested in trying to have a print style sheet for articles on the site and possibly for discourse?

[patdavid]

I would have sworn that I did have print styles defined, but wouldn't be surprised if I was just insane. :)

Yes. This would be a good idea. I had something in mind once upon a time, but we can revisit and start from scratch too.

[paperdigits]

If you can find what you had, point me to it, otherwise I can start hacking at it!

[patdavid]

I'd say hack at it! (Don't forget to grab a clean version of the repo - I nuked some big binary blobs a little while back and don't want them polluting the commit chain again).

I was thinking along the lines of...

• Remove the lede image? (Or maybe this should be kept?
• Fix the column width?
• Fix the typography size?
• Change anchor element visual cue (underline?)

The last two are mainly to keep the cpl to around 70-80 if possible (assuming we're targeting A4/8.5x10 roughly for page sizes.

[paperdigits]

Yes to all of your points, except I don't understand what you mean by "Change the anchor element visual cue."

[patdavid]

Change the anchor element visual cue.

Just wondering if there were any reason to possibly offset links in the printed version? If so, I'd change links to use an underline (vs. a different color). But honestly, this is so far down the list of important things. :)

Oh, I'd probably lose all of the stuff in the footer (or at least change up the styling to be unobtrusive - of course I'm probably preaching to the choir here... :) ).

[paperdigits]

Oh yeah, I see. Actually I was going to add some code to print the URL after the link text, because if you actually print it (not just print to PDF), the knowing that the text is a link doesn't do you any good. You need to know the actual URL.

I'm way down the rabbit hole on this at work, so I'll see what I can put together.

[paperdigits]

I did a little hacking if you want to check it out: https://github.com/paperdigits/website/tree/print-style

There is something funny that is making the paragraphs wrap a bit funny. I'm not sure what that is.

[patdavid]

I'll have a look a little later!

[patdavid]

Looks like a great start (and neat method for getting the url printed on links - I like it +I learned something tonight!). :)

I've got to finish pushing a post about the digital painters, but I'll jump in and help soon. The print version now has a similar problem I've been meaning to address with the overall page layouts. I'd like to center the column overall, and probably push the width just a bit more.

Do you think a printed page should go full width of the page with the text? I feel like it probably should, but would want to see/test a couple of things (lists, short paragraphs, etc..) along with fixing some margin issues.

[paperdigits]

Yes, the text should go the full width of the printed page. Sizing the font at 12pt for the print version should leave the line length around 80 characters, for both letter and A4. I looked through the stylesheets a bit but didn't see anything that looks like it caused the weird line breaks. If you can point me in the right direction, I'll have a look at it. Is there a reason you didn't use a framework like bootstrap or foundation?

…

On December 4, 2016 8:34:32 PM PST, Pat David ***@***.***> wrote: Looks like a great start (and neat method for getting the url printed on links - I like it +I learned something tonight!). :) I've got to finish pushing a post about the digital painters, but I'll jump in and help soon. The print version now has a similar problem I've been meaning to address with the overall page layouts. I'd like to center the column overall, and probably push the width just a bit more. Do you think a printed page should go full width of the page with the text? I feel like it probably should, but would want to see/test a couple of things (lists, short paragraphs, etc..) along with fixing some margin issues. -- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: #40 (comment)

[patdavid]

Is there a reason you didn't use a framework like bootstrap or foundation?

Not particularly. They weren't offering me anything I couldn't do myself reasonably, and I generally prefer to build up as needed vs. pulling in everything. Plus I like playing. :)

[paperdigits]

I've pushed the one file, print.scss into the style folder on the branch print-style. It isn't linked to in style.scss yet.