Skip to content

Instantly share code, notes, and snippets.

@murtaugh
Last active April 21, 2021 16:23
Show Gist options
  • Save murtaugh/4489740 to your computer and use it in GitHub Desktop.
Save murtaugh/4489740 to your computer and use it in GitHub Desktop.
Blockquote patterns for ALA
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
<figcaption>Sherlock Holmes, <cite>Sign of Four</cite></figcaption>
</figure>
<figure class="quote">
<blockquote>
<p>It is the unofficial force—the Baker Street irregulars.</p>
<p>What a bunch of maroons.</p>
</blockquote>
<figcaption>Sherlock Holmes, <cite>Sign of Four</cite></figcaption>
</figure>
<figure class="tweet">
<!-- what's inside here is simply the code provided by Twitter without alteration. -->
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p>Never, ever, ever let them call you a “creative”. It’s a way to be disenfranchised. You are a designer. It’s not magic, it’s a trade.</p>&mdash; Mike Monteiro (@Mike_FTW) <a href="https://twitter.com/Mike_FTW/status/320929309273493505">April 7, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</figure>
<aside class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</aside>
@murtaugh
Copy link
Author

murtaugh commented Jan 9, 2013

The cite tag is always optional, IMHO, but if you do use it know this: The cite tag is not meant for people's names; according to the spec, it is only for works, not people.

@sarawb
Copy link

sarawb commented Jan 9, 2013

This makes complete sense to me. When I first started marking up articles, I looked at past blockquotes with and without citations to see how you guys did it and found some inconsistencies and weird markup (e.g. the citation getting marked up as an address to force the font size down). This approach fits every example I can imagine. Thanks!

@zeldman
Copy link

zeldman commented Jan 9, 2013

I share Sarah's approval. Well done, young Tim!

@jonalport
Copy link

I've wondered about the best way to do this for some time. Thanks!

@bjankord
Copy link

Curious how you see links fitting into this pattern. Do you prefer separate links for the author of the block quote (i.e Twitter account), and link for the source (i.e. Website) or just one link in the cite element back to the website.

@Marfa
Copy link

Marfa commented Jan 31, 2013

I don't like idea with figure, 'cause I use it for images too. But this have sense.

@SaraSoueidan
Copy link

Makes perfect sense!

@murtaugh
Copy link
Author

@marta — we use figure for a few things, including images and tables, and we use classes to tell them apart.

@murtaugh
Copy link
Author

@bjankord — I'd say it's up to you. Maybe if the source material isn't canonical to the source person, linking the person's name would be worthwhile.

@r-a-y
Copy link

r-a-y commented Mar 19, 2013

What if you wanted to do a more forum-like blockquote?

eg.

Ray wrote:
Semantics are just another brick in the wall.

How would you apply the correct markup to "Ray wrote:"?

I was thinking of doing something similar to what Oli recommended. But instead of using the <footer> element, I was thinking of using <header>. I know it's non-conforming, but would like some feedback on the best way to approach this.

Would <figure> work as an alternative?

@murtaugh
Copy link
Author

That's a good question. I think I might consider not including the "Ray wrote" in the element.

eg:

Ray wrote:

Semantics are just another brick in the wall.

But if I did want to include it, and was ok with formalizing the text of the citation (and was ok with being somewhat ridiculous), I might very well keep the citation in a footer (which is allowed to precede the content it relates to) and do something like this:

<figure>
    <footer>Ray</footer>
    <blockquote>Semantics are just another brick in the wall.</blockquote>
</figure>

… with this CSS:

footer:after { content: " wrote:" }

@r-a-y
Copy link

r-a-y commented Apr 6, 2013

Thanks for replying, murtaugh.

In regards to this markup:

<figure>
    <footer>Ray</footer>
    <blockquote>Semantics are just another brick in the wall.</blockquote>
</figure>

I think it's a little odd to use <footer> in this context. Simply because it's weird to see <footer> before the actual context of the item. However, <tfoot> is used in a similar manner as that's usually added before <tbody>.

If anyone else has any other suggestions, that would be great.

@palimadra
Copy link

The definition of the <blockquote> and <cite> tags has been tweaked. A name is now a legitimate subject for citation.

Keeping this in mind does the pattern for <blockquote> should be changed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment