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>