Forum How do I...?

Pullquotes

Montgomery
The original Boom! CSS provides a class called "sidenote", which is floated left and styled. But it requires each sidenote to be added to the markup.

Instead of additional markup, I'd much rather have an automatic solution.

Two possibilities come to mind:
1. Javascript: http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/

2. Generated content:
Use string-set, and here's an attempt at some code.

/* pullquotes */
span.pullquote { counter-increment: pullquote; }
span.pullquote::before {
content: string(pullquote);
float: left;
font: 10pt/1.26 "Garamond Premr Pro", Garamond, Georgia, "Times New Roman", serif;
max-width: 10em;
text-align: center;
}
/* set pullquotes */
span.pullquote { string-set: pullquote content(); }
Montgomery
It works! This actually works, to automatically generate pullquotes.

In the (X)HTML, add a class of pullquote. Two examples:

<span class="pullquote">At first Bartleby did an extraordinary quantity of writing.</span>

<div class="pullquote">
<p>“Lives without dining,” said I, and closed his eyes.</p>
<p>“Eh!—He’s asleep, aint he?”</p>
<p>“With kings and counselors,” murmured I.</p>
</div>

And then add this to your CSS (style to your taste):

/* pullquotes */
.pullquote { counter-increment: pullquote; }
.pullquote::before {
border-top: 1px double #ccc;
color: #111;
content: string(pullquote);
float: left;
font: 10pt/1.26 "Garamond Premr Pro", Garamond, Georgia, "Times New Roman", serif;
font-size: 12pt;
margin-left: -2.25in;
padding: 1em 0;
text-align: left;
text-indent: 0;
width: 1.6in;
}
/* set pullquotes */
.pullquote { string-set: pullquote content(); }
mikeday
Looks good!

Perhaps you can even avoid the string-set by capturing the content of the element directly in the ::before psuedo-element, using content() (or contents()? I always forget).