Sample CSL Bibliography Formats


This is a sample document that illustrates the use of class attributes for the formatting of bibliographies output by a CSL engine. The CSS style file used to control the formatting below is linked here for your viewing pleasure.

Hovering the mouse cursor over the Show HTML button in each example will display the HTML structure that would be generated from the CSL layout(s) shown. Note that most of the details of the formatting are controlled by CSS; only small changes in the nesting of markup and the assignment of classes in the output are needed to give effect to the different bibliography formats.

Enjoy!
Frank Bennett
2009.08.07


Table of Contents

  1. Plain Vanilla Bibliography
  2. Bibliography with Aligned Number Labels
  3. Bibliography with Hanging Indent
  4. Annotated Bibliography
  5. Bibliography with Author Names as Headings

1. Plain Vanilla Bibliography

Sample CSL

Show HTML
  <div class="csl-entry">
      <b>John Aloysius Doe</b>,
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa 
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa 
      (1999).
  </div>
The csl-entry div tag is implicit.
<bibliography>
  <layout>
    <names variable="author" font-weight="bold" suffix=", ">
      <name/>
    </names>
    <text variable="title"/>
    <date variable="issued" prefix="( " suffix=").">
      <date-part name="year"/>
    </date>
  </layout>
</bibliography>

Bibliography output

John Aloysius Doe, Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa (1999).
John Aloysius Doe, Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb (2000).
Jane Henrietta Roe, Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc (1999a).
Jane Henrietta Roe, Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd (1999b).
Jane Henrietta Roe, Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee (2000).

2. Bibliography with Aligned Number Labels

Sample CSL

With second-field-align ...
Show HTML
  <div class="csl-entry">
    <div class="csl-left-label" >
      [1]
    </div>
    <div class="csl-item">
	  <b>John Aloysius Doe</b>,
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa 
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa
      (2000).
    </div>
  </div>
Aligned margin labels can be produced with classes or with second-field-align.
<bibliography>
  <layout>
    <option name="second-field-align" value="true"/>>
    <text variable="citation-number" prefix="[" suffix="]"/>
    <names variable="author" font-weight="bold" suffix=", ">
      <name/>
    </names>
    <text variable="title"/>
    <date variable="issued" prefix=" (" suffix=").">
      <date-part name="year"/>
    </date>
  </layout>
</bibliography>
... or with classes ...
Show HTML
  <div class="csl-entry">
    <div class="csl-left-label" >
      [1]
    </div>
    <div class="csl-item">
	  <b>John Aloysius Doe</b>,
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa 
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa
      (2000).
    </div>
  </div>
Aligned margin labels can be produced with classes or with second-field-align.
<bibliography>
  <layout>
    <group class="csl-left-label">
      <text variable="citation-number" prefix="[" suffix="]"/>
    </group>
    <group class="csl-item">
      <names variable="author" font-weight="bold" suffix=", ">
        <name/>
      </names>
      <text variable="title"/>
      <date variable="issued" prefix=" (" suffix=").">
        <date-part name="year"/>
      </date>
    </group>
  </layout>
</bibliography>

Bibliography output

[1]
John Aloysius Doe, Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa (1999).
[2]
John Aloysius Doe, Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb (2000).
[3]
Jane Henrietta Roe, Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc (1999a).
[4]
Jane Henrietta Roe, Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd (1999b).
[5]
Jane Henrietta Roe, Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee (2000).

3. Bibliography with Hanging Indent

Sample CSL

Show HTML
  <div class="csl-entry">
      <b>John Aloysius Doe</b>,
        Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb 
        Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb
      (2000).
  </div>
Hanging indents can be styled entirely in CSS, without special markup.
<bibliography>
  <layout>
    <option name="hanging-indent" value="true"/>
    <names variable="author" font-weight="bold" suffix=", ">
      <name/>
    </names>
    <text variable="title"/>
    <date variable="issued" prefix=" (" suffix=").">
      <date-part name="year"/>
    </date>
  </layout>
</bibliography>

3. Bibliography output

John Aloysius Doe, Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa (1999).
John Aloysius Doe, Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb (2000).
Jane Henrietta Roe, Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc (1999a).
Jane Henrietta Roe, Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd (1999b).
Jane Henrietta Roe, Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee (2000).

4. Annotated Bibliography

Sample CSL

Show HTML
  <div class="csl-entry">
      <b>John Aloysius Doe</b>,
        Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb 
        Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb Abbbb
      (2000).
    <div class="csl-indented-block">
        My Aunt Sally.  My Aunt Sally.  My Aunt Sally.  My Aunt Sally.  My Aunt Sally.  
        My Aunt Sally.  My Aunt Sally.  My Aunt Sally.  My Aunt Sally.  My Aunt Sally.  
    </div>
  </div>
A block indent is a display block with special characteristics.
<bibliography>
  <layout>
    <names variable="author" font-weight="bold" suffix=", ">
      <name/>
    </names>
    <text variable="title"/>
    <date variable="issued" prefix=" (" suffix=").">
      <date-part name="year"/>
    </date>
    <group class="csl-indented-block">
      <text variable="abstract">
    </group>
  </layout>
</bibliography>

Bibliography output

John Aloysius Doe, Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa (1999).
My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally.
John Aloysius Doe, Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb (2000).
My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally.
Jane Henrietta Roe, Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc (1999a).
My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally.
Jane Henrietta Roe, Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd, 1999b
My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally.
Jane Henrietta Roe, Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee (2000).
My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally. My Aunt Sally.

5. Bibliography with Author Names as Headings

Sample CSL

Show HTML
  <div class="csl-entry">
  <a class="thumbnail" href="#thumb">
    <div class="csl-entry-heading" >
      John Aloysius Doe
    </div>
    <div class="csl-left-label" >
      1999
    </div>
    <div class="csl-item">
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa 
        Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa 
    </div>
  </div>
This layout requires separate style wrappers for each of its three elements, so that repeated author names can be safely dropped from subsequent entries.
<bibliography>
  <layout>
    <group class="csl-entry-heading">
      <names variable="author" font-weight="bold">
        <name/>
      </names>
    </group>
    <group class="csl-left-label">
      <date variable="issued">
        <date-part name="year" font-weight="bold"/>
      </date>
    </group>
    <group class="csl-item">
      <text variable="title"/>
    </group>
  </layout>
</bibliography>

Bibliography output

John Aloysius Doe
1999
Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa Aaaaa
2000
Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb Bbbbb
Jane Henrietta Roe
1999a
Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc Ccccc
1999b
Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd Ddddd
2000
Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee Eeeee