Pre Element use-case: brilliant or hacky?

September 10, 2015 - By

Twice in the past month I have come across issues where the data coming to me from a database contains useful whitespace, but no HTML. I have saved the day by using a <pre> element; this took minutes in CSS where I think back-end sanitization and wysiwyg tool integration and hoop-jumping would take days and require security testing.

Is this brilliant or hacky!? More details!

Here’s one example from a WordPress site. This custom taxonomy has a Description text area that saves whitespace without HTML. If I was a PHP whiz I could probably do some fancy work with functions.php to make it sanitize and become markup in some way.

Screen Shot 2015-09-10 at 16.40.12

On the front-end it looks like normal paragraphs and text thanks to a couple CSS properties:

  1. font-family: inherit; // gets rid of the monospace font
  2. white-space: pre-line; // makes it wrap like a paragraph. pre-wrap works too.
Screen Shot 2015-09-10 at 16.39.53

One question I have is about accessibility, do screen readers read this text the same as paragraphs? Since there is no markup or content like images or links I assume it will be ok.


Categorized in:

This post was written by ArleyM