■ 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; }

2. 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

    .