Caffeinated Coding: Community: Home

Remove both filters (2)

Tag
CSS (7)

Tag
examples (4)

Printer-friendly websites with CSS

By Nathan McClenahan on February 25, 2009

Recently I did a little study to investigate options for a solid printing foundation from a website. I did a lot of research and had fun investigating the w3c's css standard for alternate media types. Although I came to the conclusion that for rock solid printing, there is no alternative to PDF, I learned that there is considerable browser support for print media. With that said. the most valuable concept I gathered from my research was that it is quite easy using css to make an entire site much more printer-friendly.
Let me give my definition of printer-friendly. The ultimate would be complete control of the margins on the page and placement of all objects on the page and meaningful page breaks. Because of different browser implementations of the print media standard, this is a complete pipe dream. With that said, I consider printer-friendly to be a way to print the main content of a web page without cluttering up the printed page with web navigation or cute stuff.
Ok, enough yacking...

There are several ways to accomplish a different css application to page elements based on the media type. One can actually make 2 distinct .css files, one for web and one for print. Then in the page head create the link to each one. Another method is to include a block of css in the existing css file and enclose it in a @media print{} style rule. Either way, browsers are smart enough to use the correct css for the media it is trying to present. I found the best way to test this is by using the print preview option available in most modern browsers.

Here is an example. For a simple page with a menu block on the left and a content area on the right, we might have an html block that looks like this...

<div class=page>
    <div class = menu> Menuy things </div>
    <div class = content> Content Stuff </div>
</div>

A typical css file might set the layout for the menu to be on the left and the content in the middle using a style like this...

.page {width:500px; }
.menu {width:200px; float:left; }
.content { width:300px; }

But by adding another set of styles we can hide the menu for print media like this...

@media print
{
.page {width:7in; }
.menu {display:none; }
.content { width:7in; }
}

This style will only be applied for printing. The main differences are that the menu class has display:none; which hides that block and I use inches as units rather than pixels. I like to specify the width to avoid things that extend off the right hand of the printed page. Again, double check by using the print preview feature in your browser.

Try it out yourself with this code.

Enjoy

Tags: CSS • examples

Sample Project: To Do List

By Nathan McClenahan on March 26, 2008

Here is a sample project that can be used as an example for the TECHS class.

http://www.caffeinatedcoding.org/examples/todo/todo.htm

When you enter text into the textbox and once you hit enter(firefox only) or tab, then the page starts a list with the text that was entered into the textbox. If you don't like the item in the list, click on the text and it is removed.

This is kindof a dumb thing, but it demonstrates how html, CSS, and Javascript can work together.
Below is the code...

For fun put it into a page on your computer and play with it. Who cares if you screw it up, you can always come back here and get it again.

          if (blnAlternate == true)
         {
                   lstItem.innerHTML= "<span class='listitem-alt' onclick=RemoveItem('" + txtItem.value + "')>" + txtItem.value + "</span>" ;
                         blnAlternate = false;
                        }
     else
         {
           lstItem.innerHTML= "<span class='listitem' onclick=RemoveItem('" + txtItem.value + "')>" + txtItem.value + "</span>" ;
                         blnAlternate = true;
                         };

           lstToDo.appendChild(lstItem);
            txtItem.value='';
           focus=txtAddItem;

       };

   };


  function RemoveItem(strItem)
  {
      var lstToDo = document.getElementById("lstToDo");
      for (index=0;index<= lstToDo.childNodes.length;index+=1)
      {
      var lstItem = document.createElement("li");
      lstItem = lstToDo.childNodes[index];

      if (lstItem.innerHTML.indexOf(strItem) > 0)
          {
              lstToDo.removeChild(lstItem);
          };
      };
  }
  //-->
    </script>

    <div id="divAddBox" class="inputbox">
    Build your own todo list<br />
    Enter items in the box below and they will appear in the todo list.
        <input type="text" id="txtAddItem" onchange="AddItem()" />
    </div>
    <div id="divList" class="listbox">
        <ol id="lstToDo" class="list"></ol>
    </div>
</body>
</html>

Tags: CSS • examples • HTML • Javascript • TECHS