{"id":2961,"date":"2013-09-03T07:17:41","date_gmt":"2013-09-03T13:17:41","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2961"},"modified":"2013-09-03T20:15:17","modified_gmt":"2013-09-04T02:15:17","slug":"using-blockquote","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/09\/03\/using-blockquote\/","title":{"rendered":"Using <blockquote><\/code>"},"content":{"rendered":"

Typography<\/h3>\r\n

Butterick<\/a> has a few rules for block quotations: Reduce the point size and line spacing slightly, and indent the text block be\u00adtween half an inch and a full inch on the left side, and op\u00adtion\u00adal\u00adly the same on the right.<\/p>\r\n

Since I'm using both Hebrew and English quotes, I'll indent on both sides. Rather indenting with margin<\/code>, I set the width<\/code> and use margin: auto<\/code> 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.

\r\n

blockquote {\r\n  font-size: 92%;\r\n  line-height: $linespacing;\r\n  width: $linewidth - 1in;\r\n  margin: 0 auto;\r\n}<\/code><\/pre>\r\n
Note that I'm using SCSS<\/a>, so I can use variables and math. I have to repeat the line-height<\/code> since what is inherited is the actual amount of the line height, not the relative amount (I set line-height: 1.35<\/code> on the <body><\/code> which is 21px, but I want the <blockquote><\/code> line-height<\/code> to be 1.35 times its own font-size).<\/p>\r\n\r\n\r\n
Attribution<\/h3>\r\n
There's been a lot of argument<\/a> 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:<\/p>\r\n
<figure>\r\n    <blockquote>\r\n        <p>Attribution for the quotation, if any, must be placed outside the blockquote element<\/p>  \r\n    <\/blockquote>\r\n    <figcaption>W3C HTML Working Group<\/figcaption>\r\n<\/figure><\/code><\/pre>\r\n\r\n
But the most recent HTML5 draft<\/a> (dated 9\/1\/2013) allows \"Attribution for the quotation, may be be placed inside the <blockquote><\/code> element, but must be inside a <footer><\/code> element\", or the much more logical (and really, even the <p><\/code> is optional):<\/p>\r\n
<blockquote>\r\n    <p>Attribution for the quotation, if any, must be placed outside the blockquote element<\/p>  \r\n    <footer>W3C HTML Working Group<\/footer>\r\n<\/blockquote><\/code><\/pre>\r\n\r\n
And, since that's the way I've been doing it for the past few months, that will be the way I will continue.<\/p>\r\n\r\n
Marking up the attribution uses the ever-useful ::before<\/code> pseudoelement to add the —<\/code>:<\/p>\r\n
blockquote footer::before {\r\n  content: '\u2014';\r\n}<\/code><\/pre>\r\n
Rather than having it non-semantically in the text itself.
\r\n\r\n
Biblical Verses<\/h3>\r\n
Marking up poetry seems to have generated a lot of discussion<\/a> back in 2007, but it seems the easiest way was described by Ian Hickson<\/a>, with <p><\/code> for the stanzas and <br\/><\/code> separating the lines. This does not allow for dealing with \"lines\" as elements but will work for my purposes. Thus:<\/p>\r\n
<blockquote>\r\n  <p>\r\n    <b>1<\/b> Happy are they that are upright in the way  who walk in the law of the LORD.<br\/>\r\n    <b>2<\/b> Happy are they that keep His testimonies  that seek Him with the whole heart.<br\/>\r\n    <b>3<\/b> Yea  they do no unrighteousness; they walk in His ways.<br\/>\r\n    <b>4<\/b> Thou hast ordained Thy precepts  that we should observe them diligently.<br\/>\r\n    <b>5<\/b> Oh that my ways were directed to observe Thy statutes!<br\/>\r\n    <b>6<\/b> Then should I not be ashamed  when I have regard unto all Thy commandments.<br\/>\r\n    <b>7<\/b> I will give thanks unto Thee with uprightness of heart  when I learn Thy righteous ordinances.<br\/>\r\n    <b>8<\/b> I will observe Thy statutes; O forsake me not utterly.\r\n  <\/p>\r\n  <p>\r\n    <b>9<\/b> Wherewithal shall a young man keep his way pure? By taking heed thereto according to Thy word.<br\/>\r\n    <b>10<\/b> With my whole heart have I sought Thee; O let me not err from Thy commandments.<br\/>\r\n    <b>11<\/b> Thy word have I laid up in my heart  that I might not sin against Thee.<br\/>\r\n    <b>12<\/b> Blessed art Thou  O LORD; teach me Thy statutes.<br\/>\r\n    <b>13<\/b> With my lips have I told all the ordinances of Thy mouth.<br\/>\r\n    <b>14<\/b> I have rejoiced in the way of Thy testimonies  as much as in all riches.<br\/>\r\n    <b>15<\/b> I will meditate in Thy precepts  and have respect unto Thy ways.<br\/>\r\n    <b>16<\/b> I will delight myself in Thy statutes; I will not forget Thy word.\r\n  <\/p>\r\n  <footer>Psalms 145<\/footer>\r\n<\/blockquote><\/code><\/pre>\r\n\r\n
This brings up the question of how to mark up the verse numbers. They're not really part of the text, so something like<\/p>\r\n
<ol>\r\n  <li value=9 >Wherewithal shall a young man keep his way pure? By taking heed thereto according to Thy word.<\/li>\r\n  <li value=10 > With my whole heart have I sought Thee; O let me not err from Thy commandments.<\/li>\r\n<\/ol><\/code><\/pre>\r\n
would work (and would make each line a semantic element), but I can't style list numbers (at least until the li::marker<\/a> 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\"<\/code> or whatever on each <p><\/code> and having style<\/code> attributes is just ugly and non-semantic. If browsers implemented the full CSS3 list proposal<\/a>  and allowed counter-reset: verse attr(value)<\/code> or allowed access to the actual <ol><\/code>\/<li><\/code> counter with list-item<\/code> then I could use that.<\/p>\r\n
But they don't. So I'm including the verse numbers as part of the text, and marking them up as <b><\/code>, which seems like an appropriate use according to the standard<\/a>. And it's what Mechon Mamre<\/a> uses, which makes it easy to cut and paste.<\/p>\r\n\r\n
Comparing texts<\/h3>\r\n
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><\/code> would be useful for, but it's not semantically a table. So I use CSS display: table<\/code>:
\r\n\r\n
<div style=\"display: table\">\r\n  <blockquote style=\"display: table-cell; white-space: nowrap\">\r\n    <p>\r\n      <b>1<\/b> For the Leader;<br\/>\r\n      [a psalm] of David the servant of the LORD<br\/>\r\n      who spoke unto the LORD the words of this song<br\/>\r\n      in the day that the LORD delivered him<br\/>\r\n      from the hand of all his enemies<br\/>\r\n      and from the hand of Saul.<br\/>\r\n      <b>2<\/b> And he said:<br\/>\r\n      I love thee  O LORD  my strength.<br\/>\r\n      <b>3<\/b> The LORD is my rock  and my fortress  and my deliverer<br\/>\r\n      my God  my rock<br\/>\r\n      in Him I take refuge;<br\/>\r\n      my shield  and my horn of salvation  my high tower.<br\/>\r\n      <br\/>\r\n    <\/p>\r\n    <footer>Psalms 18<\/footer>\r\n  <\/blockquote>\r\n  <blockquote style=\"display: table-cell; white-space: nowrap\">\r\n    <p>\r\n      <b>1<\/b><br\/>\r\n      And David<br\/>\r\n      spoke unto the LORD the words of this song<br\/>\r\n      in the day that the LORD delivered him<br\/>\r\n      out of the hand of all his enemies<br\/>\r\n      and out of the hand of Saul.<br\/>\r\n      <b>2<\/b> and he said:<br\/>\r\n      <br\/>\r\n      The LORD is my rock  and my fortress  and my deliverer.<\/br>\r\n      <b>3<\/b> The God who is my rock<br\/>\r\n      in Him I take refuge;<br\/>\r\n      my shield  and my horn of salvation  my high tower<br\/>\r\n      and my refuge; my saviour  Thou savest me from violence.\r\n    <\/p>\r\n    <footer>II Samuel 22<\/footer>\r\n  <\/blockquote>\r\n<\/div><\/code><\/pre>\r\n\r\n
The white-space: nowrap<\/code> 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<\/code> with margin: auto<\/code> 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.","protected":false},"excerpt":{"rendered":"Typography Butterick has a few rules for block quotations: Reduce the point size and line spacing slightly, and indent the text block be\u00adtween half an inch and a full inch on the left side, and op\u00adtion\u00adal\u00adly the same on the right. Since I'm using both Hebrew and English quotes, I'll indent on both sides. Rather […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2961"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2961"}],"version-history":[{"count":19,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2961\/revisions"}],"predecessor-version":[{"id":2989,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2961\/revisions\/2989"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}