

Whither print.css? A Rallying Cry for a Web That’s Fit to Print (2013) - pessimism
http://www.modrenman.com/2013/04/28/print-css/

======
onli
The premise is questionable. A webpage lives in its own medium, or it is its
own medium. It is normally meant to be read with an electronic device, to be
interactive and linked, though those devices can be quite different of course.

But by printing a webarticle, you are transforming it into another medium,
onto paper. Therefore it is actually a very strong assumption - and one I
don't follow - to _" expect them to support the habits of people who prefer to
read longer articles in print"_.

And that even before talking about protecting the nature from wasteful habits
like this.

But sure, if you enjoy it, build a small print.css, removing everything
unnecessary and making it readable in black&white. Just be aware of the medium
change, and that a good design in the one medium won't necessary work in the
other.

~~~
leoc
> The premise is questionable. A webpage lives in its own medium, or it is its
> own medium.

You have to bear in mind that this view is diametrically opposed to the
principle of separating presentation and content on which CSS, the HTML
content-markup elements and so on were based.

~~~
onli
I think I know what you are targeting at, but I really don't think so.

You can have a separation of presentation and content while still targeting a
specific medium, the separation doesn't automatically mean that the content is
fitting for every medium.

And the elements used here show that pretty clearly. When just regarding HTML
and ignoring CSS, you can see its elements that are made for other mediums
than paper. It is Hyper Text after all, not Text.

And when just regarding CSS, you have all those elements that are of no use on
paper, like position: fixed.

Or just think of the issue in responsive design of wanting to have another,
shorter text for mobile devices. There, even the content alone is not fitting
for the medium, regardless of the presentation.

~~~
DanBC
> The premise is questionable. A webpage lives in its own medium, or it is its
> own medium. It is normally meant to be read with an electronic device, to be
> interactive and linked, though those devices can be quite different of
> course.

The corruption of the www is something that still makes me sad and angry even
though I know I lost the argument years ago.

You should not know, nor care, how the reader is usin the information. Maybe
they have screen readers or braille devices or extra huge high contrast text.
Maybe they want to print it out.

Most www tex does not need to be forced into an app (which is usually a really
bad browser) or to be forced into specific layouts and columns with widgets
and gadgets.

I really wish newspapers would learn this lesson.

I want the text. Put all the banners and gizmos and adverts at the top and
bottom of the page. Then give me nicely formatted properly styled text and get
out of my way.

I am happy to pay for this. Real money, not just leaving an ad-blocker turned
off.

~~~
onli
Now I feel misunderstood.

I'm perfectly fine with using different devices and different presentations.
But changing mediums is stronger than just changing the device or the
presentation. The web has an underlying vision that can't be transported to
every medium:

> _He [Tim Berners-Lee] kicked off by explaining what he means by the two
> words "semantic" and "web." Underlying the Web was the philosophy of a
> navigable space, with a mapping from URI to resources. He stressed that a
> URI was an identifier for a resource, and not a recipe for its retrieval._

Sure, maybe you can argue that you can build something like this with paper,
but it is not practical. And you can't do that anymore when going to the
semantic web.

Therefore, I don't think you can expect webpages to support mediums like paper
that are intrinsically not web-able.

That's all I'm saying. Nothing about ads, nothing about apps, nothing about
app-browsers.

PS: Why the downvotes? Did I formulate an attack I didn't realize?

~~~
Dylan16807
I don't understand. Paper can't navigate but you don't need navigation. Why
can't the underlying vision of everything except navigation work just as well?

~~~
onli
The web is more than a place to read an article like on paper. It is a place
where articles (ressources) have their own URL and are linkable, sometimes
even in both directions (think of trackbacks and pingbacks, following the
vision that was way more prominent in the beginning, or xanadu). You need
navigation for that, it is essential for what the web provides.

------
zokier
While I do think that doing throw-away prints of webpages is bit questionable,
there is still some value in making webpage print out nicely. I think
"printing" PDFs is one of the easiest robust ways of archiving web pages. It
creates nice static self-contained local copy of the content, which is
readable basically on any platform.

Another example would be e-readers (eg Kindle) which in ways are closer to
print than web as a medium. They are not currently really equipped to handle
web-pages well; Send to Kindle extension seems to do some sort of readability-
like heuristic when formatting web-pages to be sent for Kindle. It would be
kinda nice if print css would be good enough to work as-is on Kindle (etc).

Of course there is the question of the overall quality of current web-design.
Many pages are just ridiculously busy to begin with, something that somehow
becomes accentuated when printed out. Maybe designers should spend a moment
after building a print layout reflecting if all that stuff that needed
chopping away for print was actually necessary to have in the first place.

