■ INTRODUCTION
xx
CSS
.hanging-indent { padding-left:+VALUE; text-indent:-VALUE; margin-top:±VALUE; }
.hanging-dropcap { position:relative; top:±VALUE; left:-VALUE; font-size:+SIZE;
line-height:+SIZE; }
- Listing 2. Floating Drop Cap Example
HTML
<p class="hanging-indent">
<span class="hanging-dropcap" >H</span>anging Dropcap.
</p>
CSS
.hanging-indent { padding-left:50px ; text-indent:-50px; margin-top:-25px; }
.hanging-dropcap { position:relative; top:0.55em; left:-3px; font-size:60px;
line-height:60px; }
Conventions
Each design pattern uses the following conventions:
- Uppercase tokens should be replaced with actual values. (Notice how the uppercase
tokens in Listing 1 are replaced with values in Listing 2.) - Elements are uppercase when you should replace them with elements of your
choice. If an element name is lowercase, it should not be changed unless you
ensure the change produces the same box model. The following are typical
element placeholders:- ELEMENT represents any type of element.
- INLINE represents inline elements.
- INLINE_TEXT represents inline elements that contain text such as ,
, or.
- BLOCK represents block elements.
- TERMINAL_BLOCK represents terminal block elements.
- INLINE_BLOCK represents inline block elements.
- HEADING represents
,
,
,
,
, and
.
- PARENT represents any element that can be a valid parent of its children.
- CHILD represents any element that can be a valid child of its parent.
- LIST represents any list element including
- ,
- , and
- .
- LIST_ITEM represents any list item including
- ,
- , and
- .