Question

Is there any way to have a CSS class to parse text input as if it were pre-formatted, as if it were the <pre> tag? By that, I mean monospace, but also with the possibility of having indented text, and multiple adjacent spaces.

Answer 1

An approach that works in practice on current browsers, but with no guarantee of working universally:

.codelike { font-family: monospace; }

There is no way of knowing, in CSS, which font a browser uses by default for code elements, or for pre elements (it is not clear which one you mean). In practice, though, browsers seem to use the same font as they use to implement the generic font name monospace. But this is not a requirement, and they might well use something else, and different font for pre than for code.

Note that if you put any font name before the generic font name, as you normally should when writing a style sheet, it will break this idea. Different browsers have different default monospace fonts, and this can often be changed by the user.

On the other hand, if you just want to have the same monospace for code, pre, and your class, that’s easy, e.g.

code, pre, .codelike { font-family: Consolas, Courier New, monospace; }

Note that browsers by default usually apply reduced font size for elements like code and pre, presumably to compensate for the generally larger size of characters in monospace fonts than in other fonts (when using the same font size). It is not possible to describe this exactly in CSS, as it is browser-dependent and partly undocumented, but it can easily be overridden if desired, e.g.

code, pre, .codelike { font-size: 100%; }