Paul's Pretty Powerful Proxomitron Programming Page

Many Proxomitron filters replace advertising with a bit of text to show that something was killed. A banner ad might appear as [link - ad.doubleclick], for example. Normally this is ok, but sometimes it adds too much clutter. There is a simple way to uniformly change the presentation of the replacement text on the fly without having to edit a dozen different filters. If your browser supports user Cascading Style Sheets Level 2 (CSS2), as Opera 4+, Internet Explorer 5+, Netscape 6, and Mozilla do to varying extents, you can use this method. I'll assume you have some familiarity with CSS, but if you don't I'd highly recommend learning a little about it as it's a very elegant and powerful language. Over time I have retired many of my Proxomitron filters as I discovered shorter and simpler CSS equivalents.

Combining Proxomitron with CSS

If you've read over my filters page you may have noticed that my ad killing filters replace banners and such with some HTML like

<span class=prox kill=link detail=ad.doubleclick></span>

An empty span element? What good is that? Well, with a bit of CSS code you can control how this is displayed.

.prox
{
  font-size: xx-small !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-family: "Times New Roman" !important;
}

.prox:before
{
  display: inline !important;
  content: "[" attr(kill) " - " attr(detail) "]" !important;
  text-transform: lowercase !important;
}

The content: line is the main thing here. It tells the browser to construct the text by concatenating [ with the attribute kill plus a - followed by the detail attribute and finally a closing ]. Thus the above example will appear as [link - ad.doubleclick] in a small Times New Roman font.

But suppose you'd rather not see the site name. Well that's easy, just replace the content: line with

  content: "[" attr(kill) "]" !important;

and you'll see just [link] instead.

Presumably, you don't want to see any replacement text if you decide to print the page. So add this

@media print, projection
{
  /* Hide Proxomitron's kills altogether when printing */
  .prox
  {
    display: none !important;
  }
}

Now when you print the document or view it in Opera's fullscreen mode (F11), all these annotations will disappear.

Full styling example

My full CSS file for styling Proxomitron replacements in Opera 6 is below. Some of the fancier CSS2 properties do not work in Internet Explorer, not even in version 6.

/* Style the Proxomitron Javascript toolbar */
.proxtoolbar
{
  background-color: green !important;
  color: white !important;
  border: thin solid white !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 2em !important;
}

/* Generate replacement content for Proxomitron's kills */
.prox
{
  font-size: xx-small !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-family: "Times New Roman" serif !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 9em !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-transform: lowercase !important;
}

.prox:before
{
  content: "[" attr(kill) " - " attr(detail) !important;
/*  content: "[" attr(kill) !important; */
}

.prox:after
{
  content: "]" !important;
}

@media print, projection
{
  /* Hide Proxomitron's kills altogether when printing */
  .prox
  {
    display: none !important;
  }
}

@media print
{
  .proxlink, .proxtoolbar
  {
    display: none !important;
  }
}

Proxomitron and CSS

Combining Proxomitron with CSS

Full styling example