Replace text with CSS
Since I discovered the Datalegreya font, I've started doing experiments to include it on a webpage. The main issue I have been thinking about is: if for any reason the font cannot be loaded (network issues, webfonts blocked, and so on, leading to a FOUT), is there a way to show the original, unstyled text instead of an unreadable version with ligatures? Can I show data instead of d|2a|1t|3a|2?
Although a Javascript solution wouldn't be difficult to write, I wanted a CSS-only solution – if at all possible. I've settled on something similar to this, where in a nutshell I enclose in a <span> element the original text I want to replace, then I use a pseudoelement to replace the <span> with the styled text.
With this solution, the HTML looks like this:
<h2 class="data-replace">Some <span>data</span></h2>
The CSS instead looks like this:
.data-replace span {
display: none;
}
.data-replace::after {
content: "d|2a|1t|3a|2";
}
There are two minor drawbacks to this:
- It only works if the text to be replaced is at the end of the line.
- The replaced text cannot be selected.
This approach does not prevent a FOUT, because the replacement will still happen as soon as the CSS is loaded. It is still useful anyway for “text mode” (for example with screen readers, or via the browser option) as it will show the original HTML content.