Cured HTML

HTML can be styled so that there is no need to manually tag pargraphs or linebreaks. Such "format" is easy to author by hand, reads mostly like normal text, yet has all the tagging, scripting and styling capabilities of HTML. Here is an example of what it looks like: Here is the general recipe of how this can be implemented:

Designate a tag as container for handwritten HTML.
Set its white-space CSS property to pre-line to keep track of newlines, but collapse consecutive whitespace.
Reset margins of its child elements to 0.
Create individual CSS rules for semantic text elements (headers, blockquotes, lists, etc.) so that reasonably formatted text is rendered as reasonably looking page content.

There are different ways to do this in practice.

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 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 the text will by introduce appropriate spacing.


.cured h1{
	display: inline-block;
}

Unfortunately, multi-line blocks (ones where opening and closing tags are on their own lines) will either have 1-rem padding or require some CSS hackery. The problem is that the very first newline after the opening tag will introduce an empty line at the top of the tag's render box. In Chrome (and in quirks mode Firefox for some reason) this 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 can "blend" the top portion of the box via box-shadow or simply set padding on all other sides to the same size.


:root{
	line-height: 19pt;
}

.cured blockquote{
	background-color: hsl(40, 50%, 90%);
	margin-bottom: -19pt;
	box-shadow: inset 0 19pt white; /* make the first blank line blend with background*/
	margin-top: -19pt; /* and pretend it does not exist */
}

You can use a CSS variable to make sure the line height is specified in one place.

Extra Hints

You can style custom attributes or even tags to add extra markup to the source text without distracting verbocity.
You can use a script tag with type="text/plain" and style it to display as a block if you want to render code or HTML without escaping all the angle brackets.
Nested tags can be styled to have different white-space rules when it makes sense.