Experiment: quote marks around blockquotes

[waldyrious]

The left bar is becoming somewhat of a standard, and inconspicuous enough, but quote marks (if they could be added in a similarly unobtrusive way) could be more intuitive.

Maybe even try to emulate an effect like this (in a subtler way, though), using CSS only.

[waldyrious]

Here are the results of an experiment I made (using Linux Libertine to get nicer quote characters):

blockquote{ position: relative; background: #f6f6f6; }
blockquote::before { content: '“'; position: absolute; left:  -0.5em; color: #ddd; font-size: 5em; line-height:1em; }
blockquote::after  { content: '”'; position: absolute; right: -0.5em; color: #ddd; font-size: 5em; line-height:1em; }

Before:

After:

Looks nice enough (probably would need more top and bottom margin in the shaded version), but the code is way too complex to justify what is just a "nice-to-have", really. I'll close for now unless I can come up with a clever way to implement this with shorter code.

[waldyrious]

For future reference, there are a bunch of neat (but even more complex!) styles here: https://1stwebdesigner.com/css-snippets-blockquotes/

[waldyrious]

Hmm, perhaps there's a compact enough one at https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/:

blockquote:before { color: #ddd; content: open-quote; font-size: 4em; line-height: .1em; vertical-align: -.4em; margin-right: .1em; }
blockquote:after { color: #ddd; content: close-quote; font-size: 4em; line-height: .1em; vertical-align: -.4em; margin-left: .1em; }

Or the DRYer variant:

blockquote:before, blockquote:after { color: #ddd; font-size: 4em; line-height: .1em; vertical-align: -.4em; }
blockquote:before { content: open-quote; margin-right: .1em; }
blockquote:after { content: close-quote; margin-left: .1em; }

Result:

But is the niceness worth adding a whole 3 lines?... I'm more inclined to say no.

What if we abandon the nice semantic use of open-quote and close-quote in order to combine the latter two lines? (Also experimenting with smaller quotes)

blockquote:before, blockquote:after { color: #ddd; font-size: 3em; line-height: .1em; vertical-align: -.4em; }
blockquote:before { content:  '“'; margin-right: .1em; } blockquote:after { content: '”'; margin-left: .1em; }

Hmm.... definitely something to consider. I'll reopen and revisit this later.