vanderwal.net

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: