+++
title = "Marking up quotes"
summary = "In which I explore the semantics and properties of a quote, and how it differs from a citation or reference"
date = "2024-10-12T18:07:26-06:00"
streams = ["all"]
toc = true
autonumbering = false
+++

## preamble

i was looking at Hugo's recent-ish feature for render hooks, specifically new support for render-blockquote.html which allows doing some cool things with markdown blockquotes, like rendering them as alerts or admonitions:

```md{title="alert.md"}
> [!tip]
> lorem ipsum
```

you can also set `markup.goldmark.parser.attribute.block = true` in your hugo.toml config file, which enables support for the "block attributes" syntax:

```md{title="block-attributes.md"}
> lorem ipsum
{cite="http://example.com/something"}
```

so i implemented support for these new features using the following logic:

- if it has an `{{.AlertType}}` then it's not a quote, it's an alert/admonition/tip/note/etc. i choose to render these as `<aside>` with the alert type and an svg icon inside a child `<header>`.
- otherwise, it's a regular blockquote. (how to render it will come later.)

but that got me thinking: what exactly do i want to do semantically with blockquotes? well:

- a blockquote is a quote block
- a quote is... what is a quote?

## semantic building blocks of a "quote"

- content. without this, there would be no quote.
- author/attribution. attribution of a quote to its author provides more context on who said the quote.
- cite/citation. if the quote came from somewhere, then it's best to cite that source.
- caption. in the case that there is no citation, or in the case that there is more context to the quote than the work being cited, a caption can help contextualize the quote.

## how to markup a quote

in html, the most basic way is to just use a `<blockquote>`:

```html
<blockquote>
	<p>Some quoted text.<p>
</blockquote>
```

if you want to cite the work, then you can do two things:

- add the `cite=` attribute to the `<blockquote>` if the work being cited has a URL
- use the `<cite>` element outside the `<blockquote>` to wrap the title of the work being cited

> [!notice] `<cite>` is for works cited, not people attributed
> Per <a class="u-cite-of" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">MDN</a>, WHATWG, and W3C specifications and guidance, using the `<cite>` element or the `cite=` attribute on something that isn't the work being cited is incorrect usage of "citation".

> [!info] Criticism regarding the above point
> > There were too many debates about this like 13-15 years ago about "proper" use of the `<cite>` tag in HTML also
> {cite="https://chat.indieweb.org/dev/2024-10-12#t1728765670088500" card="chat.indieweb.org/[tantek]"}

```html{caption="Figure 1: A blockquote followed by a citation.", title="blockquote-and-cite.html"}
<blockquote cite="http://pub.example/the-work">
	<p>Some quoted text.<p>
</blockquote>
<p><cite>Title of the Work</cite></p>	
```


TODO: talk about associating the cited title with the blockquote. talk about figures and captions.


## prior art: h-cite

in looking at prior art i found the indieweb/microformats2 "h-cite" markup, which at first seemed like a good enough fit as any. but once you start to think about it more deeply, you start to find incongruities.

an h-cite is described as only having 8 elements. from http://microformats.org/wiki/h-cite we get the following list:

> - <b>p-name</b> - name of the work
> - <b>dt-published</b> - date (and optionally time) of publication
> - <b>p-author</b> - author of publication, with optional nested h-card
> - <b>u-url</b> - a URL to access the cited work
> - <b>u-uid</b> - a URL/URI that uniquely/canonically identifies the cited work, canonical permalink.
> - <b>p-publication</b> - for citing articles in publications with more than one author, or perhaps when the author has a specific publication vehicle for the cited work. Also works when the publication is known, but the authorship information is either unknown, ambiguous, unclear, or collaboratively complex enough to be unable to list explicit author(s), e.g. like with many wiki pages.
> - <b>dt-accessed</b> - date the cited work was accessed for whatever reason it is being cited. Useful in case online work changes and it's possible to access the dt-accessed datetimestamped version in particular, e.g. via the Internet Archive.
> - <b>p-content</b> for when the citation includes the content itself, like when citing short text notes (e.g. tweets).
{cite="http://microformats.org/wiki/h-cite" name="h-cite"}

these properties certainly make sense for citations like you'd find in the references section of a wikipedia article or something. but it doesn't really feel like it fits a "quote" very well.

a quotation differs from a citation in that it generally doesn't have a date of publication, nor does publication really make sense for a quote. you can access a citation but generally you don't access quotations. the content of a citation generally is unnecessary and only useful when the work itself is very short; by contrast, a quotation's content is the main thing about it.



## points of contention
### Citation vs Attribution

> "attribution but not citation" doesn't make sense, the attribution (in any form) is presumably a source of some kind, even if it is only the name of the person who said it
{cite="https://chat.indieweb.org/dev/2024-10-12#t1728772529358600" card="chat.indieweb.org/[tantek]"}

### Entities vs Relations (or Properties)

one common way to model the world is to think of everything in terms of entities. [entities have properties (in the form of attribute-values)](https://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value_model#History), and they also [have relations (to other entities)](https://en.wikipedia.org/wiki/Entity–relationship_model#Components).

in this case, looking at quotes and quotations vs cites and citations, there is one (possibly two) entity/ies representing the thing being quoted/cited. there is also a relation between the current entity (the h-entry) and the object of that link relation. the question is whether the "quote entity" and the "citation entity" are the same thing. and i don't think that they are. the former is a contentful thing and the latter is a referent thing.

it almost makes more sense to, instead of using h-cite and u-quotation-of, if we had h-quote and u-citation-of -- i mean, the "quote" is the main "entity" here, and it's possible to use a quote as a "citation". in general, i see h-* as representing entities, and u-* as representing link relations between those entities. so i still think h-cite deserves to exist separately to mark up citations when they are entities.

### what's the point? aren't you overthinking this?







```
<article class="quote-block{{if $cite}} h-cite{{end}}{{ if $author}} h-x-quote{{end}}">
	{{ with $author }}
	<header style="display: contents">
		<p style="display: contents">
			<span class="p-author">
				{{ partial "mf2/h-card.html" . }}
			</span>
			<span style="display: none"> wrote:</span>
		</p>
	</header>
	{{ else }}
	<header style="display: contents">
		<svg class="quote-block__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290" width="1em" height="1em" fill="currentColor"><title>quote</title><path d="M22.12 145v97.65h97.65V145H70.95c0-26.92 21.9-48.82 48.82-48.82V47.35c-53.93 0-97.65 43.72-97.65 97.65zm245.76-48.82V47.35c-53.93 0-97.65 43.72-97.65 97.65v97.65h97.65V145h-48.82c-.01-26.92 21.89-48.82 48.82-48.82z"></path></svg>
	</header>
	{{ end }}
	{{ with $content }}
	<section style="display: contents">
		<blockquote class="quote-block__content e-content"{{ with $cite }} cite="{{.}}"{{end}}>
			{{.}}
		</blockquote>
	</section>
	{{ end }}
	{{ if (or $cite $caption) }}
	<footer style="display: contents">
		<p style="display: contents">
			{{ with $cite }}
			<a href="{{.}}" class="u-url">
				{{ with $name }}
				<span>{{ . | markdownify }}</span>
				{{ else }}
				<span>(View quote in its original context)</span>
				{{ end }}
			</a>
			{{ else }}
				{{ with $caption }}
				<span>{{ . | markdownify }}</span>
				{{ end }}
			{{ end }}
		</p>
	</footer>
	{{ end }}
</article>
```