Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@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

SaraSoueidan commented Feb 2, 2013

Makes perfect sense!

@murtaugh
Copy link
Author

murtaugh commented Feb 13, 2013

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

@murtaugh
Copy link
Author

murtaugh commented Feb 13, 2013

@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

murtaugh commented Mar 25, 2013

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

palimadra commented Jun 21, 2014

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