Technology Reclamation Institute

Cured HTML

The idea behind Cured HTML is to remove the need for manually tagging paragraphs through judicious use of CSS rules. The result is a format that looks like simple text when you write simple text, but has all the capabilities of HTML when those are necessary. Here is the general recipe:
  1. Designate a tag or a class as container for handwritten HTML.
  2. Set its white-space CSS property to keep track of newlines, but collapse consecutive whitespace.
  3. Reset margins and padding of all nested elements to 0.
  4. Create individual CSS rules for semantic text elements (headers, blockquotes, lists, etc.) so that reasonably formatted text is rendered as reasonably looking page content.
And here is how the markup looks like: <h1>A top headind</h1> This is the first paragraph. This is the second paragraph. You can use <i>inline</i> tags with no issues. <blockquote> This is a blockquote. </blockquote> Hopefully you get the picture.

Implementation Example

Let's start with the main two CSS rules: .cured{ white-space: pre-line; } .cured *{ margin: 0; padding: 0; } The class cured will be applied to the tag containing handwritten HTML. These rules effetively implement the first three steps from the recipe above. Next, single-line block elements (that will reside on the same line as their surrounding tags) will have to be made either inline or inline-blocks. You don't want them to be full blocks, because preceding and following newlines in text will by themselves take care of spacing. .cured h1{ display: inline-block; } Finally, multi-line blocks (ones where opening and closing tags are on their own lines) will unfortunately need some CSS hackery: :root{ --line-height: 19pt; --negative-line-height: calc(-1 * var(--line-height)); --text-background: white; line-height: var(--line-height); } /*...*/ .cured blockquote{ background-color: hsl(40, 50%, 90%); margin-bottom: var(--negative-line-height); box-shadow: inset 0 var(--line-height) var(--text-background); margin-top: var(--negative-line-height); } The problem is that the very first newline after the opening tag of our blockquote will introduce an empty line at the top of blockquote's rendered box. In Chrome and in quirks mode Firefox it can be elegantly fixed by styling pseudo-element ::first-line with line-height of 0. Unfortunately, this does not work in Firefox standards mode. Instead, we "bleach" the top portion of the box via box-shadow. To make sure it all aligns properly, we use CSS variables tied to line height. Not a great solution, but passable. You might wonder why not just make block quotes a full-width inline block. It's an option, but one that intereferes with many CSS properties that you might find convenient when formatting a low-markup document (like auto margins).

Extras

It's possible to make a self-contained version of the CSS involved, but a lot of those rules would be superceded by a CSS reset, so the practical worth of a self-contained version is questionable. The important thing is to understand the overall approach and know useful CSS rules at your disposal.