Cartouche Links with CSS

[Originally published at ttlaxia.net 2012-09-25 Tue]

The links at [now-defunct web site], at least as of this writing, are styled to look a little like the cartouches that can be seen in ancient Egyptian hieroglyphics (see two examples in the first picture).


The results of this process look something like this (second picture).

The idea behind underlining links in HTML display is simply to be a way to draw attention to them, to differentiate them from the surrounding text. There are a number of typographic means of emphasis, including the use of italics, colors, underlining, highlighting, the use of boldface, small capitals (the most under-used means in the post-Web era) and encircling. A cartouche is a stylized circle that creates emphasis. I thought, why not try that for links? In any case, I have no doubt that there are many better, and perhaps simpler ways to accomplish it, and perhaps good reason to think it not something one ought to accomplish in the first place; but for the record, so to speak, it is done thusly—


First, by using the following css style for the links. The trick is to, (1) put a border around the object with `border'. Make it solid, and two pixels width seemed about right; (2) use `border-radius' to round out the corners, as below. At the time of this writing, older versions of Safari and Chrome require `-webkit-border-radius', Internet Explorer does not respect `border-radius' at all, but will with the release of Internet Explorer 9 soon, and Firefox is reported to require `-moz-border-radius' but the version I am using respects `border-radius'. In any case, I don't know that it can seriously hurt to include all three:

a {
    color:#010;            /* or whatever you prefer        */
    border:solid 2px #010;
    white-space: nowrap;   /* Keep it all on a single line. */
    padding-right:3px;     /* a little extra to avoid       */
    padding-left:3px;      /* collisions                    */
    border-radius:0.5em 0.5em 0.5em 0.5em; 
    -webkit-border-radius:0.5em 0.5em 0.5em 0.5eam;
    -moz-border-radius:0.5em 0.5em 0.5em 0.5em; 
}

The second part—and the one that makes it something of a hack, is to use a vertical pipe character of some sort after the link—outside of the </a> tag. Note that according to a source which may or may not be reliable,¹ the vertical bar should be on the side toward the direction of reading, so it should be on the right side for English. Thus, the code for a link would look like this—

<a href="todostack.el">todostack.el</a>┫

I had tried using an actual pipe character, like “|”, but I didn't like the results as well. Instead, I used Unicode character 0x252B as above. I even wrote a trivial Emacs Lisp function to insert that character when I want it—

(defun t/insert-cartouche-end ()
  (interactive)
  (insert "┫"))

Or in Emacs you can always use C-x 8 RET box drawings heavy vertical and left RET.

Footnotes

1. https://www.dia.org/education/egypt-teachers/langarts/bouler/activity.htm