I write like

Dietmar Dath

Note

Note: to see the sections on design in order, go to the category Talking about Design.

Flickr Stats

Testing mp3

An mp3 file.

Reference: style classes for this weblog

HTML

For comments, use the comment snippet (keyboard equivalent control-command-K).

Character-level

Character-level classes are used with the "span" tag.

• addendum
• smc (smallcaps)
• footnotesym (for footnote references; but see below under “References”)
• isbnean (for ISBNs, EANs, code, etc.)
• mathsup and mathsub
• shd (shadowed text: not all current browsers recognize this)

Marsedit: Use the snippets addendum, footnotesym, isbnean, and smallcaps.

Body text

Use norm for ordinary body text paragraphs. For headings within an entry, use entryheading1 and entryheading2.

Marsedit: Use the snippets norm and entryheading1 (change ‘1’ to ‘2’ for entryheading2.

Indented text

For indented text, use indented, indentedtan, and indentedcode. The last is for code and similar sorts of text. The class hangindent yields a hanging indent. Example (hangindent inside inset):

Inter hos tu, mi More, uel in primis occurrebas; cuius equidem absentis absens memoria non aliter frui solebam quam presentis presens consuetudine consueueram; qua dispeream si quid unquam in uita contigit mellitius. Ergo quoniam omnino aliquid agendum duxi, et id tempus ad seriam commentationem parum uidebatur accommodatum, uisum est Moriae Encomium ludere.

Marsedit: Use the code snippets indented, etc.

Notes and so forth

Notes within the body text can use internote or zusatz.

This is an internote.

Bibliography

bibauth. bibtitle. The class bib is used for bibliographical items, bibauth for authors’ last names, bibtitle for titles.
bibauth. “Article title.” bibjtitle 99 (1889) 1–28. The class bibjtitle is used for journal titles, bibvol, bibdate, bibpages for volume, date, pages.

Marsedit: Use the code snippets bibform and bibformj to create bibliographical entries. The snippet bibftn is for bibliographical items in footnotes.

References

The footnote class is for footnotes. If you want a dividing line between the notes and the bodytext, use updatedivider.

MarsEdit: use ref down or footnotesym to create the reference, and ref up or (preferably) footnote for the note.

ref down creates a string of code that looks like this:

(<a name="ref"></a><a href="#note">↓</a>)

Insert a random number after ‘ref’ and the same number after ‘#note’. Then move to the point in your entry where the footnote will go. Insert the footnote snippet. It looks like this:

<div class="footnote">(<a name="note"></a><a href="#ref">↑</a>)</div><!--note-->

Insert the same random number after “note” and after ‘#ref’. The links will allow a reader to jump to the footnote and then back to the appropriate place in the body text.

Once you have uploaded the weblog entry to the weblog, and if the entry is extended, copy the URL of the entry (from its “individual” page) and paste the URL in front of every occurence of ‘#note’ and ‘#ref’ in the entry. That will ensure that footnote references behave correctly on the main page of your weblog.

Quotations

Inset quotations use the inset class (the quotation in the sidebar has its own class, thequote; this has a different background image attached to it). If an inset does not include a byline, use insetnoby. For an inset quotation in a footnote, use insetftn.

A byline inside an inset quotation uses the bylineinset class. There is also a byline class for quotations that are not inset.

Example:

All uneasiness therefore being removed, a moderate portion of good servers at present to content Men; and some few degrees of Pleasure in a succesion of ordinary Enjoyments make up a happiness, wherein they can be satisfied.

Locke, Essay 2c21§44

Marsedit: Use the snippets inset and byline (adding ‘inset’ to the class name ‘byline’ for a byline inside an inset).

Images

O. R. Snodgrass

The usual setup for an image is to put it inside a div with the class imgbox. imgbox creates a floating box on the right-hand side of the column, with sufficient space between the image and the bodytext. The caption class is for captions.

A image can be floated on the left using imgboxleft.

If an image is too wide to be floated on the right, use imgboxcentered instead. For the caption, use caption and insert style="text-align: center" into the tag.

Marsedit: Use the snippets imgbox and caption.

Lists

Kinds of lists: arabnum for arabic numbering, romnum for roman, listfig for putting a small printer’s cut in front of each item; checklarge, checkmed do what you’d expect. romnuminside places the roman numeral in the paragraph (instead of at the margin). alphamaj and alphamin produce upper- and lower-case alphabetic markers. Examples (inside indented):

• arabic numbering
• roman numbering
• list with figure
• large checkmark
• medium checkmark
• small checkmark
• roman numeral inside
• alpha majuscule
• alpha minuscule

To make a list with hanging indents using ordinary divs, put style="margin-left: 2em; padding-bottom: .5em; text-indent: -2em;" into the div tag (you can, of course, use a distance other than 2em and omit the padding).

Marsedit: Use inset and list arab, etc. I haven’t made snippets for all the list tags.

Special purposes

This is a pullout.

Postils and pullouts use the classes postil and pulloutright. There is a pullout snippet.

The class prologue is a centered box with bluish-grey background, intended for prefatory remarks at the beginning of an entry.

For dividers, use the snippets scrolldivider and updatedivider.

For quick explanatory notesA quick explanatory note is a note that quickly explains something., glosses, etc. use the tooltip class. The snippet is tooltip, which shows you how to use this class. “Visible” indicates where to put text that will be part of the main body text; “invisible” shows where to put the gloss.

Tables

For a quick two-column table, use the snippet table2col. The table list snippet is for making lists inside of table cells.

Good Capitalism Consumption War

Bad Socialism Conservation Peace

From a comment on the Leiter Report

This was a test. Well, it doesn’t work on Safari. And there’s no way to edit source. Back to Typepad.

****

Grist for the mill (and confirmation of Ken Taylor’s remarks): the Jefferson Lectures sponsored by the NEH. In the 2004 lecture, by Helen Vendler, and the 2005 lecture, by Donald Kagan, you will find both hostility to and ignorance of philosophy. See

<a href="http://tlonuqbar.typepad.com/phfn/2005/05/history_old_hat.html">History: old hat or new wave?</a> and <a href="http://tlonuqbar.typepad.com/phfn/2004/05/vendler_on_the_.html">Vendler on the humanities</a> for details. I suspect that in both cases the hostility is to the kind of philosophy, less common these days, that treated history as bunk and that made æsthetics a poor relation. We are paying for the sins of the fathers (and a few mothers).

Concerning the theme of this thread, I must admit that when I read some analytic philosophy (and some history of philosophy too) I ask myself what anyone who wasn’t wholly immersed in the debate would find in it. The standard defense against that sort of jibe, as Garber notes, is to say that epistemology or whatever is a specialized discipline that, like physics or mathematics, has good reason to employ its own jargon and that has, as a pursuit, value in its own right; it need not justify its existence to outsiders. 

That’s all well and good. But physics and mathematics have striking, <i>stable</i> results and notable applications to back up their claim of value. What does metaphysics have to offer? Physicists, moreover, have done a very good job of popularizing even the more esoteric reaches of their science—think of <i>A brief history of time</i> or Brian Greene’s books. Is there any popularization of metaphysics as it is done now, or of epistemology, that compares to them? Would we value such a work if someone troubled to write it? Some of Dennett’s works have made the attempt recently; I’m hard pressed to think of others. 

It would be nice if people spontaneously agreed that figuring out whether second-order logic is logic is a good thing, worth investing in. But that’s not how it works, not even for the study of Shakespeare. That people more readily assent in the case of Shakespeare is owing first of all to the appeal of the plays and poems themselves (more accessible than the refined pleasures of logic), and second to two hundred or so years of promotion. If instead of Shakespeare you said Colley Cibber, the case would have to be made. In philosophy only ethics has a “spontaneous” appeal akin to that of Shakespeare’s drama. That is one reason why Wash U has a Center for Human Values (funded partly by the medical school) but no Center for Possible Worlds.

Part of the difficulty, I think, arises from the Janus-like character of philosophy. Parts of it align themselves with the sciences; but its home, and its money, is in the humanities. As emulators of science we haven’t much to offer, no cancer cures, no spectacular shots of the moons of Saturn. As humanists, we once had our place; we offered a secular guide to life. From the time of Montaigne, let’s say, who drew of course on the ancients, till now (if you include Heidegger, Sartre, and ?i?ek among philosophers), its purpose has been to propose, and to justify, practical decisions, a purpose it shares with the study of literature and the study of history, considered extrinsically. Nowadays, however, some philosophers, even some who work in value theory, studiously avoid offering advice, I think because they regard philosophy as “pure”, a “value-free” study.

There is, to be sure, an intrinsic value to knowing the past, understanding Chaucer, or working out a consistent theory of identity-through-time—a value, however, that requires a process of induction to appreciate. The question at hand—why don’t philosophers get a bigger share of humanities money?—is one of extrinsic justification, of deciding which of many <i>competing</i> pursuits, all intrinsically valuable by their own lights, is to be funded. The justification will be extrinsic because the panels that make the decisions, being representative of the humanities as a whole, are made up mostly of people from other disciplines. One may hope to give those outsiders some glimpse of the beauties seen from within, but by and large the argument must be based on the equivalent of “could lead to a cure for cancer” or the all-round appeal of Shakespeare. In metaphysics or epistemology, it is admittedly more difficult to come up with such equivalents (but no more difficult than the Anglo-Saxonist or the Byzantine historian). But practically speaking that is what must be done. Reciprocity arguments are not going to do the job.

About Disjecta membra

These are notes for a tutorial on designing web pages. From scratch, that is, rather than by using a WYSIWYG editor like Dreamweaver. The notes are oriented toward designing a simple academic home page using HTML and CSS. They’re sketchy in places because I expected to fill in details in presentation. But they may be useful as a supplement to more standard forms of documentation. On this page they are in reverse chronological order. To read them from first to last, go to the Talking about design categories page.

Writing legible code

Pounding out code that does what you want, more or less, is one thing. Writing clean, legible code is another. Legible code has a clear structure. It is easy (relatively speaking) to revise. Its pieces can be readily reused in other contexts. It saves labor and thought.

Closure

• Always close tags. When you write an opening tag, write the closing tag too. For example, if you’re putting in a link <a href="…>, it’s easy to forget the close quotes for the URL and the close tag </a> for the link. If you type <a href=""></a> immediately, then you don’t have to remember to finish the quotes and the tag. Not having to remember stuff is a good thing.
• The same in CSS. When creating a class in CSS, type the closing curly brace immediately. The same goes for attributes: if you type font-family: but you haven’t decided which font to use, type the semicolon (which is effectively the close tag for an attribute specification). Otherwise the browser is likely to ignore everything in the style sheet that follows.
  .weirdstuff {

  font-family:;

  }

Comment copiously

The code in HTML for a comment is <!-- your comment here -->. That’s an exclamation mark and two hyphens. In CSS the code is /* your comment here */. Everything inside comment tags is ignored by the browser. It will, however, be visible to any user who views your source, so don’t put any embarassing secrets or libelous remarks in your comments!

Uses:

• Information about the document. You can include your name and so on, and (more importantly) a revision date. One good place to put this is immediately after the <title> of your document.
• Visual markers. Use something like <!-- ****************** --> to mark off sections of code (e.g. the beginning of the <body> in HTML.
• Identifying chunks. In some cases the opening and the closing tag of an item may be separated by lots of other stuff. This is true for the divs that define a two-column layout, or for the opening and closing of a list. It’s very helpful to add what in effect are your own “opening” and “closing” tags to items like this so that you know which closing </div> goes with which opening <div>. Otherwise, if a closing tag is inadvertently omitted (or a superfluous tag left in) you may have a hard time figuring out what went wrong. View the source for this page and you will see quite a few comments of this sort: every list, for example, including this one, has an opening and a closing comment that identifies it uniquely.
• Reversion. Sometimes you may make a change you’re not sure you’re going to keep. In order to make reversion to the former state of your document easy, rather than delete the code you’re replacing, put it inside a comment.

Recycle ruthlessly

The rule is: don’t invent anything twice if you can help it.

• Code snippets. In programs like MarsEdit and HyperEdit, you can create “snippets” and assign key-equivalents to them. A snippet is just a bit of text, typically code, that you are going to use again and again. For example, in this weblog and in Philosophical Fortnights, inset quotations have a style of their own <div class="inset">… </div>. I’ve made a snippet for this. It includes the close tag, so that in using the snippet I automatically adhere to the first rule above.
• CopyPaste. This is one of several programs that allows you to save clipboards. I use this constantly not only in writing code but in writing lecture notes and other documents in which the same structures appear again and again.
• Templates. Save and reuse an “empty” document if you’re going to be creating several of the same sort. I also have made a template for Philosophical Fortnights so that I can preview drafts without posting them.

Supposedly this page isn’t

compatible with Safari. We’ll see if it works with Omniweb.

Lists; centering

Lists

Lists differ from ordinary text in two ways. Ordinarily they have space above and below; and list items can have inline markers—numbers or bullets. If you don’t specify the formatting of a list (its margins, padding, and so forth) the browser will apply defaults. These may or may not be to your liking. In the example below, the left margin, the space between the list-item numbers, and the space above and below the list have their default values. These will differ from browser to browser.

Top Three Philosophers

1. Kant
2. Hegel
3. Quine

The treatment of lists in CSS looks more complicated than it is in practice. CSS2 has provision for counters and counter-styles (see “Generated Content” in the CSS spec), but browsers don’t support it. The only “generated content” that you can expect most browsers to display is the content generated for list items (and by the :before and :after pseudo-elements).

The block-level formatting of lists is like that of other block-level tags. The only difference is that an <li> tag generates a principal box and a marker box. The marker box can contain a bullet of some sort or an index.

Position

The position of the marker box can be inside or outside the principal box; the default is outside. Example:

Top Three Philosophers

1. Kant was by far the greatest philosopher who ever lived. He makes everyone else look shallow. Not only that, but he wrote in German, and he took a walk at the same time every day. You could set your clock by him.
2. Hegel is said in his later years to have looked like “death upon the chair”. He wrote a lot of books. Some of them are called The Phenomology of spirit and The Philosophy of right.
3. Quine

Type

The “type” of a list item is the kind of bullet or the numbering system it uses.

For bullets, there are various default types, including disc, circle, and square. Browsers will generate more-or-less appropriate characters to realize these types.

Top Three Philosophers

1. Kant
2. Hegel
3. Quine

For numbers, there is a wide variety of options. The ones you are likely to use are decimal, lower-roman, upper-roman, lower-alpha and upper-alpha.

Top Three Philosophers

• Kant
• Critique of pure reason
• Dreams of a spirit-seer
• Hegel
• Phenomenology of spirit
• Lectures on the philosophy of art
• Quine
• Maimonides
• Crescas

Here’s the code for the list above:

<ul><!--ordered-->
<li style="list-style-type: lower-roman">Kant</li><!--item-->
<ul><!--xxx-->
<li style="list-style-type: lower-alpha"><i>Critique of pure reason</i></li><!--item-->
<li style="list-style-type: lower-alpha"><i>Dreams of a spirit-seer</i></li><!--item-->
</ul><!--xxx-->
<li style="list-style-type: upper-roman">Hegel</li><!--item-->
<ul><!--xxx-->
<li style="list-style-type: lower-alpha"><i>Phenomenology of spirit</i></li><!--item-->
<li style="list-style-type: lower-alpha"><i>Lectures on the philosophy of art</i></li><!--item-->
</ul><!--xxx-->
<li style="list-style-type: square">Quine</li><!--item-->
</ul><!--ordered--></div><!--indented-->

Notice that you can mix types in a single list. A list embedded within a list will be doubly indented as it would be in an outline.

Images as bullets

The “bullet” for a list item can be an image specified by the style sheet. Notice that the image has to be no taller than the line-height specified for the list items. If that is set in ems, you may have problems if the user sets the default font-size much smaller than you expect. The disadvantage of using list-style-image is that formatting is up to the browser. I found it difficult to position the bullet-image nicely. In the examples below, I’ve used background images instead to get the same effect.

• Quine
• Hegel
• Kant

li.listfig {

margin-left: -2em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/listfig.png");
background-repeat: no-repeat;
background-position: 0% .625ex;
}

li.checkmed {

margin-left: -2em;
margin-bottom: .625em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/checkmed.png");
background-repeat: no-repeat;
background-position: -2pt .25em;
}

Because the default in most browsers is to give an li tag a bullet (usually of disk type), if you want your default list times to be unadorned, you must specify that in your style sheet.

li {

list-style-type: none; }

Centering

Sometimes you want an image or a caption to be centered in the column it appears in. In CSS there is only one way to center anything: you put it inside a div with the attribute text-align: center.

Examples from the style-sheet for this weblog:

HTML:
<div class="imgboxcentered"><img src="http://tlonuqbar.typepad.com/djm/images/scrollsmall.png" alt="scrollsmall" title="Small scroll" /></div><!--image-->

Stylesheet:
.imgboxcentered {

padding-top:.5em;
padding-bottom:.5em;
padding-left:1em;
padding-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}

Another example (a caption style):

.caption {

padding-top: .5em;
line-height: 1.25em;
text-align: center;
text-decoration: none;
font-size: .87em;
}