Question

This has been difficult to get my head around whether it’s even possible, let alone how.

I wish to display text-based “screen captures” from an AS/400. These screens are 80×24 character-based screens which have colour and bold/underline capabilities.

I can copy an entire screen as text and place it between PRE tags and it looks great except that it is missing the underlines which are used to indicate where the input fields are on the screen.

If said input fields are empty, then it is possible to simulate them by replacing the spaces with actual underline characters – which is a bit of a chore – but the fields often display default values which I want to maintain in my representation.

Hence my requirement for monospaced text with preserved whitespace and (presumably ned) underline style applied selectively to specific characters (while maintaining the whitespace!)

I just cannot get my head around what mix of HTML/CSS could be used to achieve this relatively easily. Chiefly, the problem, I think, is the apparent paradox of styles within pre-formatted text.

Any thoughts on approach, technique or basic impossibility of this would be appreciated.

Answer 1

You can use markup inside a <pre> element. By the specs, only certain kinds of markup elements are allowed there, though browsers are more permissive; but for your purposes, allowed text-level markup is quite sufficient.

You can use <u> for underline, <b> for bolding, and <font color=...> for coloring, or you can use <span class=...> for all purposes, with different class attributes and with suitable CSS settings.

This means that the HTML source does not look good, because you start with preformatted text and throw in markup. For example, if you have

foo bar: umpf
foo bar: zap

and you want the second “bar” to be underlined, you’d change this to

foo bar: umpf
foo <b>bar</b>: zap

and then things don’t look aligned in HTML.

But the display will be OK, as long as you are careful in adding the tags or in writing program code that adds them (if they can be added algorithmically).

Underlining and coloring do not change the advance width of a character. Bolding may do that, and often does, but not in monospace fonts. The only exception I found in my quick tests on this is Everson Mono, but you’re probably not using it. There might be other (rarely used) monospace fonts that have the same problem: they lack a bold typeface, forcing programs to either ignore bolding attempts or to apply algorithmic bolding, which often increases the width slightly.