If the containing
element abuts another element to its left, then the hanging text
overlaps the latter element, or if it??™s close to the edge of the browser
window, it is clipped (Figure 3.16).
FIGURE 3.16 This paragraph has a
negative text indent for the ?¬? rst line
but no corresponding left margin
value, which causes the hanging text
to be clipped.
In these examples, the paragraph
border is displayed in red for
clarity??”normally, it would not
be shown.
STYLIN??™ FONTS AND TEXT 87
The way to avoid this problem is always to specify a positive
left margin value greater than the speci?¬? ed negative indent. In
Figure 3.16, the negative indent is ??“1.5 ems, but in Figure 3.17,
there is also a left margin value of 2 ems.
FIGURE 3.17 This paragraph has
a negative text indent and a corresponding
left margin value that
creates enough space for the hanging
text in the ?¬? rst line.
The code for the paragraph in Figure 3.17 is as follows
p {text-indent:-1.5em; margin-left:2em; border:1px solid red;}
Hanging paragraphs can help give text that professionally styled look
and give the reader clear visual entry points into the text blocks.
It??™s good practice to set indents and related margins in ems so that
the indent remains proportional to the line length if the user (or
you) changes the text size. In the case of a hanging indent, proportional
sizing ensures that enough space for the hanging text is created,
regardless of how large the user might scale the font.
Pages:
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130