This is our style-test post: a single page that renders every element the theme knows how to set — headings, lists, tables, code, quotes, forms, and embeds. We use it to check typography and spacing after any design change; publishers evaluating the theme can use it to see exactly how their content will look.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A paragraph is where the small elements hide, so here is one crowded on purpose: a test link sits mid-sentence, ready to be hovered. This is strong. It should read as clear emphasis without breaking the line's rhythm. This is emphasized — a lighter stress than bold. Superscripts have to survive an exponent, 5³ = 125, and subscripts a molecule, because water is still H₂O in any publication that covers science. When we cite a publication we set it as The Palimpsest Quarterly (that's a citation). Underline. Underline is the most commonly misread mark on this page — readers expect a link — so use it rarely and check how it renders against your link styling here.

HTML and CSS are our tools, and abbreviations like those should whisper their expansions on hover rather than interrupt the line. Editing leaves visible scars when you let it: to copy a file type COPY filename, where the variable stays italic inside the code. Dinner's at 5:00. Let's make that 7. This sentence has been struck. Strikethrough is deletion that stays visible — useful for published corrections, where readers should see both the original text and the fix.

Media

Images break up long text and need testing at more than one size. The theme handles two widths, shown below with the spacing each one gets.

Big Image

A full-width image spans the entire text column. Check that the paragraph after it keeps consistent spacing and picks the text back up cleanly.

Small Image

A smaller image sits within the text flow rather than interrupting it — useful for diagrams, portraits, and detail shots.

As shown above.

List Types

Definition List

Palimpsest

A manuscript page scraped clean and written over, the first text still faintly legible beneath the second — the source of this magazine's name.

Definition list

The element you are reading now: a term followed by its definition, useful for glossaries and reference posts.

Ordered List

1. Draft the piece in plain text
2. Send it to an editor for a second read
   
   1. Structural notes come first
   2. Line edits come second
3. Publish and notify subscribers

Unordered List

• Essays
• Criticism
  • Books and fiction
  • Culture and technology
• Field notes

Table

Preformatted Text

Typographically, preformatted text is not the same thing as code. A faithful rendering of a timetable, a transcript, or quoted plain text needs the fixed grid of a monospace face without being marked up as a program. Most browsers default to Courier, which is a reasonable choice for this kind of content.

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because code has stricter typographic needs than prose, we specify Consolas and Monaco ahead of the browser's generic monospace.

Code blocks can also be inserted with the highlight tag as below:

    {% raw %}
    {% highlight language-x %}
    # some code
    {% endhighlight %}
    {% endraw %}

More information about code highlighting can be found in the Jekyll documentation, if you're publishing that way.

Here are a couple of examples showing the resulting highlighted code:

{% highlight css %} /* css code sample */ #container { float: left; margin: 0 -240px 0 0; width: 100%; } {% endhighlight %}

{% highlight javascript linenos %} // javascript code sample $.ajax({ type: ‘POST’, url: ‘backend.php’, data: “q=“+myform.serialize(), success: function(data){ // on success use return data here }, error: function(xhr, type, exception) { // if ajax fails display error alert alert(“ajax error response type “+type); } }); {% endhighlight %}

Now you can also use highlight.js. For more on how to use it and on the available styles check their demo and documentation pages.

// Swift code sample
import Foundation
@objc class Person: Entity {
var name: String!
var age:  Int!
init(name: String, age: Int) {
/* /* … */ */
}
// Return a descriptive string for this person
func description(offset: Int = 0) -> String {
return “(name) is (age + offset) years old”
}
}

Blockquotes

Blockquotes set off quoted material from the body text, with a cite element for attribution. The citation matters more than the styling.

A room without books is like a body without a soul. — attributed, probably wrongly, to Cicero

And here is a bit of trailing text, to check the spacing between a blockquote and the paragraph that follows it.

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The var element example
The u element example

Forms

Embeds

Essays sometimes quote media directly — a film clip, a recorded talk, a song under discussion. The theme supports the standard embed formats below.

Video

A video embed should sit comfortably within the text column, neither cramped nor sprawling, and the prose should still make sense if it never loads.

Keeping the video inside the page saves the reader a context switch and keeps the surrounding argument in view.

Slides

Slide decks embed as paged viewers. They are useful when a piece discusses a talk or presentation directly.

Check that the deck's aspect ratio is preserved and that navigation controls stay usable at column width.

Audio

Audio needs the most vertical room of all — a player wide enough to scrub through a recording and tall enough to show the full waveform.

Test playback controls and comment overlays against your theme's colors before publishing.

Code

And occasionally a piece about software wants a live, editable demo running beside the prose.

var c = new Sketch.create({autoclear: false}),
    bigCircle = 50,
    littleCircle = 5,
    // The velocity value determines how much to move the spinner head (in radians).
    velocity = 0.105,
    hue = 0,
    // The alpha value below determines the length of the spinner's tail.
    bg = 'rgba(40,40,40,.075)';
    Spinner = function() {};

Spinner.prototype.setup = function() {
  this.x = c.width / 2;
  this.y = c.height / 2 - bigCircle;
  this.rotation = 0;
}
Spinner.prototype.update = function() {
  this.rotation += velocity;
  this.rotation = this.rotation % TWO_PI;
  this.x = c.width /2 + cos(this.rotation) * bigCircle;
  this.y = c.height / 2 + sin(this.rotation) * bigCircle;
}
Spinner.prototype.draw = function() {
  c.fillStyle = 'hsl('+hue+',50%,50%)';
  c.beginPath();
  c.arc(this.x, this.y, littleCircle, 0, TWO_PI);
  c.fill();
  c.closePath();
}
c.setup = function() {
  spinner = new Spinner();
  spinner.setup();
}
c.update = function() {
  spinner.update();
  hue = ++hue % 360;
}
c.draw = function() {
  spinner.draw();
  c.fillStyle = bg;
  c.fillRect(0,0,c.width,c.height);
}

If everything above renders cleanly, the theme passed. Rerun this page after any change to typography, spacing, or color variables.