code's life

I have one document white in markdown format, and when it is converted into HTML, it is quite long (>20 pages), I need to print it out to read it . (I am not used to read e-paper before I got iPad).

Then I meet several problems

Width of some pictures is too long

It is so wide (>1024px), after print it out, it make the normal paragraph narrow, it looks urgy.

Surely I can using my favorite gimp to change the size, but it means I need to change a lot of files, I can also set the <img “width=640px”> like to push to this size, but I also have pictures in small size, I don’t want them to grow as well.

Can we handle this in CSS, my CSS expert JiHao say yes, after google, the correct way is using “max-width”, simple but it works.

img { float: none; max-width:640px; display:block;}

Show difference in printer and web

There is a media tag in css, and screen is for browser, projection is for projector and print is for printer, and there are other media, it more depends on browser.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">

How to make page break

In M$ Word, there is page break, and it is similar one (page-break-before in CSS, but when I try it, it seems available for IE only

<style type="text/css" media="print">

        p img { float: none; max-width:640px; display:block;}

        h1 { page-break-before: always; }

</style>

Then it in printed out document, it is well formatted.

One thing left, how to make sure the image is not acrossed into two pages ?

Nowadays, most of webpages are powered by CSS, you seldom see “<table><tr>” those HTML tags, instead, use “div” and control the display in CSS. I don’t want to repeat CSS basic, instead give some small tips on this area.

For the image in CSS, besides normal set like

   1:     background:url("../images/ebottomgrad.jpg") repeat-x scroll 0 0 transparent;

Typically there are lots of small pictures are installed under “images” directory, it also decrease the performance.

“sprites” method is used to solve this problem, let’s see example:

This is a menu image used for gitorious, it contains all item including different color (usage) for them, then in CSS, you can get them like below.

   1: #top #menu li a {

   2:     background: url(../img/external/menu.png) no-repeat;

   3: }

   4:  

   5: #top #menu li.home a { 

   6:     background-position: 0px -22px; width: 40px; 

   7: } 

   8: #top #menu li.home.active a { 

   9:     background-position: 0px -11px; 

  10: } 

  11: #top #menu li.home a:hover { 

  12:     background-position: 0px 2px; 

  13: }

quite simple and powerful, isn’t it ?

It is also good for UI designer to draw those kind of pictures in one place.

Reference (just google)

- http://www.svidgen.com/sprites

- http://www.alistapart.com/articles/sprites2

And remember this technology exists for long time (>5 years), but still some designers don’t notice this