Text Overlays
Using the "margin" Style Sheet
properties, an author can specify negative margins. It is possible to specify negative
values such that a section of text can occupy and overlap another section of previously
rendered text. This "Text Overlay" capability can yield some very striking
results, such as shadowed text and composite character graphics. While the tantalizing
possibilities of this feature are very attractive, great care must be taken to ensure that
the desired appearance is generated for the widest possible audience. True
cross-platform pixel-level layout control is purposefully out of reach of HTML formatting
and basic Style Sheets functionality, so the the use of negative margins is a dicey
foundation on which to organize a visual layout. So, even though many of the visual
effects possible using this method are appealing, there are many reasons (see more below)
as to why this usage is discouraged.
Tips to keep in mind when creating Text Overlays
Negative margin values must be employed on HTML sections for them to overlap
on top of sections rendered previously in an HTML document. Content in an HTML
document is evaluated and rendered from beginning to end - using positive margin
values on the lower-level content will not create the desired overlay effect. Example of positive margins (BAD):
<divSTYLE="margin-top:
2cm; color: white">test</div>
<divSTYLE="margin-left:
0.1cm; color: black">test</div> Example of negative margins (GOOD):
<divSTYLE="color:
white">test</div>
<divSTYLE="margin-left:
0.1cm; margin-top: -2cm;
color: black">test</div>
HTML tag blocks are usually serially rendered, so if a region is to overlap
ON TOP OF another region, it will follow the layer rendered previously (the
lower layer) in the HTML document. The upper layer sections use negative margin
values relative to the previous lower layer sections.
Containing Overlays in an HTML Table[-->Index DOT Html] can improve consistent layout -
Tables[-->Index DOT Html] have the capability to control
total exact width of a region.
Use of absolute sizing units (like pixels, inches, centimeters, etc.) for the
'font-size' property allows easier addressing
of negative vertical margin values.
WARNING: Visual layout is often dependent on the
end-user's platform and resolution. An action as simple as re-sizing a browser window
can destroy the intended display effects.
WARNING: Browsers that do not understand Style Sheets
will display each section of an overlay serially and there will be no overlapping.
Consider an Overlay to create shadowed text - the duplicate shadow text will not
be overlapped at all and will instead be doubled. It may be very hard for a
reader to follow.