March 25, 2015 at 21:06We print stories from Medium
- Transfer
I want to thank Maria for her help in preparing the illustrations.
- Craig Mod, Let's talk about margins
It must be a print of articles from Medium - a commonplace, but we want to make this process beautiful. Perhaps this is a tribute to the century of printing on paper and partly nostalgia (yes, some of us once created layouts for printing Medium pages, but so much time has passed ...). In the end, page printing refers to responsive design. There are thousands of practical ways to use it, starting from printing for memory and hanging in a frame and ending with sending it to a friend and making the last changes before publication. Writers must often do this.
But the most important reason is this: we respect the work of our writers.
We wanted to design the most beautiful print output that browsers can support. Below we have listed some of the differences between screen and printed Medium using the example of a fake article (nevertheless, you can open it ).
There is no visible user interface. We removed the interface elements, since on paper they are useless. Our style sheets are set up so that any UI innovations will not be visible on the sheet.
Additional top margins. We were generous with the size of the header of the first page. It can come in handy for notes and other handwriting.
Font size. We changed the size from 22px to 15px (and all other sizes were changed proportionally), since it is the easiest to read on paper.
Page Width With a main column width of 4.95 ", the line fits 50-70 words, as on the screen. The empty space on the sides of the sheet also allows you to relax your fingers and arrange more conveniently.
All this was done for standard paper sizes in portrait and landscape orientations, and we did not develop any exceptions for exotic species. Note that the maximum width was changed, but not the actual page width , so printing on pages already 4.95 "will still work without cropping.
Each image on a separate page. If suddenly the image does not fit on the page, then it will be moved to the next.
Underscores. All underscores thatwe carefully place it inside the text on the screen , have been removed from print - do not overload the eyes with these decorations.
Text color. The color on the Medium screen is not 100% black , as its contrast is slightly lower, which makes it stand out better. However, we print pure black text on the print, since not all printers are capable of dealing with dithering .
Background images. For printing, we leave a blank space instead of background images. You can’t leave them, because browsers interpret CSS of such images in different ways, and you shouldn’t waste toner (we are already silent about readability).
Hanging lines / windows.Someone thinks that we could fit these two lines on the previous page, but we do not think so. Each time, our system makes sure that these lines do not become “hanging” , covering the end or the beginning of the sheet.
Footer. At the bottom of the screen, only the most interesting remains - buttons for sending articles to social networks. Obviously, on paper you will not share the article with anyone (unless you give the printouts to another person), so we’ll remove this from the print layout.
(We were very sad to see such a huge waste of paper ... But it was necessary for debug. Fortunately, we did it once.)
I want to thank you for reading the article and answer a couple of questions.
On the other hand, cheap, rough paper with a beautifully set textblock hanging just so on the page makes those in the know, smile (and those who don't, feel welcome). It says: We may not have had the money to print on better paper, but man, we give a shit. Giving a shit does not require capital, simply attention and humility and diligence. Giving a shit is the best feeling you can imbue craft with. Giving a shit in book design manifests in many ways, but it manifests perhaps most in the margins.
- Craig Mod, Let's talk about margins
It must be a print of articles from Medium - a commonplace, but we want to make this process beautiful. Perhaps this is a tribute to the century of printing on paper and partly nostalgia (yes, some of us once created layouts for printing Medium pages, but so much time has passed ...). In the end, page printing refers to responsive design. There are thousands of practical ways to use it, starting from printing for memory and hanging in a frame and ending with sending it to a friend and making the last changes before publication. Writers must often do this.
But the most important reason is this: we respect the work of our writers.
We wanted to design the most beautiful print output that browsers can support. Below we have listed some of the differences between screen and printed Medium using the example of a fake article (nevertheless, you can open it ).
There is no visible user interface. We removed the interface elements, since on paper they are useless. Our style sheets are set up so that any UI innovations will not be visible on the sheet.
Additional top margins. We were generous with the size of the header of the first page. It can come in handy for notes and other handwriting.
Font size. We changed the size from 22px to 15px (and all other sizes were changed proportionally), since it is the easiest to read on paper.
Page Width With a main column width of 4.95 ", the line fits 50-70 words, as on the screen. The empty space on the sides of the sheet also allows you to relax your fingers and arrange more conveniently.
All this was done for standard paper sizes in portrait and landscape orientations, and we did not develop any exceptions for exotic species. Note that the maximum width was changed, but not the actual page width , so printing on pages already 4.95 "will still work without cropping.
Each image on a separate page. If suddenly the image does not fit on the page, then it will be moved to the next.
Underscores. All underscores thatwe carefully place it inside the text on the screen , have been removed from print - do not overload the eyes with these decorations.
Text color. The color on the Medium screen is not 100% black , as its contrast is slightly lower, which makes it stand out better. However, we print pure black text on the print, since not all printers are capable of dealing with dithering .
Background images. For printing, we leave a blank space instead of background images. You can’t leave them, because browsers interpret CSS of such images in different ways, and you shouldn’t waste toner (we are already silent about readability).
Hanging lines / windows.Someone thinks that we could fit these two lines on the previous page, but we do not think so. Each time, our system makes sure that these lines do not become “hanging” , covering the end or the beginning of the sheet.
Footer. At the bottom of the screen, only the most interesting remains - buttons for sending articles to social networks. Obviously, on paper you will not share the article with anyone (unless you give the printouts to another person), so we’ll remove this from the print layout.
(We were very sad to see such a huge waste of paper ... But it was necessary for debug. Fortunately, we did it once.)
I want to thank you for reading the article and answer a couple of questions.
Only registered users can participate in the survey. Please come in.
Do you use the print function on your projects?
- 28.4% Yes 25
- 71.5% No 63
If so, are you going to reformat the print after reading the article?
- 12.2% Yes 7
- 38.5% No 22
- 49.1% Still not sure, but I would like to adhere to this style 28