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(); }
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(); }