Typography
Butterick has a few rules for block quotations: Reduce the point size and line spacing slightly, and indent the text block between half an inch and a full inch on the left side, and optionally the same on the right.
Since I'm using both Hebrew and English quotes, I'll indent on both sides. Rather indenting with margin, I set the width and use margin: auto to center it. That way, if the quote ends up wider than the fixed width (see the issues with comparing texts, below), it will remain centered.
blockquote {
font-size: 92%;
line-height: $linespacing;
width: $linewidth - 1in;
margin: 0 auto;
}Note that I'm using SCSS, so I can use variables and math. I have to repeat the line-height since what is inherited is the actual amount of the line height, not the relative amount (I set line-height: 1.35 on the <body> which is 21px, but I want the <blockquote> line-height to be 1.35 times its own font-size).
Attribution
There's been a lot of argument about how mark up the attribution (the souce) of a quote. The original HTML5 documentation said "Attribution for the quotation, if any, must be placed outside the blockquote element", which meant ugly markup like:
<figure>
<blockquote>
<p>Attribution for the quotation, if any, must be placed outside the blockquote element</p>
</blockquote>
<figcaption>W3C HTML Working Group</figcaption>
</figure>But the most recent HTML5 draft (dated 9/1/2013) allows "Attribution for the quotation, may be be placed inside the <blockquote> element, but must be inside a <footer> element", or the much more logical (and really, even the <p> is optional):
<blockquote>
<p>Attribution for the quotation, if any, must be placed outside the blockquote element</p>
<footer>W3C HTML Working Group</footer>
</blockquote>And, since that's the way I've been doing it for the past few months, that will be the way I will continue.
Marking up the attribution uses the ever-useful ::before pseudoelement to add the —:
blockquote footer::before {
content: '—';
}Rather than having it non-semantically in the text itself.
Biblical Verses
Marking up poetry seems to have generated a lot of discussion back in 2007, but it seems the easiest way was described by Ian Hickson, with <p> for the stanzas and <br/> separating the lines. This does not allow for dealing with "lines" as elements but will work for my purposes. Thus:
<blockquote>
<p>
<b>1</b> Happy are they that are upright in the way who walk in the law of the LORD.<br/>
<b>2</b> Happy are they that keep His testimonies that seek Him with the whole heart.<br/>
<b>3</b> Yea they do no unrighteousness; they walk in His ways.<br/>
<b>4</b> Thou hast ordained Thy precepts that we should observe them diligently.<br/>
<b>5</b> Oh that my ways were directed to observe Thy statutes!<br/>
<b>6</b> Then should I not be ashamed when I have regard unto all Thy commandments.<br/>
<b>7</b> I will give thanks unto Thee with uprightness of heart when I learn Thy righteous ordinances.<br/>
<b>8</b> I will observe Thy statutes; O forsake me not utterly.
</p>
<p>
<b>9</b> Wherewithal shall a young man keep his way pure? By taking heed thereto according to Thy word.<br/>
<b>10</b> With my whole heart have I sought Thee; O let me not err from Thy commandments.<br/>
<b>11</b> Thy word have I laid up in my heart that I might not sin against Thee.<br/>
<b>12</b> Blessed art Thou O LORD; teach me Thy statutes.<br/>
<b>13</b> With my lips have I told all the ordinances of Thy mouth.<br/>
<b>14</b> I have rejoiced in the way of Thy testimonies as much as in all riches.<br/>
<b>15</b> I will meditate in Thy precepts and have respect unto Thy ways.<br/>
<b>16</b> I will delight myself in Thy statutes; I will not forget Thy word.
</p>
<footer>Psalms 145</footer>
</blockquote>This brings up the question of how to mark up the verse numbers. They're not really part of the text, so something like
<ol>
<li value=9 >Wherewithal shall a young man keep his way pure? By taking heed thereto according to Thy word.</li>
<li value=10 > With my whole heart have I sought Thee; O let me not err from Thy commandments.</li>
</ol>would work (and would make each line a semantic element), but I can't style list numbers (at least until the li::marker pseudoelement is implemented). Using CSS counters would work, but I don't necessarily want to start with verse 1 and the only way to set the initial count would be a style="counter-reset: verse 10" or whatever on each <p> and having style attributes is just ugly and non-semantic. If browsers implemented the full CSS3 list proposal and allowed counter-reset: verse attr(value) or allowed access to the actual <ol>/<li> counter with list-item then I could use that.
But they don't. So I'm including the verse numbers as part of the text, and marking them up as <b>, which seems like an appropriate use according to the standard. And it's what Mechon Mamre uses, which makes it easy to cut and paste.
Comparing texts
There are lots of times when I'd like to compare two texts side-by-side, aligned with comparable lines. It's the sort of thing a <table> would be useful for, but it's not semantically a table. So I use CSS display: table:
<div style="display: table">
<blockquote style="display: table-cell; white-space: nowrap">
<p>
<b>1</b> For the Leader;<br/>
[a psalm] of David the servant of the LORD<br/>
who spoke unto the LORD the words of this song<br/>
in the day that the LORD delivered him<br/>
from the hand of all his enemies<br/>
and from the hand of Saul.<br/>
<b>2</b> And he said:<br/>
I love thee O LORD my strength.<br/>
<b>3</b> The LORD is my rock and my fortress and my deliverer<br/>
my God my rock<br/>
in Him I take refuge;<br/>
my shield and my horn of salvation my high tower.<br/>
<br/>
</p>
<footer>Psalms 18</footer>
</blockquote>
<blockquote style="display: table-cell; white-space: nowrap">
<p>
<b>1</b><br/>
And David<br/>
spoke unto the LORD the words of this song<br/>
in the day that the LORD delivered him<br/>
out of the hand of all his enemies<br/>
and out of the hand of Saul.<br/>
<b>2</b> and he said:<br/>
<br/>
The LORD is my rock and my fortress and my deliverer.</br>
<b>3</b> The God who is my rock<br/>
in Him I take refuge;<br/>
my shield and my horn of salvation my high tower<br/>
and my refuge; my saviour Thou savest me from violence.
</p>
<footer>II Samuel 22</footer>
</blockquote>
</div>The white-space: nowrap makes sure that the lines break where I want them to. This lets me compare and contrast lines, and extends to three columns easily (more than that gets too squashed). Using display: table with margin: auto as above means that if the blockquotes are too long to fit in the indented space I usually use, the table formatting rules mean that it expands to fit the content and remains centered.
Leave a Reply