Pre Element use-case: brilliant or hacky?September 10, 2015 -
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.
On the front-end it looks like normal paragraphs and text thanks to a couple CSS properties:
- font-family: inherit; // gets rid of the monospace font
- white-space: pre-line; // makes it wrap like a paragraph. pre-wrap works too.
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: Personal
This post was written by ArleyM