------
zorbo
I personally don't care that much about most articles being printable, but if
you're making any kind of material that is supposed to be studied, please,
please make sure it's properly printable. Doing research / studying a topic is
something that is still infinitely easier to do on paper IMHO.

Having said that, does anybody know a decent web-based app for researching
stuff? What I definitively need is:

* Ability to have a collection of related articles in one place

* Simple list of bookmarks that link to a specific part of the text.

* Highlighting in different colors

* Adding comments to a page that are _easy_ to view. Preferably in a sidebar next to the page or something.

* Adding links to external sources interactively to the document

* The ability to write a summary of the article

I've searched before a few times, but I've never been able to find something
that had all the above and, more importantly, properly integrated those
features.

~~~
psychometry
I've been using Scrivener to organize materials for research projects:
[http://literatureandlatte.com/scrivener.php](http://literatureandlatte.com/scrivener.php)

It has a steep learning curve, but only because it's so powerful and
extensible.

------
ef4
Unfortunately, printed media support in CSS still sucks.

I have a web app that needs to generate printable official documents, and it's
really not possible to do a good job with CSS. I resort to generating PDF in
Javascript, which is laborious and duplicates a lot of effort.

My biggest gripe is the inability to control the header and footer and the
inability to sanely specify where page breaks are allowed.

~~~
romey
"page-break-inside: avoid" and "page-break-after" seem to work fairly
reliably, as long as you aren't doing too much weird stuff with positioning,
floats, etc.

Three major problems I've had with printing from HTML is 1) It seems that the
different browsers have different default margins, and the outside margins
aren't controllable from CSS 2) The javascript print dialog doesn't give any
sort of feedback...it just blocks JS execution. There's no way to no if the
user cancelled the print, etc. 3) Different browsers don't reliably resize
things to fit on the page. Using percentages for anything (while maybe not
recommended anyway) just doesn't work for printed CSS

~~~
ef4
I fought with those and eventually gave up, because their implementations were
either broken or missing in the browsers I was supporting. But that probably
18 months ago now. Maybe they have improved.

------
cmiles74
The idea of printing a web page (particularly an article) does seem, in many
ways, pointless. As others mentioned, it's a fundamentally different medium
that strips out all of the things that make a web page compelling (linking,
dynamicism, etc.)

On the other hand, there's clear value in stripping out the ephemera and
detritus around a work in order to concentrate more centrally on the work
itself. While the idea of "printable" becomes less and less tenable, the core
idea of focusing on the work itself is still important. In some ways it seems
a loss that these ideas have become conflated.

