Quotes, Blockquotes, Citations

Pull quotes are short & are found elsewhere within the longer text. We pull them out of the normal flow and give pull quotes a prominent position. They are generally found either before or after, but rarely next to, the original context within the longer text from where they came. I like to use the q element for pull quotes simply because it seems like the most appropriate option.

I like to use the q element for pull quotes simply because it seems like the most appropriate option.

“It’s a particularly egregious form of dark money,” said Alicia Bannon, an attorney with the Brennan Center for Justice at the New York University School of Law, who has been critical of special interest influence in judicial races. “Not only do you not know who’s behind the spending, you don’t even have information about what spending is taking place … there can be groups that are having quite a significant impact on a state’s race without any kind of public scrutiny.” ProPublica, A Kansas Group’s Push to Oust Judges Reveals a Gap in Campaign Finance Rules

HTML Syntax
<p><q>I like to use the <em>q</em> element for pull quotes simply because it seems like the most appropriate option.</q></p>
<p>"It's a particularly egregious form of dark money," said Alicia Bannon, an attorney with the Brennan Center for Justice at the New York University School of Law, who has been critical of special interest influence in judicial races. "Not only do you not know who's behind the spending, you don't even have information about what spending is taking place ... there can be groups that are having quite a significant impact on a state's race without any kind of public scrutiny." <cite>ProPublica, <a href="http://www.propublica.org/article/a-kansas-groups-push-to-oust-judges-reveals-a-gap-in-campaign-finance-rules" target="_blank">A Kansas Group's Push to Oust Judges Reveals a Gap in Campaign Finance Rules</a></cite></p>

CSS Syntax
q { margin: 1em 0em 1.5em 1.5em; }
	.entry-content q:before,
	.entry-content q:after { font-size: 1.5em; }
	
	.entry-content q:before {
		content: '\201C';
		padding-right: 0.25em;
	}
	.entry-content q:after { content: '\201D'; }

cite { font-style: italic; }

/* Browsers > 1024px only */
@media screen and (min-width: 1024px) {

	q {
		max-width: 50%;
		float: right;
    }

Blockquotes are similar to pull quotes, but they are usually found within the flow of the longer text and are block level. They refer to an external citation, that is NOT in the longer text. They can, but don’t have to contain, other block-level elements inside them.

Sometimes the juice simply isn’t worth the squeeze.

HTML Syntax
<p><strong>Blockquotes</strong> are similar to pull quotes, but they are usually found within the flow of the longer text and are <em>block</em> level. They refer to an external citation, that is NOT in the longer text. They can, but don't have to contain, other block-level elements inside them.</p>
<blockquote><p>Sometimes the juice simply isn't worth the squeeze.</p></blockquote>
CSS Syntax
blockquote {
	margin: 0 auto;
	width: 80%;
}

	.entry-content blockquote:before,
	.entry-content blockquote:after {
		font-size: 3em;
		line-height: 1;
		position: relative;
	}

	.entry-content blockquote:before {
		content: '\201C';
		top: 0.5em;
		left: -0.5em;
	}
	.entry-content blockquote:after {
		content: '\201D';
		top: 0.25em;
		left: 1.5em;
	}
	
	.entry-content blockquote p:first-of-type { margin-top: 0; }
	.entry-content blockquote p:first-of-type { margin-bottom: 0; }

Citations usually occur within q or blockquote tags. The blockquote below has a cite tag within the p block.

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.Steve Jobs – Apple Worldwide Developers’ Conference, 1997

HTML Syntax
<p><strong>Citations</strong> usually occur within <em>q</em> or <em>blockquote</em> tags. The blockquote below has a <em>cite</em> tag within the <em>p</em> block.</p>
<blockquote><p>People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.<cite>Steve Jobs - Apple Worldwide Developers' Conference, 1997</cite></p></blockquote>
CSS Syntax
cite { font-style: italic; }

Leave a Reply

Your email address will not be published. Required fields are marked *