Overview of Blockquote Plus

This lab page is to work through not only a CSS redesign of my `blockquote` elements, but also to add better capability and ancillary functionality to them.

One inspiration has been Qutoebacks for layout and added structure and functionality. I'm not looking at Quotebacks from the quote and related elements capturing functionality, as I have that as part of my note making for markdown capture and quote creation workflow already.

The starting point is this screen capture of a recent blockquote that for 12+ years the style I've and functionality I've been less than pleased with. I don't think I had quoted an unordered list before, and it is this that likely pushed this to some action.

The background color, the quote centered (this was "fine" at one point), and the use of decorative bullets that are for this vanderwal.net site aren't fitting for content being quoted from elsewhere. Fixing these is the starting point

Quotebacks Layout, Design, and Structure

The Quoteback layout of blockquote and its added structure and elements with:

  1. The quote
  2. Title of the post cited
  3. Author
  4. Author's image (a favicon or Gravitar)
  5. Clicakable link to the site the cite came from

The clean presentation and sizable box for the quote to let it breathe is nice. This is something I have wanted, while also having the separations other's words and ideas deserve apart from those of my own.

The four elements in the Quoteback layout:

The layout of the Quoteback is nice and clean:

The author's site favicon or Gravatar is something that has been driven by the JavaScript, so not sure that is something that is on my list for replicating or dealing with. The other pieces all should be easily doable.

Next Steps

There are quite a few things I can see adding that would work to replicate the Quoteblock, but also extend what it had done to better group all the elements

  1. The first step is to structure the blockquote to handle the changes
  2. I may add the attribute for `cite` into the block element to help screen readers
  3. Wrap the blockquote element in a div to set the blockquote, author / source, title, and link to the cite
  4. On the link to the site with the cite I want to use the `cite` element to properly structure it
  5. Adding microformats to all relevant components

I'm keeping the initial block and having the portion I am working on.

The Initial Set

The following is the chunk of content at the end of the post that bothered me. It includes the paragraph prior to the blockquote, which contains the reference link that is the cite for the blockquote.

For the last 15 years or so when somebody asked about where they could find out about gutting a books I would point them to Naomi Standen’s class guide for gutting books - How to gut a book. This has basically been the only resource that I’ve found that is the same practice as what I learned many years prior. I am a bit surprised that this page is still around and available and I’m deeply thankful that it is.

Naomi has a conclusion that I really appreciate:

Once you have gutted a book, you should be able to answer the following questions:

  • What is the thesis of the book?
  • What is the main line of argument?
  • What kind of evidence is cited to support the argument?
  • Where does the book fit in the scholarly debates on the topic?
  • How convincing is the argument/evidence?

The Test Area with the Test Set

The following area is where I am editing and working on improving structure and design for my site.

For the last 15 years or so when somebody asked about where they could find out about gutting a books I would point them to Naomi Standen’s class guide for gutting books - How to gut a book. This has basically been the only resource that I’ve found that is the same practice as what I learned many years prior. I am a bit surprised that this page is still around and available and I’m deeply thankful that it is.

Naomi has a conclusion that I really appreciate:

Once you have gutted a book, you should be able to answer the following questions:

  • What is the thesis of the book?
  • What is the main line of argument?
  • What kind of evidence is cited to support the argument?
  • Where does the book fit in the scholarly debates on the topic?
  • How convincing is the argument/evidence?
Naomi Standen
How to gut a book
Go to Source

Following on Steps

The layout of the "Blockquote Plus" is fine (or a bit better than fine). I spent time in CodePen working with just this component to get the CSS better sorted out and a bit of cruft removed.

I have the layout where I mostly hoped it would be. I'm not fully sure this is what I'd want for a one or two line quote.

I took the layout and structure and added to the blog post that nudged me to deal with blockquotes - Gutting Book Basics. When moving the code chunk I realized there are a lot of nested pieces to get this working as desired. In a more manual and no JavaScript approach, than Quotebacks, I'm not surprised. But, the next two steps likely would be:

  1. Sorting out a means to get this into my workflow easily. For me personally it likely would be using TextExpander for the all the markup as a template and add the four elements that are needed into the request forms. My workflow is largely markdown until the posting process, but most of my notes and writing that have blockquotes have the four elements needed surrounding the quote to begin with. So, a TextExpander to automate the markup I already and "fine" with could work and I just process it at posting to get the fully created markup chunk to paste in.
  2. The link back, I think should optimally have some Webmention functionality, or something like the old school Trackback.

I'm not sure which of the two are the first hurdle. The templating is something in my own control and rather straight forward. The Webmentions (not sure this is exactly what I'd want at the moment as Trackback alerting is much closer, but Webmentions can work this way with WordPress and a plug-in.