Blog 1

Random Talk on Random Thoughts

My CSS Settiings for Printing (1)

| Comments |


To set up a printer-friendly framework for blog posts/pages.


Two months ago, in order to install Clapper’s image popup plugin in this blog1, I studied the source code of his blog on GitHub. In this process, I learnt the roles of /sass\/(custom\/_)?(screen|print).scss/. (To be concise, I write a Perl regex.) Lacking time to learn CSS, I just directly copied Clapper’s CSS settings for printing.

Problems on the printed page

  1. Missing author and date
  2. Screenshots were too large and part of them flowed out of the page.


Display author and dates

Using [Firefox]’s “Inspect Element” and searching the generated HTML code for a post, I discovered that those missing parts belonged to <pre class="meta"> tags. In Clapper’s sass/custom/_print.scss, he didn’t display them. Before the removal of the section of CSS code that hid the author and date, I input “.meta” in the search box above the panel that showed the HTML code of the current document.


I don’t want the links for previous and next posts to appear in the printed version of a post in this blog, so I inspected the HTML code for those two links, and saw that only those two links belonged to an <a class="base-alignment ..."> tag. Therefore, I change p.meta to a.base-alignment in sass/custom/_print.scss.2

Scaling down the screenshots

After I wrote the HTML and CSS code of an HTML5 slide used for a presentation, I knew something about the max-width property in CSS.

Google searches:

Query string Rank Remarks
image max-width 1 Failed
resize image max width height 1,2 They’re about C#.
resize image max width ratio 1 I haven’t learnt jQuery.
max-width, max-height: aspect ratio not kept 1 The image was horizontally squeezed without changing the height.
keep aspect ratio 7 I knew what to do from the first two answers.

You may refer to commit 4be1bbf for details.

  1. Commit 94c7d97 

  2. sass/custom/_print.scss at commit 4be1bbf