The Diple

I am always looking for small but different changes to add to my website, and during my recent redesign this was no different, the active state on the main navigation being a small example of this. One other area that I was looking at was the blockquote, although at the time I didn’t come across anything interesting so I left it as it is.

Recently I was reading the excellent Meetings with Remarkable Manuscripts by Dr. Christopher De Hamel, in the course of which I came across various obelus symbols that were used in the past for annotating manuscripts in the margins. One of these was the diple.

Usage and Appearance

The diple, or “double”, started life as a symbol that marked a piece of text as containing something noteworthy, whether it was something interesting, historical, linguistical, or even controversial [1]. Either way, its intention was to mark something as worthy of closer inspection by the reader.

The diple’s appearance varies, but it usually resembles a greater than sign, with one or two dots in its vicinity: >, ⸖, or ·> However its appearance could be influenced by the scribe or the region in which the manuscript was written, and while any variants usually allowed a contemporary to recognise it as a diple (e.g. by using semi-circular comma marks [2]), it could also look nothing at all like one; with dots, squiggles, curves, horizontal lines, s-like flourishes, r-shapes, V’s, Y’s, and a cross, all being used [1].

Medieval Christian writers used the diple to mark citations from scriptural sources, and it was eventually used to do the same for non-church works, and this in turn eventually led quotation marks to become the successor to the diple ([1] and [2]), which is what is generally used today, as well as regional variants such as guillemets (« and ») in German and French.


With all of this in mind, I decided to implement the diple on the blockquote. The CSS is fairly simple, I used a :before pseudo class on the blockquote to add the diple, using its Unicode value as the content.

blockquote {
    position: relative;

    &:before {
        position: absolute;
        top: .2em;
        content: "\2E16";
        margin-left: -1em;
        padding-right: .4em;
        font-size: 1.1em;
        line-height: 1;

The em unit is used so that the size and position of the diple changes responsively. The resulting blockquote now looks like this:

Alongside the reliance on diple-based marks went other indicators that, like today, sometimes overlapped or replaced them.


Old manuscripts are fascinating and it is interesting to read how different obelus (a word I didn’t know until I started researching this) symbols were used by scribes and how they evolved into what we know today. Of course what works in print doesn’t always work on the web, but since quotes successfully made the transition, I think that the diple can too.