Style Guide

This guide provides information about CSS classes used for styling SEP entries.

Sentence Tags

Many entries include sentences that need tags or labels for reference in the text. For instance, see the entry on Questions and the entry on Mereology.

These are styled with a ul class="sentag". Secondary classes of the form "tag#em" and "subtag#em" control the width allocated for tag and subtag spacing. Inside each <li> should have two spans: one with class="tag" for the tag and one with class="sen" for the tagged material. For material which needs a subtag, the span with class="sen" should itself contain two spans: one with class="subtag" for the subtag and one with class="subsen" for the subtagged material.

Note: we prefer parentheses around the main tag and a period after subtags.

Example 1: list with no subtags

Here's an example of a list of tagged sentences with 3em space for the tag and no subtags.

  • (S1) This is the first tagged sentence.
  • (φ′) This is the next tagged sentence. If the tagged material is long enough it should wrap all material should be indented.
  • *) This is the last tagged sentence.
<ul class="sentag tag3em">
<li><span class="tag">(S<sub>1</sub>)</span>
    <span class="sen">This is the first tagged sentence.</span></li>
<li><span class="tag">(&phi;&prime;)</span>
    <span class="sen">This is the next tagged sentence....</span></li>
<li><span class="tag">(&xi;<sup>*</sup>)</span>
    <span class="sen">This is the last tagged sentence.</span></li>
</ul>

Example 2: list with some subtags

Here's an example of a list of tagged sentences, the first of which has subtagged sentences. It uses 3em space for the main tag and 1.5em space for the subtag.

Note: when formatting a sentence with a subtag but no main tag, the span with class="tag" is required but should be left empty and the "subtag" and "subsen" spans should be within the "sen" span.

  • (1′) This is a tagged sentence.
  • α. This sentence uses a subtag.
  • β. This sentence also uses a subtag.
  • (2φ) This is another tagged sentence.
<ul class="sentag tag3em subtag15em">
<li><span class="tag">(1&prime;)</span>
    <span class="sen">This is a tagged sentence.</span></li>
<li><span class="tag"></span>
    <span class="sen">
      <span class="subtag">&alpha;.</span>
      <span class="subsen">This sentence uses a subtag.</span>
    </span></li>
<li><span class="tag"></span>
    <span class="sen">
      <span class="subtag">&beta;.</span>
      <span class="subsen">This sentence also uses a subtag.</span>
    </span></li>
</ul>
<li><span class="tag">(2<sub>&phi;</sub>)</span>
    <span class="sen">This is another tagged sentence.</span></li>

Example 3: list with all subtags

Here is an example where every item in the list requires a subtag. We again use 3em space for the main tag and 1.5em space for subtags.

  • (45) a. This sentence uses both a main tag and a subtag.
  • b. This sentence uses only a subtag.
  • (46) a. This is another sentence that uses both a main tag and a subtag.
  • b. This sentence uses only a subtag.
<ul class="sentag tag3em subtag15em">
<li><span class="tag">(45)</span>
    <span class="sen">
      <span class="subtag">a.</span>
      <span class="subsen">This sentence uses both a main tag and a
      subtag.</span>
    </span></li>
<li><span class="tag"></span>
    <span class="sen">
      <span class="subtag">b.</span>
      <span class="subsen">This sentence uses only a subtag.</span>
    </span></li>
<li><span class="tag">(46)</span>
    <span class="sen">
      <span class="subtag">a.</span>
      <span class="subsen">This is another sentence that uses both a
      main tag and a subtag.</span>
    </span></li>
<li><span class="tag"></span>
    <span class="sen">
      <span class="subtag">b.</span>
      <span class="subsen">This sentence uses only a subtag.</span>
    </span></li>
</ul>

Tables

The main table classes determine which borders or rules are present:

<table class="all-rules">  
…
</table>
1 2 3 4
10 20 30 40
100 200 300 400
1000 2000 3000 4000
<table class="inner-rules">  
…
</table>
1 2 3 4
10 20 30 40
100 200 300 400
1000 2000 3000 4000
<table class="two-rules">  
…
</table>
1 2 3 4
10 20 30 40
100 200 300 400
1000 2000 3000 4000
<table class="frame">  
…
</table>
1 2 3 4
10 20 30 40
100 200 300 400
1000 2000 3000 4000
<table>  
…
</table>
1 2 3 4
10 20 30 40
100 200 300 400
1000 2000 3000 4000

Aside from deciding on what borders or rules are needed for the table, there are a few other options for the table class.

  • (1) Cell Padding
  • "cellpad-small" and "cellpad-med" provide a small (0.3em) or medium (0.5em) amount of cell padding to every cell
  • "cellpad-small-dense" and "cellpad-med-dense" are similar except that the padding is only left/right and not top/bottom
  • (2) Cell Alignment
  • "cell-center" centers the contents of each cell
  • "cell-left" left-aligns the contents of each cell
  • "cell-right" right-aligns the contents of each cell
  • (3) Table Alignment
  • "centered" centers the entire table on the page
  • "indent" indents the entire table 1em from the left
  • (4) Vertical Alignment
  • "vert-top" sets the vertical alignment to top
  • (5) PDF page breaks
  • "avoid-break" prevents PDFs from breaking the table over a page

Example: table with full styling

Here's an example of an inner-rules table with medium, dense cell padding, center-alignment within each cell with the whole table centered. That is, we set up the table as follows:

<table class="inner-rules cellpad-med-dense cell-center centered">  
…
</table>

And the resulting table is:

1 2 3 4
10 20 30 40
100 200 300 400
1000 2000 3000 4000

Epigraphs

Some entries include quotations at the very beginning or at the top of sections or subsections. Here's an example of how these should be formatted.

Example epigraph

Here's an example of the formatting code for an epigraph.

<blockquote class="bigindent">
 This is the text of the quotation. The quoted text is significantly
 indented and is followed by a right-aligned attribution line.

 <span class="blockright">&mdash;Attribution (Source Year)</span>
</blockquote>

The example is rendered as follows:

This is the text of the quotation. The quoted text is significantly indented and is followed by a right-aligned attribution line. —Attribution (Source Year)