Quoting excerpts using HTML and CSS

Posted by Pierre Igot in: Blogging
December 27th, 2003 • 5:48 am

I have been looking at ways to improve the visual appearance of quoted passages in my blog for a while now. After a certain amount of head-scratching, I have come to the conclusion that I might as well establish my own rules and not worry too much about “standards compliance”.

The core problem is that, in natural language, there are many nuances of quoting. If the goal really is to use HTML as a markup language, then you’d expect to have different HTML tags for different purposes. For example, for someone like me, who regularly discusses language issues and needs to refer to words as words (as opposed to using words to refer to things), there is a definite need for some kind of tag that would mark words as words. But there is no such thing in HTML. There is the deprecated <i>…</i> tag that doesn’t mean anything, there is the <q>…</q> tag that’s an all-purpose quotation mark, and then there is the <cite>…</cite> tag that, as far as I understand, should be used for references to book titles and the like (i.e. the sources of quotations).

Even with simple quotations, i.e. words that I’d want to put between quotation marks and where the <q>…</q> tag might seem appropriate, there are nuances that cannot be rendered using plain-vanilla HTML. For example, in the first paragraph in this very blog entry, I put the phrase standards compliance between quotation marks, because it is a way for me to indicate that I am referring to somebody else’s way of speaking. But I am not referring to a specific text. When I am referring to a specific text, I want to use a different visual appearance, one that indicates more clearly that the text between quotation marks is a direct quote.

In order to achieve this, I have now defined a number of styles using CSS. I have a style for marking words as words (as in “standards compliance” in the previous paragraph), I have one for quotes lifted directly from specific sources (as in the item about the Fast Company article posted earlier today), and I have one for longer excerpts (consisting of multiple paragraphs), as in my blog item about Mac OS X 10.3.2, posted a few days ago.

I have also decided that I’ll be using the <q>…</q> tag and the actual quotation mark character (“) indifferently. For one thing, I don’t think I can bring myself to losing the habit of using the quotation mark and force myself to always use the <q>…</q> tag. In addition, I don’t think the markup value of the <q>…</q> tag is clear.

I’ll also be using the <cite>…</cite> tag for references to book titles, movie titles, newspaper titles, etc. I think that is what the tag was intended for, even though I am entirely sure.

In other words, in practice I will be using a mix of standard HTML tags and custom-made CSS styles for marking up my text. It’s not really pretty (CSS should be used for defining the visual appearance of marked up text, not for marking up text, as far as I understand), but it’s the only acceptable compromise that I can find.

This will not solve all issues. I am still ambivalent, for example, about using so-called curly or smart quotes. I prefer them to straight quotes for obvious typographic reasons. On the other hand, the only reliable way to use them at this point is to describe them explicitly (using &#8220; and &#8221;), which would be cumbersome and would fail to take into account the need to distinguish between different types of quotations.

I am also faced with the problems posed by using any kind of markup in blog entry titles. There is no reason to treat blog entry titles differently from blog entry body text. Yet if I use markup in blog entry titles, the markup is not rendered properly when the title is also used as the window title. For example, if you view the entry about the Fast Company article in its own window, the <cite>…</cite> tag is not rendered. It’s a limitation of current browsers. I don’t think it will change any time soon.

Who said blogging was web publishing for “the rest of us”?

6 Responses to “Quoting excerpts using HTML and CSS”

  1. James says:


    Titles may contain character entities (for accented characters, special characters, etc.), but may not contain other markup (including comments).

  2. Pierre Igot says:

    I am aware of this… The trouble is that I need to hack my blogging software so that it strips the markup from the blog entry titles before using them as web page titles. But for that I need to learn more about PHP. Right now, it does mean that some of my HTML is invalid, I realize this. But I have to choose the lesser of two evils.

    What I meant to say about markup in window titles is that it is the way the technology works at this point. One can still imagine a future with OSes that are fancy enough to use styled text in their window titles.

  3. Pierre Igot says:

    For your information, the problem has been fixed, thanks to the support of the pMachine staff:

    pMachine: Stripping HTML tags in window titles

  4. chris says:

    If you like curly quotes, use this:

    q { quotes: “201C” “201D” “2018” “2019” }

    Works in most CSS browsers. It changes the default quotes on the q tag to be curly double quotes, with curly single quotes for a nested quote within a quote. Only direct quotes should appear within the q tag. Long direct quotes are supposed to appear within blockquotes.

    I’ve always felt that the default HTML standard was severely lacking when it came to markup of song, poem, magazine, and book titles. I believe it was because of that lacking that created some of the demand for the italics, bold, and underline tags in the first place.

    For “finger quoted” (ie. phrases that are really understated or say one thing but mean another) or “names changed to protect the not-so-innocent” (ie. “Extra Mayo Man” in reference to a guy who orders extra-extra-extra mayo on his burger) type phrases, I personally use the em tag.

    p.s. Your preview template or whatever is really broken.

  5. Pierre Igot says:

    Thanks for the suggestions. I wasn’t aware that you could specify quotation mark characters in CSS.

    Still, using the EM tag for other purposes is not really a solution… The tag loses its markup value when it’s used like that.

    What’s wrong with the Preview template? I don’t see any problem.

  6. Pierre Igot says:

    OK, I found more details about this here. I’ve added the code to my stylesheet, but unfortunately it doesn’t seem to work with Safari, only with Camino and other Mozilla-based browsers. Too bad.

    Also, it doesn’t really address the issue of curly apostrophes, so really it’s only half of the solution.

Leave a Reply

Comments are closed.