Skip to content

Instantly share code, notes, and snippets.

@monfera
Last active August 31, 2016 18:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save monfera/c3f184b73ecbd815114c9334856f0cbd to your computer and use it in GitHub Desktop.
Save monfera/c3f184b73ecbd815114c9334856f0cbd to your computer and use it in GitHub Desktop.
Literal pull quote
license: mit

Pull quote

A facetious solution for literally pulling the quote from the body copy, leaving just an empty outline, and letting the reader skip the already read part. Have your cake and eat it too :-)

It's a follow-up to a chat with John Burn-Murdoch who pointed to this article by Jeremy Keith.

While it's meant to be a joke I'd be happier with something like this than with the current practice of setting up pull quote traps for the reader. It serves these purposes:

  • Lets the journal get away with pull quotes
  • The reader isn't stumped by the repeat; there's visual cue and the repeat sentence can be skipped
  • Readers still benefit from the author's intention of the dramatically higher saliency as they will be less likely to skip over the pull quote, or if they do so, the highlight intent is obvious in the body copy
  • The reader can quickly establish the body context from which the quote came
  • The hollow repeat visually alludes to the act of pulling the quote

The styling of the pull would benefit from refinement, to say the least :-) Perhaps italics would be enough. Also it's hugely non-traditional, not to mention the lower contrast of the repeat.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
blockquote {
font-size: 1.618em;
}
q.shadow {
quotes: '' '';
color: #fff;
text-shadow: #000 0px 0px 1px, #000 0px 0px 5px, #000 0px 0px 10px;
#000 15px 0px 10px;
}
q.angular {
quotes: '' '';
font-style: italic;
font-weight: 600;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat pulvinar est, a ultrices massa. Nulla maximus arcu in est luctus tincidunt. In euismod diam est, convallis consequat lacus gravida nec. Sed placerat molestie odio a mollis. Duis et vestibulum odio. Aenean finibus justo in dui tristique, sed volutpat ligula iaculis. Proin maximus egestas sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
<blockquote>
❝ Curabitur sed lacinia ligula.
</blockquote>
<p>
Nulla facilisi. Nulla finibus in sapien sit amet consectetur. In auctor non turpis hendrerit scelerisque. Aenean quis quam convallis, luctus velit a, semper nulla. <q class='shadow'>Curabitur sed lacinia ligula.</q> Nam eget semper neque. Nullam bibendum vehicula enim id venenatis. Morbi congue nibh quam, vitae scelerisque urna scelerisque sit amet. Duis tempus blandit volutpat. Quisque commodo dui tincidunt rutrum rhoncus.
</p>
<blockquote>
❝ Donec eget volutpat urna.
</blockquote>
<p>
Integer a urna convallis lacus luctus volutpat. In quis eleifend eros. Vivamus finibus turpis a mi efficitur, molestie dapibus felis dictum. Morbi vulputate nunc nec nisl porta egestas. <q class='angular'>Donec eget volutpat urna.</q> Vestibulum quis mollis dui. Nunc aliquet convallis erat, dapibus suscipit nisi porta nec. Vestibulum egestas quam consectetur congue tempor.
</p>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment