Curiosity is bliss    Archive    Feed    About    Search

Julien Couvreur's programming blog and more

Unsolved HTML/CSS layout challenge

 

Here is a layout that I have been struggling with but still haven't found a good HTML/CSS implementation for.

Basically I want to make a block of text look like old print paper, with alternate color lines. That is, every odd line should have a green background and every even line should have a white background.

What makes this tricky is that this layout should be resistant to font scaling and window resizing (ie. text wrapping).

Green bar computer printout paper example:

So far the evaluated solutions:
- have a background image with color strips and use a fixed line height.
This resists to window resizing but isn't great for font resizing (if fonts become big lines will overlap each other). This is the best solution so far.

- have a table with colored cells placed beneath the text, using layers.
This resists to font scaling if each cell of the "color-table" hold a   character, but it doesn't resist window resizing because you don't know how many rows this table should hold, since it depends on the wrapping of the text.

Update: Related but no cigar, a javascript trick to alternate background colors for every other row in a table.

______________________________________

As a riff on your best solution above, you can write a simple CGI script to generate a background image based on a parameter value, which you can tie (via alternate style sheets in CSS, or javascript, or whatever else) to the font-size and line-height.

Loosely:


<Style>
<!--

.printpaper {
font-size: 14px;
line-height: 20px;
background: url(http://yourdomain.com/yourscript.cgi?line=20px) repeat;
}

-->
</Style>

Posted by: PRinc at April 26, 2005 04:00 PM
comments powered by Disqus