Assignment: Long-Form Text

Format a piece of long-form text into a nice, functionally readable, single column web page, in the style of a long-form news article or opinion piece.

The goal of this assignment is to practice with block layout, centering, and working with typography on the web.

Here are the overall requirements:

  • Use copyright-free material for the content. More on this below.
  • For very long texts, you can include an excerpt e.g. a few chapters. More on this below.
  • Create a single html page with accompanying style sheet. Don’t forget that well structured, semantic HTML always comes before styling!
  • Lay out the page as a centered single column of content that uses typography, spacing, and hierarchy effectively.
  • The content should include at least a few headings in addition to the body text. Block quotes, images, and other elements are optional and will depend on the content. Avoid poetry or text that is mostly dialogue.
  • Select an appropriate, functional typeface for the body, and a different typeface to offset the headings.
  • Source at least one font from either Google Fonts, Adobe Fonts, or by self-hosting.
  • Utilize margins and padding to create appropriate whitespace between headings, paragraphs, and other elements. Negative space is just as important as the content!
  • Use font-based units like em, rem, ch for as many measurements as possible—font sizes, margins and padding, widths, etc.

Here are two sources with a vast collection of works that are in the public domain, creative commons licensed, or otherwise copyright-free:

Both of these catalogs offer works in multiple formats e.g. HTML, pdf, ePUB, or plaintext. You may find that the HTML format is easiest to copy and paste the text out of. Do not copy the HTML code. Not only does this defeat the purpose of the assignment, it is in many cases not written or formatted correctly for this assignment. Stripping the existing code and adapting to your needs will likely be more work than starting with the text and writing the markup from scratch.

Length of Content

As the name implies, this assignment is meant for us to work with long and text-heavy content. Formatting the text into well structured semantic HTML is a significant (and important) portion of this assignment.

That said, I don’t want you to be forced into converting an entire epic novel into HTML. Excessive time spent on this task will take your time and energy away from the other major component—the formatting and layout.

The Constitution Text is ~4670 words. I’m guessing with the tools available in our text editors that you should be able to work with up to at least 10,000 words without too much of a burden. This is not a requirement though, and could vary a lot depending on the material you choose.

If you’re not sure whether the time and work you’re putting into the HTML formatting is appropriate, feel free to reach out and I’ll help you gauge.

The easiest way to get the word count of a passage of text is probably to copy and paste the text into a blank Google Doc. There’s a menu item “Tools > Word Count”. BBEdit includes word count in its status bar at the bottom of every document, but VSCode does not. There’s an extension for this but it only activates for certain syntaxes (I tried it; don’t bother).

Responsive Layout

The layout should be responsive, meaning the text will reflow and other elements will scale to any size viewport. For a single column layout you may find this easier than it sounds!

You can get most of the way there with just a few CSS rules: an appropriate img reset if you have images; max-width to contain the content to an appropriate width; margins to center it on larger viewports.