HTML5: neat tricks with CSS
Gwern Branwen
the differing shades of grey would help the reader distinguish what is
a quote and what is a quote inside a quote (and occasionally, what is
a quote inside a quote inside a quote). Indenting is good, but not
enough I felt:
/* Add very modest drop shadows, partially inspired by
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
Note the awful hack by which we implement
'alternating'/zebra-stripe coloring of quotes. */
blockquote, blockquote blockquote blockquote, blockquote
blockquote blockquote blockquote blockquote {
z-index: -2;
background-color: rgb(250, 250, 250); }
blockquote blockquote, blockquote blockquote blockquote
blockquote, blockquote blockquote blockquote blockquote blockquote
blockquote {
background-color: rgb(240, 240, 240); }
Then I wondered how I could do the same thing for regular text. We all
know how nice syntax highlighting is for source code, and one of the
nicest parts is visually breaking out quoted strings from the rest of
the file. Quoted strings are frequently used in natural language like
English too, so why can't we have at least that much syntax
highlighting? You may remember I had succeeded in hacking Emacs's
markdown mode to highlighting double-quoted strings:
https://groups.google.com/group/pandoc-discuss/browse_thread/thread/0e0a941bb8f25df4
I still like it a great deal. But how? This is semantic stuff,
analyzing the text in certain ways following the syntax.
I had turned off smart quotation marks because they break my interwiki
links by transforming text in links (including apparently Unicode
chars, which I haven't figured out yet how to fix), but I remembered
that they were not symmetrical - left double quotes is different from
right double quotes. So the semantics were there: I could replace the
curly quotes with <q> and </q> respectively, and then <q> is
accessible from CSS-land and I can repeat the CSS shading. I could
transform the HTML text using sed, but that's awfully ugly. Why didn't
Pandoc just use <q> in the first place, since the docs say that it is
supported by pretty much every browser? Turns out it did - but *only*
in HTML5 mode. stQuotes is otherwise inaccessible. I had been putting
off switching to HTML5 because I was sure it'd break stuff on my site,
but this was good enough reason.
So I flipped the HTML5 and smart quotation options in my hakyll.hs,
ripped and edited stuff in my HTML template, regretfully deleted my
sausages.js plugin when I simply couldn't get it to work, and verified
<q> was being inserted. The final touch, the CSS:
q {background-color:rgba(0,0,0,0.03);}
You can see many examples in http://www.gwern.net/Suzanne%20Delage or
http://www.gwern.net/otaku#project-meeting besides all the other
pages.
"Suzanne Delage" illustrates the final problem: what happens when a
blockquote itself contains text surrounded by a pair of quotes? Do you
double-shade and get a nasty visual effect of gutters of white lines
between sentences? The solution given to me was this:
blockquote > p:only-of-type q:only-of-type {background-color:inherit}
With this, the inline quotes still get shaded but not the whole thing.
There are still issues where the quotes themselves are parsed as
balanced in the wrong way - for example, the second blockquote in
http://www.gwern.net/Suzanne%20Delage#yes-its-a-trap - but otherwise
I'm very satisfied with it.
--
gwern
http://www.gwern.net