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.
background: url(http://yourdomain.com/yourscript.cgi?line=20px) repeat;