August 31, 2004

Here's a pretty cool thing about CSS. You can use position: fixed; to add headers and footers (or whatever you want) to every printed page. At first it didn't make sense to me why it behaves like that, but with some reading and pondering, it made perfect sense. You see, fixed fixes the element to the viewport. In the screen medium, the viewport is what you see on your screen. It's where everything the user should read (or listen to) and/or interact with is. So when you use position: fixed; (optionally in conjunction with top, right, bottom and left) on an element, that element will stick to the viewport, at optionally specified offsets. Now, the print medium, unlike the screen medium, provides several viewports, one for each page. And so the element will stick to each viewport, at optionally specified offsets. Pretty neat, huh?

Another cool thing about CSS is display: run-in;. I haven't seen it used in practice yet, but I've seen people who have faked the effect. Its behavior is quite simple: If a block level element immediately follows the run-in element, the run-in element becomes the first inline element of that block. It's quite useful when you want, say, headings to run into the following paragraph; simply set display: run-in; on the heading(s).

<< | Previous entry (August 25, 2004) | Next entry (September 1, 2004) | >>
Back to Archive