Special Effects: Overlays
(There are no images in what you see just above. See the style sheet gallery on the Microsoft web site for many more examples.)
Some additional issues for effects that involve overlaying one text block on another:
- Note that the overlay effect depends on using negative margin settings for second (top-most) layer. In principle, you could work from the margins and point sizes to calculate the values mathematically, but in practice I find it quicker to do it by trial and error.
- Overlay effects can be easily wrecked by changes in the resolution for the user's display, which will cause lines to break differently. If you are going to use overlays, I recommend one of the following safeguards against this:
make sure you work with text blocks short enough that they shouldn't break at any resolution or reasonable window size
put the overlay element into a table with a fixed width, to prevent line-breaking; I generally advise against using fixed-width tables, though, unless you limit the width to about 470 pixels, some users are likely to have to scroll horizontally to see the whole width of the page, which is undesirable. And if you do use such a narrow width, users with high-resolution displays will be looking at a lot of dead space on the page.
- Inheritance can cause problems with overlays. For instance, it would seem logical to use a basic element and a class of the same element (or two classes of the same element) to define the two layers. This will not work if the element has a defined background, however, because a class specification can override but not undo a background specification in the primary element specification. Therefore, the background of the top-most layer will conceal the lower layer.