~~~
frik
I printed out the HTML 5 spec from W3C. [http://www.w3.org/TR/html5/single-
page.html](http://www.w3.org/TR/html5/single-page.html)

It's so much easier to browse through pages on the desk, the fit on 30 pages
or so that I stapled together.

------
mcmillion
Based on what I'd assume the user base for this kind of thing is, I'd support
IE6 before I worried about printing.

------
snide
So recently I re-built the theme for Read the Docs which some of you more
pythonic devs might be using. Despite having designed sites for nearly two-
decades it was the first time I'd ever gotten a request to make sure there was
some print rules in there. Makes sense with docs.

The funny bit of course is I didn't even know there was a specific print rule
I could use. Took me about 10 minutes to fix.

Actually, looking at the design now I just noticed a bug. Off to my text
editor!

------
Raphmedia
I've heard of people printing whole articles and reading them in paper format
before.

Personally, I would rather have a print.css that hides everything but a
message that says "save the trees, don't print an article only to discard it
after".

We do have some clients that ask for their website to be printable, but it's
mostly clients that are in the legal or medical business. It doesn't come in
regular contracts, the client has to ask for it.

~~~
alok-g
See my comment here:

[https://news.ycombinator.com/item?id=7609711](https://news.ycombinator.com/item?id=7609711)

I would find this message rather rude. I am interested in saving trees, but do
not think technology offers me a solution yet. I print out of necessity.

~~~
Raphmedia
Of course, this was a joke more than anything. Printing the web is fine when
it is needed.

I'm talking people going to a news website, printing the article, reading it
and discarding the resulting paper afterward. Unless you need to annotate or
use the printed articles in some of the ways you listed, you shouldn't be
printing all the articles you see.

~~~
alok-g
That matches my understanding too.

It still makes me suffer a lot though because optimizing for printing us
clearly not the norm.

Also, I frequently cache articles by printing to PDFs not knowing a better way
of capturing a static snapshot of a web page into a single file. I do not
print these, but the resulting PDFs suffer from the same layout issues. Also,
links do not get converted. (Several PDF software makers supply plugins for
Microsoft Office, but almost none for web browsers.) I am happy to hear if
someone has a better solution for this (other than using Internet archiving
for such cashing).

------
kalleboo
The only thing that I usually bother to ensure really works when printed is
receipt pages. I haven't even owned a printer in years, but printing receipts
to PDF is something I do daily.

I'd suggest OP buy a Kindle, but on the other hand you probably need to go
through quite a few reams of paper before you make up the environmental cost
of even just the lithium-ion battery...

------
jimktrains2
I feel like browser print support is like CSS support at the end of the last
millennium: fragmented and not guaranteed to be decently supported if at all.

I wanted to make a print style for my CV and it just was a terrible pain to
get things like per page header and footers.

------
frik
Internet Explorer has by far the best print preview and printing engine. It
hasn't changed since v4, nevertheless it is still better than any other
browser.

One can zoom the page content, print only selected content, disable background
pictures and color, print only main content (no menu bar), etc.

Interestingly enough, I tried out NCSA/Spyglass Mosaic v3 32-bit on Win7 and
it already had almost the same print-preview features that are still available
in IE (IE 1 emerged from Mosaic code base, IE up to v6 had "Mosaic" it in the
copyright text in the about dialog).

Please browser vendors improve your print preview engine!

------
Rumudiez
The poor letter-spacing, or more accurately kerning, is that either the fonts
in use don't have kerning pairs or they're being ignored, as web browsers seem
to do. Printing from another typeface would solve the former, but in my
experience (and not thoughtful research), kerning pairs are ignored in every
browser. Firefox does give an effort, though, with automatic optical kerning,
but it often crashes letters together while leaving too much space between
others. It would be interesting to know if that feature translated to print.

~~~
idlewan
I always go with firefox for printing a page, chromium always fucks up the
kerning so much more.

I did notice that it was a lot worse on small font size, as the article did
too, and it's really annoying: font are supposed to be scalable, why isn't
there the same kerning errors on bigger sizes?

------
atacrawl
Unless printing the page is a useful and usable byproduct (which may be the
case in certain SaaS scenarios), I wouldn't give a print stylesheet more than
15 minutes of my time.

------
k1m
We have a little tool that can produce a multi-column print view (based on
paper size and orientation) from most web-based articles. Chrome doesn't
support multi-column CSS in its print view yet, so it doesn't work there. If
anyone's curious, there's a video here:
[http://blog.fivefilters.org/post/75603097111/pdf-
newspaper-2...](http://blog.fivefilters.org/post/75603097111/pdf-
newspaper-2-5)

~~~
frik
Chrome had support for multi-column CSS for several months (2 years or so).
But Google forked off Webkit (Blink) and removed advanced CSS code known as
CSS Region that has been contributed by Adobe to the Webkit project.

It's quit sad that Google favors broken CSS support in Chrome v32+ with their
new "mobile 2014" strategy.

As a direct reaction too Google action, Apple remove ShadowDOM from Webkit.

------
cyberpanther
Even if we all agreed to make sites printable you would never be happy with
it. Right now certain CSS rules such as "float" can not be applied to print.
This means you can not do any advanced layouts without totally redoing your
HTML.

It is far more important to have a site mobile compatible than print
compatible which again will probably cause some HTML refactoring. So more
websites are going to worry about being mobile compatible and not waste their
time on print.

The percentage of people who print a site is so negotiable, that like
mcmillion said you would be better served supporting IE6. This combined with
the fact that print versions can not match the screen version means you'll
probably never see a site embrace your rallying cry.

Your best bet is to stop killing trees and get a Kindle Paper White or other
e-reader with a web browser.

~~~
alok-g
I would love to see an E-ink-based product:

\- That makes annotating and highlighting nearly as easy as with pen and paper

\- Which also is not too expensive (Kindle DX pricing is fine, newly announced
Sony's e-reader at $1000+ is not), and,

\- Which supports easy transfer of content/URL to the device from within the
firewall. (E.g. Virtual print driver that sends to the device and opens it
there.)

Will be very happy to hear if there is a solution that I am not currently
aware of!

------
alexmuller
I couldn't disagree more with the author about appended URLs being a problem.
A print stylesheet is _exactly_ when you want URLs to be displayed in the text
of the page, because there's no other way to find out where that underlined
text is supposed to be pointing.

~~~
TimFogarty
URLs should be displayed for sure, but inline is far too disruptive to smooth
reading. I think it would be better done "reference style" if possible.
Something similar to how it is done in markdown would be nice:

I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].

[1]: [http://google.com/](http://google.com/) "Google"

[2]: [http://search.yahoo.com/](http://search.yahoo.com/) "Yahoo Search"

[3]: [http://search.msn.com/](http://search.msn.com/) "MSN Search"

~~~
russellsprouts
CSS3 has support for footnotes in the page module.

[http://www.w3.org/TR/2011/WD-
css3-gcpm-20111129/#footnotes](http://www.w3.org/TR/2011/WD-
css3-gcpm-20111129/#footnotes)

It adds a float: footnote; property. From reading that page, I believe this
might work, once browser support catches up.

    
    
        a::after {
            float: footnote;
            content: attr(href) ' "' attr(title) '"';
        }
    

There are some other interesting additions:

    
    
        title { 
            display: none;
            string-set: title content();
        }
        
        @page { @top-left { content: string(title) }}
    

This will put the page title in the top left corner of the page margins.

------
tealtan
fwiw, we launched a new design for the NYT in Jan with a proper print.css
stylesheet.

------
theandrewbailey
I don't find this post that useful. It goes through some sites, criticizing
what they do wrong (what the hell does "anti-print" mean?), but offers no
explicit examples of sites that get it all (or all-1) right. Kottke.org has
colored links and sidebar (on a print out? those are useless). I'm not a
designer, but I still like to create nice looking things. No points are given
on what makes a nice printout, even though some of the examples given look
completely fine to me.

------
justincormack
There is a CSS/HTML rendering engine for print, PrinceXML
[http://www.princexml.com/](http://www.princexml.com/) \- it is extremely good
quality. It is not open source, but does fill a niche gap. If you need to
produce quality pdf output from a single source it could be worth looking at.

(its also interesting in that it is written in a functional logic programming
language..., and that it is a small Australian startup)

~~~
thangalin
ConTeXt also provides an XML interface. Unlike PrinceXML, ConTeXt is open
source. The community is quite friendly. I've been using it for a couple of
years now to produce PDFs from a single source. In my case, I first transform
the XML into ConTeX code using XSLT, a step that simpler systems might not
require.

[http://wiki.contextgarden.net/XML](http://wiki.contextgarden.net/XML)

~~~
zokier
Based on quick look, ConTeXt requires you to handle an unholy mixture of XML,
XSLT _and_ TeX (and maybe even Lua?), whereas PrinceXML last I checked was
just (x)HTML+CSS.

------
kylelibra
I've used WeasyPrint combined with custom templates in some web apps to get
the job done. Worth looking into if this is a key part of what you are
building.

~~~
saurabh
Have you figured out how to have headers and footers with HTML in it? I am
currently trying to figure out a solution to this.

------
baoyu
The point about “text is too big” is really, really strange—using 12pt in
print is okay, but you should never use it for a screen—everyone's reading
from the screen from a much bigger distance, and resolutions are getting
higher and higher.

~~~
alok-g
I frequently see texts in prints though, especially headings, that start
overlapping with other things around. This seems way more common than what I
would like. Once in a while, believe it or not, all the characters print on
the top of each other for headings. All this is such a mess.

------
rrrx3
print.css = "Hi, I need you to continue to support this increasingly smaller
edge case, to make this rapidly dwindling user base happy about something that
should not, under any circumstances, be happening in 2014."

Supporting the printing of pages is inefficient and wasteful. It's the IE6
argument all over again. There are more meaningful ways of both storing and
distributing information digitally.

Even for atacrawl's scenario - we should be building systems that make these
types of documents easier to fill out digitally than on paper. I don't know
about you guys, but when I have to fill out a paper form, I get frustrated
because of the near-universal poor design.

Printing should be dead. Why are we keeping it on life support?

~~~
rrrx3
Also, I say this as a designer.

This article criticizes a derivative work's typography? We're really looking
at a site's print.css and kicking up a fuss because it's not up to snuff?

"Here, let me print out this Daring Fireball article and mail it to my buddy
in New Mexico" ?

Get the actual fuck out of here.

------
dstalli
I do not understand the need to print out any webpage. The occasional form for
a bank still requires faxing but that is usually a pdf anyways.

Also, what about the environmental cost? If we make it easier to print, will
more people print? Whether we make it easier to print or not I suspect that as
children are exposed to technology at a very young age there will be less of a
need/want to print. When you have a tablet that you can take with you
anywhere, what's the point?

~~~
a_c_s
If something is hard to print in a legible/useful manner, somebody is likely
to print it once, realize things didn't turn out right, and then try to print
it a few more times with different settings until they get something that
works (or they give up).

So making things easier to print probably helps the environment more than
hurts it.

